主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
本文向大家介绍了在微信小程序中使用canvas+Painter插件制作二维码的方法,希望对你有所帮助!
在日常的小程序项目中,我们经常会遇到动态绘制二维码的需求。有很多场景,比如在海报上画画,比如制作出票码、核销码等等。本文是应一位好朋友的需求而写,希望能给有需要的同学一些帮助。
一、实现原理使用微信小程序的canvas组件进行绘制,但是使用这个组件不是很方便,所以使用了一个第三方框架:Painter。
画家Github地址:https://github.com/Kujiale-Mobile/Painter
用你的方法,下载这个框架,里面会有演示代码。我们只需要取出核心代码。
关于框架使用的介绍,可以访问github,我直接上手。【相关学习推荐:小程序开发教程】
第二,代码编写的实现。
1.创建一个新的组件文件夹,并放置painter核心代码。
2.创建一个新的调色板文件夹并放置绘图实现代码。
painter.js代码
导出默认类LastMayday { palette(view list){ return(view list);}}3.为图纸的具体属性信息创建一个新文件夹posterViewjs,放置图纸尺寸、位置等信息js。
二维码绘图属性信息js码
const getposterview 01 =(qrcodeText)= gt。{ const poster01 = { 宽度 : 256像素 , 身高: 256像素 , 背景 : # f8f8f8 , 观点 :
Wxml代码
ltview class = flex -jc-ac-col ;style = margin -top:200 rpx;" gt ltimage class = QR code -img ;src = {{imgUrl?imgUrl: # 39;'} } mode = 宽度固定 gt lt/image gt; lt按钮类型= 主要 style = margin -top:105 rpx;"bindtap = makeQRCodeTap gt生成二维码; lt画家自定义风格= # 39;位置:绝对;左:-9999 rpx;'customActionStyle = { { customActionStyle } } dancePalette = { { template } } palette = { { paintPallette } } bind:imgOK = ;onImgOK bind:touch end = ;touchEnd action = { { action } } use2D = { { true } } 宽度像素= 720 / gt; lt!--画布隐藏-->;Wxss代码
. QR code -img { background -color:# 999999;身高:300rpx宽度:300rpx}json代码
请记住参考您正在使用的页面上的painter组件。
{ 使用组件 :{ 画家 : /components/painter/painter ;}, navigationBarTitleText : 画二维码" }JS码
//pages/make QR code/make QR code . js从 # 39;../../调色板/油漆工 # 39;const poster view = require( ;../../posterViewjs/posterView ;)page ({/* *该页面的初始数据*/data: {imgur: null,二维码正文:" 2d 44d 6 c 26134 f 8 a 109 df 65897107089 a2 d 44d 6 c 26134 f 8 a 109 df 65897107089 a ;,paint palette: # 39;'},/* * *生命周期函数--听页面加载*/onload () {},/* *生命周期函数--听页面显示*/ onShow () {},/* *生成海报点击收听*/makeqcodetap(){ wx . show loading({获取海报 # 39;,mask: true }) //绘制海报This . make poster(This . data . QR code text)},/* *绘制后的回调函数*/onim gok(RES){ wx . hide loading()//保存图片时该路径可以作为资源路径//console . log( ;poster "的临时路径,RES . detail . path)this . setdata({ imgur:RES . detail . path })},/* *生成poster */Makeposter(二维码文本){ wx . show loading({ title: # 39;生成海报 # 39;})//这是JSON数据const view list = posterview . getposterview 01(二维码文本)This . setdata({ paint pallette:new poster()。palette (viewlist)}},/* * *用户点击右上角的Share */ onShareAppMessage() {}}实现效果。
三。结论实际开发中的其他逻辑就不写了。学生需要自己思考异常情况的处理。
以上都是我在开发过程中的经验总结和感悟。如有不妥,望大佬们在评论中指正。
有关编程的更多信息,请访问:编程入门!!以上就是教大家在微信小程序中使用canvas+Painter插件制作二维码的细节。请多关注主机参考其他相关文章!
这几篇文章你可能也喜欢:
- 如何将小程序二维码转换为链接?(如何将微信小程序二维码生成链接)
- 如何用小程序生成二维码(二维码生成工具免费)
- 小程序如何生成二维码(小程序如何生成二维码图片)
- 教你如何在微信小程序中使用画布+画师插件制作二维码(微信小程序画布生成图片)。
- 如何使用小程序的画布绘制二维码?(如何利用小程序的画布绘制二维码图形)
本文由主机参考刊发,转载请注明:教你如何在微信小程序中使用画布+画师插件制作二维码。 https://zhujicankao.com/76318.html
评论前必须登录!
注册