之前用过 wepy 框架写了个小程序 GitHub - yshkk/shanbay-mina: 基于 wepy 框架的 “扇贝阅读” 微信小程序 感觉写法上类似 vue但不那么彻底。现在美团点评发布的 mpvue 支持开发者可以用 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 。起初的写法是
<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 的数组遍历这个数据即可: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）。