小程序mpvue图片绘制水印_开发笔记:使用 mpvue 开发斗图小程序
之前用过 wepy 框架写了个小程序 GitHub - yshkk/shanbay-mina: 基于 wepy 框架的 “扇贝阅读” 微信小程序 ,感觉写法上类似 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 。起初的写法是
复制代码
其中 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)。
小程序 canvas 的 save 和 restore 功能在这里很鸡肋,每次都需要完全重绘一次。特别是用户拖动文字更新文字坐标的功能, touchmove 事件一直触发,就一直更新 canvas,小程序里没有 requestAnimationFrame 的方法,所以就自己得~~ 从网上找~~ 封装一个,在拖动时起到节流的效果。
canvas 输出的图片只支持 jpg 或者 png,因此即使用 gif 图的模版也只能生成静态的表情包,残念。
总结
大体上使用 mpvue 的体验还是挺好的。mpvue 和 wepy 的写法上比较类似,mpvue 对 vue 开发者来说更友好容易上手,wepy 更接近于原生小程序。虽然框架的出现屏蔽了一些原生小程序写起来很丑陋的地方, 但是不管用什么框架,原生小程序的文档还是需要掌握的 ,有一大堆的坑等着要踩,有时候不得不从编译出的文件里面找原因。
小程序mpvue图片绘制水印_开发笔记:使用 mpvue 开发斗图小程序相关推荐
- 小程序mpvue图片绘制水印_基于mpvue小程序使用echarts画折线图的方法示例
第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. 关 ...
- 小程序mpvue图片绘制水印_基于mpvue小程序使用echarts画折线图
第一次使用mpvue框架来写小程序,项目开发直接搬用 mpvue-shop (一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. ...
- 小程序mpvue图片绘制水印_mpvue开发小程序如何使用腾讯官方小程序插件--地图
附带demo,码云地址 官方地图插件是有问题的,建议直接使用微信内置地图查看位置 //直接click调用 openMap() { let mapInfo = { startLat: 121.6695, ...
- 小程序二进制图片 buffer存储_可能没有想象的那么美好——微信小程序存储占用与清理实测...
本文作者:祖传牛皮癣 自从2017年微信小程序上线以来,从当初红极一时的"跳一跳"到现在各种小程序囊括生活中的方方面面,观看新闻.收听广播和音乐.网购和办公等等都可以通过微信小程序 ...
- 微信小程序封装图片合成水印
微信小程序封装图片合成水印 js /components/Watermark/index.js // components/Watermark/index.js Component({/*** 组件的 ...
- 【精选】表情包斗图小程序(可引流,开通流量主,权益外卖cps,带pc后台管理)
牛云表情包斗图小程序,流量主变现,外卖cps权益变现,uniCloud云开发无需购买服务器和域名,助力每一位内容创业者. 技术优势 基于 uniapp + uniCloud 研发,无需购买服务器和域名 ...
- 新版带支付功能2021全新最火表情包小程序源码,无限裂变,斗图小程序,头像壁纸,外卖服务内附详细搭建教程
内附详细搭建教程 1.全新表情包小程序已上线 2.增加外卖系统服务,进行进一步的扩展内容分销 3.独立后台系统,自己运营管理,广告位自己控制 4.流量主可以代开,小程序包通过审核,不通过不收钱 5.不 ...
- NRF51822开发笔记-2.Keil-MDK编译的第一个程序
NRF51822开发笔记-2.Keil-MDK编译的第一个程序 1.进入安装路径,找到第一个实验Blinky_example,双击打开 2.编译 3.编译成功,无错误 4.生成了Hex文件 编译成功了
- [安卓开发笔记一]Android开发配置opencv环境超详细教程
[安卓开发笔记一]Android开发配置opencv环境超详细教程 [更新于 2022年4月] 再次提醒,建议现在看到这篇文章的,仅仅把此文做一个流程参考,4年前android studio就使用cm ...
最新文章
- KMP算法求回溯数组的步骤
- 水文特点是什么意思_一级建造师是什么意思?一级建造师报考指南
- mysql从入门到转行图片_数据小白转行之路-MYSQL(二)
- centos7 防火墙_Linux系统安全Centos 7的Firewalld防火墙基础
- 使用Nginx反向代理部署laravel和history模式的Vue项目[更新]
- 终于搞定T43上的Access Connection了!
- 计算机基础- -操作系统环境
- CheckBox控件
- node.js基础:数据存储
- 高级JAVA - 利用函数式接口实现通用的取并集/交集/差集进阶版
- python计算相关性显著性p值_基于python实现计算两组数据P值
- python中什么是按位取反_js中怎么理解按位取反?
- 微信 iOS 版正式支持深色模式;谷歌宣布彻底取消I/O开发者大会;Visual Studio 2019 16.5发布|极客头条...
- 计算机基本知识(8000)---boot系统引导文件
- NEU 1683: H-Index
- 关于SO、SOP、SOIC封装(宽体、中体、窄体)的详解
- java模拟刷百度排名无效_刷百度排名软件教程-软件设置问题
- 【2022 年第十二届 MathorCup杯数学建模】D 题 移动通信网络站址规划和区域聚类问题 赛后总结、论文及代码
- flyingsaucer转换多个html,使用 itext、flying-saucer 实现html转PDF
- 学术解读:nmn是不是保健品,nmn最新研究成果