开发笔记：使用 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 更接近于原生小程序。虽然框架的出现屏蔽了一些原生小程序写起来很丑陋的地方，可是无论用什么框架，原生小程序的文档仍是须要掌握的，有一大堆的坑等着要踩，有时候不得不从编译出的文件里面找缘由。