疫情期間，我通過專案重學了小程式

前言

這段時間，上海疫情爆發的很嚴重，3月12日起筆者就被封在小區，至今已有40多天。這期間經歷了面試，搶菜，寫文章，到現在又撿起了小程式

筆者近幾年用 github 來記錄年度計劃，並每週設立計劃執行

年度計劃

像前端知識地圖、部落格、讀書還好，都是日常基本功，但是獨立作品今年都沒有動作，按照進度，上半年怎麼也要有一個，於是乎，就想著從想法裡拿出一個做成專案

正文

一開始我是想弄我的幾行字，因為幾行字是H5版本，所以想再做一版小程式，但做完之後感覺有點簡單，就打算再做一個

一個機緣巧合的情況下，我想起了三年前嘗試做的獨立專案——NextDay

想想，這個頁面只有一頁，但細節多，還有自定義元件，可以從中學習到做一個小程式會碰到的坑，於是乎，我的小程式之旅有一遭沒一遭的做了起來

這裡記錄筆者做小程式時的困難和解決方案

手畫原型
- 以NextDay App 為原型展開
小程式開發
- 微信官方文件·小程式
- 微信開發社群
自定義導航條
- 全屏模式下，導航條不讓其出現 "navigationStyle": "custom"
- CSS 也要配合的做，不讓他上下滑動postion: fixed
除錯介面
- 需要授權，拿到 Partner Name 和 Partner Secret
- 也正是因為它嚴明要開源，所以開源了
- 需要在 header 處加上 Date 和 authorization，authorization 需要加上 md5 加密，可去開源處看程式碼
主頁（主畫面）設計、功能
- swiper 滑動功能接入。介面返回資料是從前幾日到今天，如何在 onload 處顯示今日資料？swiper 的current設定為今天
- 佈局上採用絕對定位，適配單位上採用rpx和百分比
引入 npm 包
- 返回的介面資料和頁面上的資料是不同的，需要我們從中做轉換，遂引入 dayjs 庫
註冊小程式
- 小程式流程
- 文案
陰影處理
- 前端這邊的設計，text-shadow 屬性
上拉出現設定和分享
- 抽屜元件，點選分享Icon 分享
分享給朋友和朋友圈設定
- onShareAppMessage 和 onShareTimeline
- 分享給朋友時，採用的圖片應該是 5:4 比例尺寸的圖，使用介面返回的小圖，意味著需要每次載入時需要記住當前的所在組，每次滑動時都需要改變當前的所在組
手機適配
- 介面圖片有多種，有適配瀏覽屏的圖片和普通圖片
- wxml 中進行條件判斷，這裡注意不能加空格
介面雲端化
- 因為 NextDay 的介面是 HTTP 協議，小程式不支援 HTTP 協議的，所以就用雲開發做轉發
- 主要參考資料：官網微信學堂視訊
程式碼重構
- 檔案佈局，設計，雲開發，小程式檔案，小程式中又有元件、npm 包等功能
- 介面
設計logo
- 不用設計，去官網找即可
字型改造、字型適配
- 需要找到和 App 中一樣的字型，比較難，採用字型識別技術，兩種字型，數字日期採用華為最細字型，正文描述字型採用日文字型GothicMB（和 App 中一致）
- 截圖對比，調整大小
點選顯示下載按鈕
- 如下所示，找到也沒用
下載圖片功能
- 失敗，不能下載，圖片域名不是 HTTPS，不支援下載，如果把圖片放在雲函式上免費額度肯定不夠，後續再想想需不需要加，有沒有必要加
設定主頁關於版本、鳴謝
- 多一個關於頁面，新版本去除，感覺沒必要
引入自定義元件
- 抽屜元件，點選彈出
- 設定
上拉模糊
- CSS 樣式 backdrop-filter
搜尋NextDay 關鍵字搜尋不到
- 應該是剛上架不久，又沒做推廣，所以搜不到
- 要全拼NextDay101
訊息提醒
- 希望每一天能提示彈出，新的想法，不知道會不會打擾到別人，第一版就沒做