之前用過?wepy?框架寫了個小程序?GitHub - yshkk/shanbay-mina: 基于 wepy 框架的 “扇貝閱讀” 微信小程序?，感覺寫法上類似 vue，但不那么徹底。現在美團點評發布的?mpvue?支持開發者可以用 vue 的語法開發微信小程序，正好有強需求需要一個斗圖小程序，所以就嘗試了下。
掃碼體驗
截圖
開發細節和坑
使用?iView Weapp?組件庫
相關代碼 pages/index/main.js 第 8 行
將組件庫的 dist 目錄拷貝到自己項目 static 目錄，然后在需要用到組件的頁面配置?usingComponents?即可。開發期間可能對組件的樣式不太滿意，或者一些蜜汁問題(比如 input 下邊框突然消失?issue?)，要改的話方式非常詭異?相關 issue?，所以粗暴點的方式就是直接改組件庫里的 wxss 文件。
v-show 和 v-model 不好使
相關代碼 pages/index/index.vue 第 4 行
關于?v-show?相關?issue?，所以只能用?v-if?替代。使用?v-if?會銷毀不顯示的組件，但有個場景是期望保留原來的組件，因此只能曲線救國在組件外層包一個?< view >?使用?:style="{display?condition?'block':'none'}"?的方式(其實最好是用 keep-alive 的方法，可惜 mpvue 不支持)。
v-model?就很奇怪了，好像 input 不能雙向綁定，原因是自定義組件就沒有支持?v-model?，所以得手動 update data。同理使用組件庫 input 后不能使用?v-focus?。(相關?issue?)
模板語法里不能調用 methods 方法
相關代碼 components/homppage.vue 第 52 行
可以說是血坑了，一直以為我使用姿勢有誤，費了好長時間。后來才從?articles / 美團小程序框架 mpvue 蹲坑指南. md at master · noahlam/articles · GitHub?看到原來這是 mpvue 不支持。 當時的場景是這樣的： 在圖片列表里，給被用戶 “收藏” 過的圖片加個額外的 className，該 className 可以給圖片加個粉色邊框，這樣就能在圖片列表中一眼看到哪些是被收藏過的。data 里有一個表示所有圖片的數組?imageList?和一個表示收藏列表的數組?favoriteList?。起初的寫法是
復制代碼
其中?isFavorite?是在 methods 里的一個方法，判斷當前圖片 url 是否在?favoriteList?里。然而這樣寫一直不 work，后來只能換個方案：在 computed 里跟據?imageList?和?favoriteList計算出 一個叫?imageListWithFavorite?的數組，遍歷這個數據即可:joy: 雖然很丑陋但是還能用。
將用戶收藏同步到本地存儲
相關代碼 components/homppage.vue 第 63 行
用戶收藏的表情會放到微信提供的 storage，類似瀏覽器的 localstorage，這樣在關閉小程序以后下次來還能看到自己的收藏，因此在組件需要 watch?favoriteList?的變更并調用?wx.setStorage?方法。但是不知為何直接 watch?favoriteList?并不會觸發相應函數，而 watch ‘favoriteList.length’就能觸發，希望有大佬能指點下。
watch: {
'favoriteList.length': {
// 將變化更新到本地存儲
handler: function (val, oldval) {
this.updateStorage({method: val > oldval ? 'ADD' : 'DELETE'})
}
}
}
復制代碼
表情包圖片制作
相關代碼 pages/maker/index.vue
思路是初始化一個 canvas，將表情模版(一張圖片，url 從跳轉過來的頁面的 query 里取得)繪制到 canvas 上，用戶打字 / 設置顏色字體 的時候調用?updateCanvas?。最后調用?wx.canvasToTempFilePath?方法輸出成圖片。 關鍵代碼如下
ctx = wx.createCanvasContext('maker') // 選擇當前 canvas
...
updateCanvas () {
ctx.drawImage(this.path, 0, 0, 300, 300) //path 為當前表情包的路徑
ctx.setTextAlign('center') // 必須每次在 updateCanvas 重新設置，否則模擬器上生效但真機下不會生效
ctx.setFontSize(this.fontSize)
ctx.setFillStyle(this.currentColor)
ctx.fillText(this.txt, this.x, this.y)
ctx.draw()
},
復制代碼
有幾個小坑：
將圖片繪制到 canvas 時指定的圖片不能是一個遠端圖床的鏈接，必須先本地下載下來(調用?wx.getImageInfo?獲取圖片，得到本地一個臨時 path)才能繪制。
canvas 指定的大小單位是 px，而用 css 控制的單位是 rpx(mpvue 用了?px2rpx-loader?，就算在 css 里寫成 px 也會被編譯成 rpx)。
小程序 canvas 的?save?和?restore?功能在這里很雞肋，每次都需要完全重繪一次。特別是用戶拖動文字更新文字坐標的功能，?touchmove?事件一直觸發，就一直更新 canvas，小程序里沒有?requestAnimationFrame?的方法，所以就自己得~~ 從網上找~~ 封裝一個，在拖動時起到節流的效果。
canvas 輸出的圖片只支持 jpg 或者 png，因此即使用 gif 圖的模版也只能生成靜態的表情包，殘念。
總結
大體上使用 mpvue 的體驗還是挺好的。mpvue 和 wepy 的寫法上比較類似，mpvue 對 vue 開發者來說更友好容易上手，wepy 更接近于原生小程序。雖然框架的出現屏蔽了一些原生小程序寫起來很丑陋的地方，?但是不管用什么框架，原生小程序的文檔還是需要掌握的?，有一大堆的坑等著要踩，有時候不得不從編譯出的文件里面找原因。
