免费资源部落

本篇内容介绍了“在微信小程序中怎么使用canvas+Painter插件制作二维码”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、实现原理

使用微信小程序的canvas组件进行绘制，但是在该组件用起来并不是很顺手，所以使用了第三方的框架：Painter

用你的方法，把这个框架下载下来，里面会有示范代码，我们只需要把其中的核心代码拿出来就行。

二、实现代码

前期准备

1、新建components文件夹，放置painter核心代码

2、新建palette文件夹，放置绘制实现代码

painter.js代码

exportdefaultclassLastMayday{palette(viewList){return(viewList);}}

3、新建绘制的具体属性信息文件夹posterViewjs，放置例如绘制的大小、位置等信息js。

二维码绘制属性信息js代码

constgetPosterView01=(qrcodeText)=>{constposter01={"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"}}]}returnposter01}module.exports={getPosterView01:getPosterView01}

实现

实现页面目录结构

wxml代码

<viewclass="flex-jc-ac-col"style="margin-top:200rpx;"><imageclass="qrcode-img"src="{{imgUrl?imgUrl:''}}"mode="widthFix"></image><buttontype="primary"style="margin-top:105rpx;"bindtap="makeQRCodeTap">生成二维码</button></view><!--canvas隐藏--><paintercustomStyle='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.jsimportposterfrom'../../palette/painter'constposterView=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数据constviewList=posterView.getPosterView01(qrcodeText)this.setData({paintPallette:newposter().palette(viewList)})},/***用户点击右上角分享*/onShareAppMessage(){}})

“在微信小程序中怎么使用canvas+Painter插件制作二维码”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！