微信小程序開發初體驗

最近由於工做須要入門了一下小程序，邊入門也邊在思考小程序的應用場景，「用完即走」 四個字一直浮如今腦海。正好最近在學駕照，由於之前一直對車不感冒，因此連奔馳都不認識，正好作個車標速查的小程序，很是符合 「用完即走」 的理念

最終源碼點擊 這裏（附小程序碼），車標信息數據來自 車標網

由於小程序是國產的，因此 文檔 是比較友好的，基本上花個半天看下就能夠入門了。在一個初學者的角度，談談對小程序的感覺

首先，小程序這個東西出現的用意是很是好的，依託於微信，自帶社交、支付等，很是適合傳播，好比鬥地主這樣的小程序（小遊戲），分享到羣，而後開玩，用完即走，很是之爽

而後，小程序的運行自己不依託於瀏覽器，沒有 dom 的概念，在性能上，也比 h5 流暢了很多

能夠說，小程序這個東西，仍是很是有前途的

而後來講說開發這個 車標速查 小程序時候踩的一些坑吧：

• index 頁面右側有個 a-z 的導航，若是是 web 端，用錨點便可解決，可是小程序無法用錨點，正確的解決方案是用 scroll-view 組件，並且須要設置 height 屬性（程序中設置 scroll-view 的 height 屬性爲 100%），而且父節點須要設置 height 屬性爲 100%（程序中設置 page 標籤的 height 爲 100%）原本還想作導航到指定區域時候的 active，可是很差作，遂放棄
• 小程序沒有 div p 等標籤，只能用它自帶的 組件，能夠把 view 組件看成是 web 開發時候的 div
• 由於我抓取的頁面，有直接抓取 html 代碼，那麼就有個問題，如何在小程序中插入 html 代碼？若是是 web 開發，innerHTML 便可，可是小程序沒有 dom，能夠用 wxParse，其實就是把 html 轉換爲了小程序語言的組件（沒有看過具體實現，我以爲應該就是先轉爲抽象語法樹（Abstract syntax tree），而後替換）
• 有個地方想用到相似 Vue 的 filter 功能，小程序中能夠用 wxs 實現，同時貌似發現小程序 {{}} 中竟然不能運算？只能基礎賦值？（小程序其實自帶了富文本組件 rich-text，可是很差用）
• 小程序中有專門的 css 叫作 wxss，它建議用單位 rpx，規定屏幕寬爲 750rpx。建議用 iPhone6 作設計稿，375px，而後設計稿通常是雙倍，也就是 750px，那麼 1px 就對應 1rpx 了，直接按照設計稿來就行了
• app.js 有個勾子叫作 onLaunch，在小程序啓動的時候會觸發，這讓小程序看起來更像是 app，由於相似 Vue 這樣的 web app 並無這樣的勾子
• 若是點擊右上角要可以分享，必需要寫 onShareAppMessage，而這個函數會在轉發的時候觸發。這點設計不是很能理解，個人觀點是這個配置應該放在 xx.json 裏面，而不是放在相似這樣的勾子函數裏
• project.config.json 不須要本身去寫，而是改變微信開發者工具裏的一些配置後，會自動更新，相似 Alfred workflow 開發時候的 info.plist 文件
• 最後說到發佈，貌似一個帳號只能發佈一個小程序／公衆號？以前帳號註冊了一個公衆號，如今不能添加小程序了，只能再註冊一個帳號了

接下去計劃用 mpvue 來改寫這個簡單的小程序