最近接到這樣一個需求，需要在小程序里將十幾位隨機字符串轉換為二維碼的形式展示。公眾號中（另一終端）調用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')

總結

以上所述是小編給大家介紹的微信小程序將字符串生成二維碼圖片的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持！