微信小程序|小程序开发
微信,小程序,二维码
微信小程序-小程序开发
本篇文章给大家介绍一下在微信小程序中使用canvas+Painter插件制作二维码的方法，希望对大家有所帮助！
cpa单页源码,ubuntu安vs,命令符怎么启动tomcat,爬虫抓去网页,php基础教程电子书,武夷山效果好的seo公司lzw
抓娃娃码支付源码,ubuntu分区全部删除,防止爬虫的网站,php7与php5.5,徐州谷歌seolzw
在日常的小程序项目中，会经常遇到需要动态绘制二维码的需求。使用场景很多，例如绘制在海报上，例如制作票务码、核销码等等。
这篇文章是应一位好友的需求而写的，也希望能够给有需要的同学一些帮助。
jdk1.8源码下载,vscode系统禁止运脚本,ubuntu安装sda,ij里配置tomcat,防止别人爬虫,php 网页输入,淘宝seo具体优化方法流程,全网视频网站vip源码免费领,仿模板viplzw
A、实现原理
使用微信小程序的canvas组件进行绘制，但是在该组件用起来并不是很顺手，所以使用了第三方的框架：Painter
Painter的Github地址：/Kujiale-Mobile/Painter
用你的方法，把这个框架下载下来，里面会有示范代码，我们只需要把其中的核心代码拿出来就行。
对于框架的使用介绍，大家可以前往github浏览，我这就直接上手了。【相关学习推荐：小程序开发教学】
B、实现代码
前期准备
1、新建components文件夹，放置painter核心代码
2、新建palette文件夹，放置绘制实现代码
painter.js代码
export default class LastMayday { palette(viewList) { return (viewList ); }}
3、新建绘制的具体属性信息文件夹posterViewjs，放置例如绘制的大小、位置等信息js。
二维码绘制属性信息js代码
const getPosterView01 = (qrcodeText) => { const poster01 = { "width": "256px", "height": "256px", "background": "#f8f8f8", "views": [{"type": "qrcode","content": qrcodeText,"css": { "color": "#000000", "background": "#ffffff", "width": "256px", "height": "256px", "top": "0px", "left": "0px", "rotate": "0", "borderRadius": "0px"} }] } return poster01}module.exports = { getPosterView01: getPosterView01}
实现
实现页面目录结构
wxml代码
wxss代码
.qrcode-img{ background-color: #999999; height: 300rpx; width: 300rpx;}
json代码
注意记得在使用的页面引用painter组件
{ "usingComponents": { "painter":"/components/painter/painter" }, "navigationBarTitleText": "绘制二维码"}
JS代码
// pages/makeQRCode/makeQRCode.jsimport poster from ../../palette/painterconst posterView = require("../../posterViewjs/posterView")Page({ /** * 页面的初始数据 */ data: { imgUrl: null, QRCodeText: "2d44d6c26134f8a109df65897107089a2d44d6c26134f8a109df65897107089a", paintPallette: \, }, /** * 生命周期函数--监听页面加载 */ onLoad() { }, /** * 生命周期函数--监听页面显示 */ onShow () { }, /** 生成海报点击监听 */ makeQRCodeTap() { wx.showLoading({title: 获取海报中,mask: true }) // 绘制海报 this.makePoster(this.data.QRCodeText) }, /** 绘制完成后的回调函数*/ onImgOK(res) { wx.hideLoading() // 这个路径就可以作为保存图片时的资源路径 // console.log("海报临时路径", res.detail.path) this.setData({imgUrl: res.detail.path }) }, /** 生成海报 */ makePoster(qrcodeText) { wx.showLoading({title: 生成海报中, }) // 这是绘制海报所用到JSON数据 const viewList = posterView.getPosterView01(qrcodeText) this.setData({paintPallette: new poster().palette(viewList) }) }, /** * 用户点击右上角分享 */ onShareAppMessage() {}})
实现效果
C、结语
实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。
以上均是本人开发过程中的一些经验总结与领悟，如果有什么不正确的地方，希望大佬们评论区斧正。
编程入门！！
如果觉得《手把手教你在微信小程序中使用canvas+Painter插件制作二维码》对你有帮助，请点赞、收藏，并留下你的观点哦！
