微信小程序動(dòng)態(tài)生成二維碼的實(shí)現(xiàn)代碼

<!-- 存放二維碼的圖片-->
<view class='container'>
 <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image>
</view>
<!-- 畫布，用來畫二維碼，只用來站位，不用來顯示-->
<view class="canvas-box">
 <canvas hidden="{{canvasHidden}}" style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas" />
</view>

.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;
}

var QR = require("../../../lib/qrcode.js");
Page({
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 canvasHidden: false,
 imagePath: '',
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function(options) {
 //option為上個(gè)頁面?zhèn)鬟f過來的參數(shù)
 var jiaoyanCode = 'sorry,jiaoyanCode is loss';
 if (options) {
 jiaoyanCode = options.jiaoyanCode;
 }
 console.log(jiaoyanCode);
 var size = this.setCanvasSize(); //動(dòng)態(tài)設(shè)置畫布大小 
 this.createQrCode(jiaoyanCode, "mycanvas", size.w, size.h); 
 },
 //適配不同屏幕大小的canvas
 setCanvasSize: function() {
 var size = {};
 try {
 var res = wx.getSystemInfoSync();
 var scale = 750 / 686; //不同屏幕下canvas的適配比例；設(shè)計(jì)稿是750寬 686是因?yàn)闃邮絯xss文件中設(shè)置的大小
 var width = res.windowWidth / scale;
 var height = width; //canvas畫布為正方形
 size.w = width;
 size.h = height;
 } catch (e) {
 // Do something when catch error
 console.log("獲取設(shè)備信息失敗" + e);
 }
 return size;
 },
 /**
 * 繪制二維碼圖片
 */
 createQrCode: function(url, canvasId, cavW, cavH) {
 //調(diào)用插件中的draw方法，繪制二維碼圖片
 QR.api.draw(url, canvasId, cavW, cavH);
 setTimeout(() => {
 this.canvasToTempImage();
 }, 1000);
 },
 /**
 * 獲取臨時(shí)緩存照片路徑，存入data中
 */
 canvasToTempImage: function() {
 var that = this;
 //把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片，并返回文件路徑。
 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);
 }
 });
 },
 /**
 * 點(diǎn)擊圖片進(jìn)行預(yù)覽
 */
 previewImg: function (e) {
 var img = this.data.imagePath;
 console.log(img);
 wx.previewImage({
 current: img, // 當(dāng)前顯示圖片的http鏈接
 urls: [img] // 需要預(yù)覽的圖片http鏈接列表
 });
 },
})