VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动
荫云优惠活动

教你如何在微信小程序中使用画布+画师插件制作二维码。

主机参考: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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 教你如何在微信小程序中使用画布+画师插件制作二维码。
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!