最近接到這樣一個(gè)需求，需要在小程序里將十幾位隨機(jī)字符串轉(zhuǎn)換為二維碼的形式展示。公眾號(hào)中（另一終端）調(diào)用JSSDK掃一掃功能，去掃描小程序生成的二維碼。得到字符串，然后進(jìn)行接下來(lái)的邏輯處理。

下面記錄的是小程序中生成二維碼圖片這一操作，用的是原文作者改版后的生成二維碼工具weapp-qrcode.js（demo的眾多文件中只需將util下的這個(gè)文件拷貝到自己項(xiàng)目中），可在原文地址里clone demo。

截圖（copy原文）

使用

1、頁(yè)面wxml中放置繪制二維碼的canvas

加入點(diǎn)擊改變二維碼圖片的按鈕

<canvas class='canvas' canvas-id='canvas'></canvas><button bindtap='tapHandler' data-code='123abc456efg000'>轉(zhuǎn)為二維碼</button>  <!-- data-code為生成二維碼所依據(jù)的字符串，這里將其寫(xiě)死了，實(shí)際應(yīng)改為{{變量名}} --><button bindtap='tapHandler' data-code='555444333222111'>轉(zhuǎn)為二維碼</button>

2、頁(yè)面js中引入

onload中初始化二維碼 

定義按鈕的事件處理函數(shù)

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); //用元素對(duì)應(yīng)的code更新二維碼  }});

參數(shù)說(shuō)明

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

text 為需要轉(zhuǎn)化為二維碼的字符串；

width 和 height為繪制出的二維碼長(zhǎng)寬，這里設(shè)置為跟canvas同樣的長(zhǎng)寬；

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

correctLevel 沒(méi)有細(xì)看源碼，命名上看應(yīng)該是準(zhǔn)確度；

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

總結(jié)

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