背景：想學習微信小程序開發，決定自己做一個小程序來熟悉大致過程
開發過程：
- 首先，需要註冊登陸https://mp.weixin.qq.com/微信公衆平臺申請小程序賬號（個人郵箱如果已經申請了公衆號賬號後不能使用同一郵箱再申請小程序賬號）；
- 瀏覽開發文檔https://developers.weixin.qq.com/miniprogram/dev/framework/，瞭解小程序的目錄結構、基本配置項和框架使用方法。擁有Vue相關基礎的話，基本無障礙學習小程序開發；
- 下載微信開發工具https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html，完成下載安裝後按照開發工具引導建立第一個小程序。這裏筆者新建的是不涉及雲開發的純前端程序，語法使用JavaScript。新建完成後給出的小程序會包含一個的登陸頁面及日誌頁面的示例項目，這個項目微信並沒有更新，不包含一些新語法，但還是推薦仔細閱讀一下用來學習小程序的全局配置，架構和語法信息。
- 之後熟悉一下微信開發工具的大致用法，工具可以實現小程序的API 和頁面的開發調試、代碼查看和編輯、小程序預覽和發佈等功能，而且可以直接關聯了微信的git代碼版本維護功能（工具確實不如主流編輯器好用，使用不習慣的同學可以在此處進行新建項目以及調試預覽，代碼編輯和版本維護的話可以使用自己常用的開發工具進行開發）。
- 終於開始正式開發了，新建一個頁面，並在app.json裏面加入tabBar信息（這個個人覺得小程序開發都會配置吧，但是示例裏沒有配置，可以直接在開發文檔裏搜索照着配置），將新建頁面的路由設置到tabBar
- 頁面開發過程除了自己要寫的邏輯，當然少不了輪子，微信提供了一套通用WeUI可以直接引入使用，使用方法就兩個步驟：
-
在頁面的json文件中引入 { "usingComponents": { "mp-icon": "/weui-miniprogram/icon/icon" // 這個官方示例路徑是../.. 實際直接使用絕對路徑就能直接使用 } } 在頁面的wxml文件裏就可以直接使用 <mp-icon type="field" icon="transfer2" color="#353535"></mp-icon>
-
- 或者可以使用npm功能，微信小程序開放npm支持https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
- 對於需要自己抽象的此項目的公共方法可以在util中實現，在文件中使用module.exports導出及require到處
- 對於需要自己抽象的組件可以新建component文件夾，引入時在頁面中配置
-
{ "component": true, // 這個不要忘了 "usingComponents": { "header": "/component/header/index" } }
-
注意點（以下是初次開發遇到的一些問題記錄）：
- 微信開發文檔表明了API使用和配置，但是對於相關問題沒有提供太多的解決方法，這時候充分利用開發文檔上方的社區，常用問題基本都有解決，社區是有官網開發人員解答疑問的；
- 使用TypeScript或JavaScript在引入npm的時候會發現測試項目的路徑有細微的差別，這點需要注意
- scroll-view如果不能滾動，可以查看是否將scroll-view設置了固定高度
- 接口的mock數據不需要引入其他配置工具或服務，開發工具控制檯提供了mock的TAB直接配置使用
- 開發一期完成後發現了微信開發工作控制檯中的Audit性能測試，通過測試遇到了幾個問題
- 提示setData設置了一些視圖層未使用過的變量。這個解釋下，微信setData除了更新數據，還是通知視圖層更新相關視圖，如果數據從未在視圖層渲染（比如一些計數邏輯），可以直接在page對象裏申請個用於記錄，無需要使用setData進行更新Page({diyData: {test}})，之後直接使用this.diyData.test更新
- 提示字體顏色影響體驗，這個其實是指字體和背景顏色對比度不夠，這個由於個人缺乏美感，所以找了兩個工具https://hexnaw.com/ 和https://www.checkmycolours.com/能夠對比不同顏色的對比度值
寫在最後：
初次使用小程序開發，使用的功能和遇到的問題都比較淺顯，在此記錄以下