閑來無事，突然想寫一個小程序，于是好好的周五的晚上寫了一晚上代碼，從完全不知道什么情況（我的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

總結

以上是生活随笔為你收集整理的Web开发到微信小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。