微信小程序?qū)⒆址啥S碼圖片的操作方法
最近接到這樣一個需求，需要在小程序里將十幾位隨機(jī)字符串轉(zhuǎn)換為二維碼的形式展示。公眾號中（另一終端）調(diào)用JSSDK掃一掃功能，去掃描小程序生成的二維碼。得到字符串，然后進(jìn)行接下來的邏輯處理。
下面記錄的是小程序中生成二維碼圖片這一操作，用的是原文作者改版后的生成二維碼工具weapp-qrcode.js（demo的眾多文件中只需將util下的這個文件拷貝到自己項目中），可在原文地址里clone demo。
截圖（copy原文）
使用
1、頁面wxml中放置繪制二維碼的canvas
加入點(diǎn)擊改變二維碼圖片的按鈕
<canvas class='canvas' canvas-id='canvas'></canvas>
<button bindtap='tapHandler' data-code='123abc456efg000'>轉(zhuǎn)為二維碼</button> <!-- data-code為生成二維碼所依據(jù)的字符串，這里將其寫死了，實際應(yīng)改為{{變量名}} -->
<button bindtap='tapHandler' data-code='555444333222111'>轉(zhuǎn)為二維碼</button>
2、頁面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); //用元素對應(yīng)的code更新二維碼
}
});
參數(shù)說明
usingIn 為可選參數(shù)，詳情清查卡在自定義組件使用時失效及解決思路 #1
text 為需要轉(zhuǎn)化為二維碼的字符串；
width 和 height為繪制出的二維碼長寬，這里設(shè)置為跟canvas同樣的長寬；
colorDark 和 colorLight 為二維碼交替的兩種顏色；
correctLevel 沒有細(xì)看源碼，命名上看應(yīng)該是準(zhǔn)確度；
如果需要再次生成二維碼，調(diào)用 qrcode.makeCode('text you want convert')
總結(jié)
以上所述是小編給大家介紹的微信小程序?qū)⒆址啥S碼圖片的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)轉(zhuǎn)動骰子模型，自動隨機(jī)生成骰子數(shù)的模型，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了ES6解構(gòu)賦值的功能與用途,結(jié)合實例形式分析了ES6結(jié)構(gòu)賦值針對函數(shù)參數(shù)、賦值、json等相關(guān)操作使用技巧,需要的朋友可以參考下2017-10-10
JS解決IOS中拍照圖片預(yù)覽旋轉(zhuǎn)90度BUG的問題
下面小編就為大家?guī)硪黄狫S解決IOS中拍照圖片預(yù)覽旋轉(zhuǎn)90度BUG的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
JavaScript基于querySelector?/?querySelectorAll對元素的操作(DOM?AP
這篇文章主要介紹了JavaScript基于querySelector?/?querySelectorAll對元素的操作(DOM?API掃盲),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
基于javascript顯示當(dāng)前時間以及倒計時功能
這篇文章主要為大家詳細(xì)介紹了基于javascript顯示當(dāng)前時間以及倒計時功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
本文給大家分享2個javascript實現(xiàn)簡單的進(jìn)度條，一個是個人制作一個是網(wǎng)友實現(xiàn)的，都很不錯，這里推薦給大家。2015-07-07
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
利用js進(jìn)行加解密是我們經(jīng)常會遇到的一個功能，本文給大家介紹的是我目前見到的最全的個人js加解密功能頁面，分享出來供大家參考學(xué)習(xí)，需要的朋友們隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2007-12-12
這篇文章主要介紹了谷歌地圖打不開的解決辦法,本文給出了一個可以正常使用的谷歌地圖調(diào)用案例,需要的朋友可以參考下2014-08-08
本篇文章主要是對JS正則表達(dá)式驗證數(shù)字的代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01