微信小程序如何绘制二维码
目录
在日常的小程序项目中,会经常遇到需要动态绘制二维码的需求。使用场景很多,例如绘制在海报上,例如制作票务码、核销码等等。
实现原理
使用微信小程序的 canvas 组件进行绘制,但是在该组件用起来并不是很顺手,所以使用了第三方的框架:
Painter:
用你的方法,把这个框架下载下来,里面会有示范代码,我们只需要把其中的核心代码拿出来就行。
对于框架的使用介绍,大家可以前往 github 浏览,我这就直接上手了。
实现代码
前期准备
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 代码:
<view class="flex-jc-ac-col" style="margin-top: 200rpx;"> <image class="qrcode-img" src="{{imgUrl?imgUrl:''}}" mode="widthFix"></image> <button type="primary" style="margin-top: 105rpx;" bindtap="makeQRCodeTap">生成二维码</button> </view> <!-- canvas 隐藏 --> <painter customStyle='position: absolute; left: -9999rpx;' customActionStyle="{{customActionStyle}}" dancePalette="{{template}}" palette="{{paintPallette}}" bind:imgOK="onImgOK" bind:touchEnd="touchEnd" action="{{action}}" use2D="{{true}}" widthPixels="720" /> <!-- canvas 隐藏 -->
wxss 代码:
.qrcode-img{ background-color: #999999; height: 300rpx; width: 300rpx; }
json 代码:
注意记得在使用的页面引用 painter 组件。
{ "usingComponents": { "painter":"/components/painter/painter" }, "navigationBarTitleText": "绘制二维码" }
JS 代码:
// pages/makeQRCode/makeQRCode.js import poster from '../../palette/painter' const 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() {} })
实现效果:
结语
实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。
以上均是本人开发过程中的一些经验总结与领悟,如果有什么不正确的地方,希望大佬们评论区斧正。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 微信小程序如何绘制二维码
码云笔记 » 微信小程序如何绘制二维码