開發筆記：使用 mpvue 開發鬥圖小程序

初衷

以前用過 wepy 框架寫了個小程序 GitHub - yshkk/shanbay-mina: 基於 wepy 框架的 「扇貝閱讀」 微信小程序，感受寫法上相似 vue，但不那麼完全。如今美團點評發佈的 mpvue 支持開發者能夠用 vue 的語法開發微信小程序，正好有強需求須要一個鬥圖小程序，因此就嘗試了下。

項目地址

GitHub - yshkk/bqb-mpvue: 基於 mpvue 的表情包鬥圖微信小程序

掃碼體驗

截圖

開發細節和坑

使用 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 。起初的寫法是

<image v-for="img in imageList" :src="img.url" :class="isFavorite(img.url)?'image-favorite':'image'" 複製代碼

其中 isFavorite 是在 methods 裏的一個方法，判斷當前圖片 url 是否在 favoriteList 裏。然而這樣寫一直不 work，後來只能換個方案：在 computed 裏跟據 imageList 和 favoriteList 計算出 一個叫 imageListWithFavorite 的數組，遍歷這個數據便可😂 雖然很醜陋可是還能用。

將用戶收藏同步到本地存儲

相關代碼 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 更接近於原生小程序。雖然框架的出現屏蔽了一些原生小程序寫起來很醜陋的地方，可是無論用什麼框架，原生小程序的文檔仍是須要掌握的，有一大堆的坑等着要踩，有時候不得不從編譯出的文件裏面找緣由。