⼩程序动态⽣成⼆维码的实现代码效果图如下：
实现
wxml
<!-- 存放⼆维码的图⽚-->
<view class='container'>
<image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image>
</view>
<!-- 画布，⽤来画⼆维码，只⽤来站位，不⽤来显⽰-->
<view class="canvas-box">
<canvas hidden="{{canvasHidden}}" canvas-id="mycanvas" />
</view>
wxss
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.container image {
width: 686rpx;
height: 686rpx;
background-color: #f9f9f9;
}
.canvas-box {
position: fixed;
top: 999999rpx;
left: 0;
}
js
var QR = require("../../../lib/qrcode.js");
Page({
/**
* 页⾯的初始数据
*/
data: {
canvasHidden: false,
imagePath: '',
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function(options) {
//option为上个页⾯传递过来的参数
var jiaoyanCode = 'sorry,jiaoyanCode is loss';
if (options) {
jiaoyanCode = options.jiaoyanCode;
}
console.log(jiaoyanCode);
var size = this.setCanvasSize(); //动态设置画布⼤⼩
},
//适配不同屏幕⼤⼩的canvas
setCanvasSize: function() {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750 / 686; //不同屏幕下canvas的适配⽐例；设计稿是750宽 686是因为样式wxss⽂件中设置的⼤⼩
var width = res.windowWidth / scale;
var height = width; //canvas画布为正⽅形
size.w = width;
代码转换size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
},
/**
* 绘制⼆维码图⽚
*/
createQrCode: function(url, canvasId, cavW, cavH) {
//调⽤插件中的draw⽅法，绘制⼆维码图⽚
QR.api.draw(url, canvasId, cavW, cavH);
setTimeout(() => {
this.canvasToTempImage();
}, 1000);
},
/**
* 获取临时缓存照⽚路径，存⼊data中
*/
canvasToTempImage: function() {
var that = this;
//把当前画布指定区域的内容导出⽣成指定⼤⼩的图⽚，并返回⽂件路径。
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function(res) {
var tempFilePath = pFilePath;
console.log(tempFilePath);
that.setData({
imagePath: tempFilePath,
// canvasHidden:true
});
},
fail: function(res) {
console.log(res);
}
});
},
/
**
* 点击图⽚进⾏预览
*/
previewImg: function (e) {
var img = this.data.imagePath;
console.log(img);
wx.previewImage({
current: img, // 当前显⽰图⽚的http链接
urls: [img] // 需要预览的图⽚http链接列表
});
},
})
qrcode.js 可以去这⾥下载。
总结
以上所述是⼩编给⼤家介绍的⼩程序动态⽣成⼆维码的实现代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。