之前用过?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 ?的数组,遍历这个数据即可: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')
...
updateCanvas () {
ctx.drawImage(this.path,0,0);">300,0);">300)
ctx.setTextAlign('center')
ctx.setFontSize(this.fontSize)
ctx.setFillStyle(this.currentColor)
ctx.fillText(this.txt,this.x,51); font-weight: 700;">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 更接近于原生小程序。虽然框架的出现屏蔽了一些原生小程序写起来很丑陋的地方,?但是不管用什么框架,原生小程序的文档还是需要掌握的?,有一大堆的坑等着要踩,有时候不得不从编译出的文件里面找原因。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|