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

實現的效果

使用（非自適應）

完整代碼請參考網址裏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頁面

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