最近接到這樣一個需求，需要在小程式裡將十幾位隨機字串轉換為二維碼的形式展示。公眾號中（另一終端）呼叫JSSDK掃一掃功能，去掃描小程式生成的二維碼。得到字串，然後進行接下來的邏輯處理。

下面記錄的是小程式中生成二維碼圖片這一操作，用的是原文作者改版後的生成二維碼工具weapp-qrcode.js（demo的眾多檔案中只需將util下的這個檔案拷貝到自己專案中），可在原文地址裡clone demo。

截圖（copy原文）

使用

1、頁面wxml中放置繪製二維碼的canvas
加入點選改變二維碼圖片的按鈕

<canvas class='canvas' canvas-id
 
='canvas'></canvas>
<button bindtap='tapHandler' data-code='123abc456efg000'>轉為二維碼</button>   <!-- data-code為生成二維碼所依據的字串，這裡將其寫死了，實際應改為{{變數名}} -->
<button bindtap='tapHandler' data-code='555444333222111'>轉為二維碼</button>

2、頁面js中引入
onload中初始化二維碼
定義按鈕的事件處理函式

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

Page({
    onload: function(options){
        qrcode = new QRCode('canvas', {
            text: "code=0000000000000",
            width: 150,
            height: 150,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H,
        });
    },
    tapHandler: function
 
(e){
        qrcode.makeCode(e.target.dataset.code);  //用元素對應的code更新二維碼
    }
});

引數說明

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

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

width 和 height為繪製出的二維碼長寬，這裡設定為跟canvas同樣的長寬；

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

correctLevel 沒有細看原始碼，命名上看應該是準確度；

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