微信小程序生成二維碼工具

實現的效果

使用（非自適應）

完整代碼請參考網址里https://github.com/tomfriwel/weapp-qrcode

頁面wxml中放置繪制二維碼的canvas:

<canvas class='canvas' canvas-id='canvas' bindlongtap='save'></canvas>

頁面js中引入:

var QRCode = require('../../utils/weapp-qrcode.js')

頁面加載好后:

//傳入wxml中二維碼canvas的canvas-id //單位為px var qrcode = new QRCode('canvas', { // usingIn: this, text: "https://github.com/tomfriwel/weapp-qrcode", width: 150, height: 150, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H, });

usingIn為可選參數，詳情清查卡在自定義組件使用時失效及解決思路 #1

text為需要轉化為二維碼的字符串；

width和height為繪制出的二維碼長寬，這里設置為跟canvas同樣的長寬；

colorDark和colorLight為二維碼交替的兩種顏色；

correctLevel沒有細看源碼，命名上看應該是准確度；

如果需要再次生成二維碼，調用qrcode.makeCode('text you want convert')。

wxss里需要設置同等的長寬，比如上面初始化時的長寬為150，那么：

.canvas {
    width: 150px;
    height: 150px;
}

-**********以上都是網址里的詳情說明*************-

我要實現的是，通過后台返回的識別碼生成二維碼綁定相關的企業

1.引入自動生成二維碼的js 看以下圖

2.wxml 頁面

3.js頁面

 從二維碼中識別出 識別碼進去綁定