Web開發到微信小程式

閑來無事，突然想寫一個小程式，于是好好的周五的晚上寫了一晚上代碼，從完全不知道什麼情況（我的JavaScript水準很差的），到愣是寫好了一個已經釋出了的小程式。是以這裡隻是想分享一下一個Web開發人員半吊子前端水準如何寫出一個小程式。

準備條件

• 微信開發者工具，去官網下載下傳
• 微信小程式賬号注冊一個，https://mp.weixin.qq.com/
• ES6，這個我覺得Java程式員應該都是依樣畫葫蘆寫出來
• JavaScript，不一定要精通，至少要會寫吧
• 官方的微信小程式demo，https://github.com/xwartz/wechat-app-demo
• 官方文檔一份，https://developers.weixin.qq.com/miniprogram/dev/index.html

小程式和Web開發的相似點

其實小程式和Web開發還是有很多相似之處的，隻要知道這些，開發起來也會容易很多。當然開始開始先簡單閱讀下官方文檔的get start。

視圖層

WXML

這個字尾的檔案其實就和JSP或者其他模闆一樣，裡面有些微信自己封裝的标簽和屬性，參照官方文檔寫就行了。

WXSS

這個檔案其實就是css檔案，所有樣式都放在裡面就好。

邏輯層

JS檔案就是用來處理各種業務邏輯的地方，當計算好的結果要傳回給視圖層的時候，隻需要将資料放入page對象的pageData.data，用setData方法就好。

配置層

app.json，該檔案用于配置目前app的常用配置，比如将要所有頁面都注冊到這個配置檔案裡面。

Troubleshooting

• 每次修改了pageData的data内容的時候，一定要調用setData方法，這裡就跟flux有點相似，修改了store的内容，需要通知到視圖層去更新。
• 每個page的data，和css都互相獨立，意思是說pageData這個對象的scope是隻是目前page。
• 全局變量建議定義在app.js裡面。
• app.wxss是公共的css檔案，會被page裡面的覆寫。

部署

微信小程式分為開發版，體驗版和正式版。

開發版

這個隻需要點選用手機掃面預覽二維碼就可以，但是隻限于自己綁定的微信賬号和給了權限的賬号，一般用于開發人員。

體驗版

這個需要上傳代碼到微信伺服器，同樣也需要授權給部分微信賬号，才可以使用，一般用于測試人員（我猜的）。

正式版

這個就是正式釋出後的，所有人都可以在手機上面搜尋到該版本，但是需要送出給微信稽核，稽核通過之後方可釋出。

附錄

寫好的小程式源碼：https://github.com/vurtnec/vPassword