小程序模板網(wǎng)

開發(fā)筆記:使用 mpvue 開發(fā)斗圖小程序

發(fā)布時間:2018-07-25 09:01 所屬欄目:小程序開發(fā)教程

之前用過 wepy 框架寫了個小程序 GitHub - yshkk/shanbay-mina: 基于 wepy 框架的 “扇貝閱讀” 微信小程序 ,感覺寫法上類似 vue,但不那么徹底。現(xiàn)在美團點評發(fā)布的 mpvue 支持開發(fā)者可以用 vue 的語法開發(fā)微信小程序,正好有強需求需要一個斗圖小程序,所以就嘗試了下。

 

掃碼體驗

截圖

開發(fā)細節(jié)和坑

使用 iView Weapp 組件庫

相關(guān)代碼 pages/index/main.js 第 8 行

將組件庫的 dist 目錄拷貝到自己項目 static 目錄,然后在需要用到組件的頁面配置 usingComponents 即可。開發(fā)期間可能對組件的樣式不太滿意,或者一些蜜汁問題(比如 input 下邊框突然消失 issue ),要改的話方式非常詭異 相關(guān) issue ,所以粗暴點的方式就是直接改組件庫里的 wxss 文件。

v-show 和 v-model 不好使

相關(guān)代碼 pages/index/index.vue 第 4 行

關(guān)于 v-show 相關(guān) issue ,所以只能用 v-if 替代。使用 v-if 會銷毀不顯示的組件,但有個場景是期望保留原來的組件,因此只能曲線救國在組件外層包一個 < view > 使用 :style="{display?condition?'block':'none'}" 的方式(其實最好是用 keep-alive 的方法,可惜 mpvue 不支持)。

v-model 就很奇怪了,好像 input 不能雙向綁定,原因是自定義組件就沒有支持 v-model ,所以得手動 update data。同理使用組件庫 input 后不能使用 v-focus 。(相關(guān) issue )

模板語法里不能調(diào)用 methods 方法

相關(guān)代碼 components/homppage.vue 第 52 行

可以說是血坑了,一直以為我使用姿勢有誤,費了好長時間。后來才從 articles / 美團小程序框架 mpvue 蹲坑指南. md at master · noahlam/articles · GitHub 看到原來這是 mpvue 不支持。 當時的場景是這樣的: 在圖片列表里,給被用戶 “收藏” 過的圖片加個額外的 className,該 className 可以給圖片加個粉色邊框,這樣就能在圖片列表中一眼看到哪些是被收藏過的。data 里有一個表示所有圖片的數(shù)組 imageList 和一個表示收藏列表的數(shù)組 favoriteList 。起初的寫法是

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

其中 isFavorite 是在 methods 里的一個方法,判斷當前圖片 url 是否在 favoriteList 里。然而這樣寫一直不 work,后來只能換個方案:在 computed 里跟據(jù) imageList 和 favoriteList計算出 一個叫 imageListWithFavorite 的數(shù)組,遍歷這個數(shù)據(jù)即可:joy: 雖然很丑陋但是還能用。

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

相關(guān)代碼 components/homppage.vue 第 63 行

用戶收藏的表情會放到微信提供的 storage,類似瀏覽器的 localstorage,這樣在關(guān)閉小程序以后下次來還能看到自己的收藏,因此在組件需要 watch favoriteList 的變更并調(diào)用 wx.setStorage 方法。但是不知為何直接 watch favoriteList 并不會觸發(fā)相應函數(shù),而 watch ‘favoriteList.length’就能觸發(fā),希望有大佬能指點下。

watch: {
    'favoriteList.length': {
      // 將變化更新到本地存儲
      handler: function (val, oldval) {
        this.updateStorage({method: val > oldval ? 'ADD' : 'DELETE'})
      }
    }
  }
復制代碼

表情包圖片制作

相關(guān)代碼 pages/maker/index.vue

思路是初始化一個 canvas,將表情模版(一張圖片,url 從跳轉(zhuǎn)過來的頁面的 query 里取得)繪制到 canvas 上,用戶打字 / 設(shè)置顏色字體 的時候調(diào)用 updateCanvas 。最后調(diào)用 wx.canvasToTempFilePath 方法輸出成圖片。 關(guān)鍵代碼如下

ctx = wx.createCanvasContext('maker') // 選擇當前 canvas
  ...
	updateCanvas () {
      ctx.drawImage(this.path, 0, 0, 300, 300) //path 為當前表情包的路徑
      ctx.setTextAlign('center') // 必須每次在 updateCanvas 重新設(shè)置,否則模擬器上生效但真機下不會生效
      ctx.setFontSize(this.fontSize)
      ctx.setFillStyle(this.currentColor)
      ctx.fillText(this.txt, this.x, this.y)
      ctx.draw()
    },
復制代碼

有幾個小坑:

  • 將圖片繪制到 canvas 時指定的圖片不能是一個遠端圖床的鏈接,必須先本地下載下來(調(diào)用 wx.getImageInfo 獲取圖片,得到本地一個臨時 path)才能繪制。
  • canvas 指定的大小單位是 px,而用 css 控制的單位是 rpx(mpvue 用了 px2rpx-loader ,就算在 css 里寫成 px 也會被編譯成 rpx)。
  • 小程序 canvas 的 save 和 restore 功能在這里很雞肋,每次都需要完全重繪一次。特別是用戶拖動文字更新文字坐標的功能, touchmove 事件一直觸發(fā),就一直更新 canvas,小程序里沒有 requestAnimationFrame 的方法,所以就自己得~~ 從網(wǎng)上找~~ 封裝一個,在拖動時起到節(jié)流的效果。
  • canvas 輸出的圖片只支持 jpg 或者 png,因此即使用 gif 圖的模版也只能生成靜態(tài)的表情包,殘念。

總結(jié)

大體上使用 mpvue 的體驗還是挺好的。mpvue 和 wepy 的寫法上比較類似,mpvue 對 vue 開發(fā)者來說更友好容易上手,wepy 更接近于原生小程序。雖然框架的出現(xiàn)屏蔽了一些原生小程序?qū)懫饋砗艹舐牡胤剑?nbsp;但是不管用什么框架,原生小程序的文檔還是需要掌握的 ,有一大堆的坑等著要踩,有時候不得不從編譯出的文件里面找原因。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24658.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢