微信小程序?qū)⒆址啥S碼圖片的操作方法

發(fā)布時間：2020-09-21 11:06:59 來源：腳本之家閱讀：658 作者：一顆冉冉升起的新星欄目：web開發(fā)

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

向AI問一下細(xì)節(jié)

微信小程序?qū)⒆址啥S碼圖片的操作方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽