最近接到這樣一個需求,需要在小程序里將十幾位隨機字符串轉(zhuǎn)換為二維碼的形式展示。公眾號中(另一終端)調(diào)用JSSDK掃一掃功能,去掃描小程序生成的二維碼。得到字符串,然后進行接下來的邏輯處理。
創(chuàng)新互聯(lián),專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、響應(yīng)式網(wǎng)站、展示型成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)等服務(wù),幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。
下面記錄的是小程序中生成二維碼圖片這一操作,用的是原文作者改版后的生成二維碼工具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 沒有細看源碼,命名上看應(yīng)該是準確度;
如果需要再次生成二維碼,調(diào)用 qrcode.makeCode('text you want convert')
總結(jié)
以上所述是小編給大家介紹的微信小程序?qū)⒆址啥S碼圖片的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
本文題目:微信小程序?qū)⒆址啥S碼圖片的操作方法
URL網(wǎng)址:http://m.rwnh.cn/article22/jejpjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、Google、全網(wǎng)營銷推廣、品牌網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)