微信小程序?qū)⒆址啥S碼圖片的操作方法
最近接到這樣一個(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é)
以上所述是小編給大家介紹的微信小程序?qū)⒆址啥S碼圖片的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
js實(shí)現(xiàn)轉(zhuǎn)動(dòng)骰子模型
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)轉(zhuǎn)動(dòng)骰子模型，自動(dòng)隨機(jī)生成骰子數(shù)的模型，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了ES6解構(gòu)賦值的功能與用途,結(jié)合實(shí)例形式分析了ES6結(jié)構(gòu)賦值針對(duì)函數(shù)參數(shù)、賦值、json等相關(guān)操作使用技巧,需要的朋友可以參考下2017-10-10
JS解決IOS中拍照?qǐng)D片預(yù)覽旋轉(zhuǎn)90度BUG的問(wèn)題
下面小編就為大家?guī)?lái)一篇JS解決IOS中拍照?qǐng)D片預(yù)覽旋轉(zhuǎn)90度BUG的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JavaScript基于querySelector?/?querySelectorAll對(duì)元素的操作(DOM?AP
這篇文章主要介紹了JavaScript基于querySelector?/?querySelectorAll對(duì)元素的操作(DOM?API掃盲),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
基于javascript顯示當(dāng)前時(shí)間以及倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了基于javascript顯示當(dāng)前時(shí)間以及倒計(jì)時(shí)功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
javascript實(shí)現(xiàn)簡(jiǎn)單的進(jìn)度條
本文給大家分享2個(gè)javascript實(shí)現(xiàn)簡(jiǎn)單的進(jìn)度條，一個(gè)是個(gè)人制作一個(gè)是網(wǎng)友實(shí)現(xiàn)的，都很不錯(cuò)，這里推薦給大家。2015-07-07
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
我見(jiàn)過(guò)最全的個(gè)人js加解密功能頁(yè)面
利用js進(jìn)行加解密是我們經(jīng)常會(huì)遇到的一個(gè)功能，本文給大家介紹的是我目前見(jiàn)到的最全的個(gè)人js加解密功能頁(yè)面，分享出來(lái)供大家參考學(xué)習(xí)，需要的朋友們隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2007-12-12
這篇文章主要介紹了谷歌地圖打不開(kāi)的解決辦法,本文給出了一個(gè)可以正常使用的谷歌地圖調(diào)用案例,需要的朋友可以參考下2014-08-08
本篇文章主要是對(duì)JS正則表達(dá)式驗(yàn)證數(shù)字的代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01