開發筆記：使用 mpvue 開發斗圖小程序
|
之(zhi)前(qian)用過(guo) wepy 框(kuang)架(jia)(jia)寫了個(ge)小(xiao)程(cheng)序(xu) GitHub - yshkk/shanbay-mina: 基于 wepy 框(kuang)架(jia)(jia)的 “扇貝(bei)閱(yue)讀” 微信小(xiao)程(cheng)序(xu) ，感覺寫法上類(lei)似 vue，但不那么徹底。現(xian)在美團點評(ping)發(fa)布(bu)的 mpvue 支持(chi)開發(fa)者可以用 vue 的語(yu)法開發(fa)微信小(xiao)程(cheng)序(xu)，正好(hao)有強需求需要一個(ge)斗圖小(xiao)程(cheng)序(xu)，所以就嘗(chang)試了下。 掃碼體驗
截圖
開發細節和坑使用 iView Weapp 組件庫相(xiang)關代碼 pages/index/main.js 第 8 行 將組件庫的(de)(de) dist 目錄拷貝到自己(ji)項目 static 目錄，然(ran)后(hou)在需要(yao)用到組件的(de)(de)頁面配置(zhi) usingComponents 即(ji)可。開發期間(jian)可能對(dui)組件的(de)(de)樣式不太滿意，或者一些蜜汁問題(ti)（比如 input 下邊(bian)框突然(ran)消(xiao)失 issue ），要(yao)改(gai)的(de)(de)話方式非常詭(gui)異 相關 issue ，所以(yi)粗暴點(dian)的(de)(de)方式就是(shi)直接(jie)改(gai)組件庫里的(de)(de) wxss 文件。 v-show 和 v-model 不好使相關代碼 pages/index/index.vue 第 4 行 關于 v-show 相關 issue ，所以只能(neng)用(yong) v-if 替代。使用(yong) v-if 會銷毀不顯示(shi)的組件，但(dan)有個場景(jing)是(shi)期望(wang)保留原來的組件，因此只能(neng)曲線救國(guo)在(zai)組件外(wai)層包一個 < view > 使用(yong) :style="{display?condition?'block':'none'}" 的方式（其實最(zui)好是(shi)用(yong) keep-alive 的方法(fa)，可惜 mpvue 不支(zhi)持(chi)）。 v-model 就很奇(qi)怪了，好(hao)像 input 不(bu)能雙(shuang)向綁(bang)定(ding)，原因是(shi)自定(ding)義組件(jian)就沒有支(zhi)持 v-model ，所(suo)以得手動 update data。同理使(shi)用組件(jian)庫 input 后不(bu)能使(shi)用 v-focus 。(相關 issue ) 模板語法里不能調用 methods 方法相關代(dai)碼 components/homppage.vue 第 52 行 可以說是(shi)血坑了(le)，一(yi)(yi)直以為我使用(yong)姿勢有(you)誤(wu)，費了(le)好長時(shi)間。后(hou)來才從(cong) articles / 美(mei)團小程(cheng)序(xu)框架 mpvue 蹲坑指(zhi)南. md at master · noahlam/articles · GitHub 看到原(yuan)來這(zhe)是(shi) mpvue 不(bu)支持。 當時(shi)的場(chang)景是(shi)這(zhe)樣的： 在圖(tu)(tu)片(pian)(pian)列(lie)表里，給被(bei)用(yong)戶 “收(shou)藏(zang)” 過的圖(tu)(tu)片(pian)(pian)加(jia)(jia)個(ge)額外的 className，該 className 可以給圖(tu)(tu)片(pian)(pian)加(jia)(jia)個(ge)粉色邊框，這(zhe)樣就能在圖(tu)(tu)片(pian)(pian)列(lie)表中一(yi)(yi)眼看到哪些是(shi)被(bei)收(shou)藏(zang)過的。data 里有(you)一(yi)(yi)個(ge)表示所有(you)圖(tu)(tu)片(pian)(pian)的數組(zu) imageList 和一(yi)(yi)個(ge)表示收(shou)藏(zang)列(lie)表的數組(zu) favoriteList 。起初的寫法是(shi) <image v-for="img in imageList" :src="img.url" :class="isFavorite(img.url)?'image-favorite':'image'" 復制代碼 其中 isFavorite 是(shi)在(zai) methods 里的一個(ge)方(fang)(fang)法，判斷當前圖片 url 是(shi)否(fou)在(zai) favoriteList 里。然而這樣(yang)寫一直不(bu) work，后來只能換個(ge)方(fang)(fang)案(an)：在(zai) computed 里跟據(ju) imageList 和(he) favoriteList計算出 一個(ge)叫 imageListWithFavorite 的數組，遍歷這個(ge)數據(ju)即(ji)可:joy: 雖然很丑陋但是(shi)還能用。 將用戶收藏同步到本地存儲相關代碼 components/homppage.vue 第 63 行(xing) 用戶收藏的(de)表情(qing)會(hui)放到(dao)微(wei)信提(ti)供的(de) storage，類(lei)似瀏覽(lan)器的(de) localstorage，這(zhe)樣在關閉小程序(xu)以后(hou)下次(ci)來還能(neng)看到(dao)自(zi)己的(de)收藏，因此在組件需要 watch favoriteList 的(de)變更(geng)并調用 wx.setStorage 方法(fa)。但是(shi)不知為何(he)直(zhi)接(jie) watch favoriteList 并不會(hui)觸(chu)發相應函數，而 watch ‘favoriteList.length’就(jiu)能(neng)觸(chu)發，希望有大佬能(neng)指點下。
watch: {
'favoriteList.length': {
// 將變化更新到本地存儲
handler: function (val, oldval) {
this.updateStorage({method: val > oldval ? 'ADD' : 'DELETE'})
}
}
}
復制代碼
表情包圖片制作相關代碼 pages/maker/index.vue 思路是初始化一個 canvas，將表情(qing)模版（一張圖片，url 從跳轉(zhuan)過來的頁面的 query 里取得）繪(hui)制到 canvas 上，用戶(hu)打字 / 設(she)置顏(yan)色字體 的時候調用 updateCanvas 。最后(hou)調用 wx.canvasToTempFilePath 方法輸出成圖片。 關鍵代(dai)碼如下
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()
},
復制代碼
有(you)幾個小坑：
總結大(da)體上(shang)使用 mpvue 的體驗還(huan)是(shi)挺好(hao)的。mpvue 和(he) wepy 的寫(xie)法上(shang)比較(jiao)類似，mpvue 對 vue 開發者來說更友好(hao)容易上(shang)手，wepy 更接近于原生小(xiao)程序(xu)(xu)。雖然框架的出(chu)現屏蔽(bi)了一(yi)些原生小(xiao)程序(xu)(xu)寫(xie)起來很丑陋的地方(fang)， 但是(shi)不(bu)管用什么框架，原生小(xiao)程序(xu)(xu)的文檔還(huan)是(shi)需要掌(zhang)握的 ，有一(yi)大(da)堆的坑(keng)等著要踩，有時(shi)候不(bu)得(de)不(bu)從(cong)編譯出(chu)的文件(jian)里面(mian)找原因。 |
