微信小程序动态生成二维码的实现代码

效果图如下：

实现wxml

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(); //动态设置画布⼤⼩

this.createQrCode(jiaoyanCode, \"mycanvas\ },

//适配不同屏幕⼤⼩的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 = res.tempFilePath; 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 可以去 这⾥ 下载。总结

以上所述是⼩编给⼤家介绍的微信⼩程序动态⽣成⼆维码的实现代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！