微信小程序生成二維碼的示例代碼
更新時間：2019年03月29日 10:01:01 作者：dillon_fly
這篇文章主要介紹了微信小程序生成二維碼的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
好久沒有寫文章了，最近公司要做海報分享的活動，需要在小程序中生成掃了之后可以跳轉(zhuǎn)普通網(wǎng)頁的二維碼，就在github上面找了一下，確實找到了一個兼容兼容性比較不錯的，給打加分享一下。
中間嘗試了不少，有些在Android上上城會出現(xiàn)問題，親測這個有效，兼容比較好，已經(jīng)應(yīng)用到我們項目中了。
由于在使用便利性方面考慮，我對這個進行了一定的改動，新增了二維碼白邊功能和支持回調(diào)函數(shù)直接獲取臨時文件的功能，希望能夠幫助到大家。
github地址
weapp-qrcode 點擊查看(歡迎star)，其中附有源工程地址
使用
在github上下載工程，主要用到的文件是/utils/weapp-qrcode.js文件
引入文件：
可以將文件直接放在自己工程下面引入使用
import QRCode from '/utils/weapp-qrcode.js'
使用：
new QRCode('myQrcode',{
text: 'http://www.tongxingschool.com',
width: 200,
height: 200,
padding: 12, // 生成二維碼四周自動留邊寬度，不傳入默認(rèn)為0
correctLevel: QRCode.CorrectLevel.L, // 二維碼可辨識度
callback: (res) => {
console.log(res.path)
// 接下來就可以直接調(diào)用微信小程序的api保存到本地或者將這張二維碼直接畫在海報上面去，看各自需求
}
})
結(jié)構(gòu)：
<canvas class="canvas-code"canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px;"/>
注意事項
- 而寬高，js代碼和結(jié)構(gòu)中的寬高需要一致，寬高的樣式一定要寫成內(nèi)聯(lián)樣式，不然會有意想不到的效果😁
- padding的顏色自己控制即可，canvas的背景色就是留邊的顏色
- correctLevel是生成二維碼可辨識度的級別，級別越高可辨識度越高，從低到高以此是M、L、H、Q
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)的SHA-1加密算法完整實例
這篇文章主要介紹了JavaScript實現(xiàn)的SHA-1加密算法,以完整實例形式分析了SHA-1加密算法的具體實現(xiàn)技巧,需要的朋友可以參考下2016-02-02
微信jssdk踩坑之簽名錯誤invalid signature
這篇文章主要介紹了微信jssdk踩坑之簽名錯誤invalid signature，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
小發(fā)現(xiàn)之淺談location.search與location.hash的問題
下面小編就為大家?guī)硪黄“l(fā)現(xiàn)之淺談location.search與location.hash的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了JS數(shù)組降維的幾種方法,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
文章實現(xiàn)的div拖拽程序可以根據(jù)按鈕來控制是要種拖拽方式與位置 ，下面希望有需要的朋友可參考2014-01-01
JSONP跨域GET請求是一個常用的解決方案，下面我們來看一下JSONP跨域是如何實現(xiàn)的，并且探討下JSONP跨域的原理2014-03-03
這篇文章主要為大家介紹了JavaScript 事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
javascript在網(wǎng)頁中實現(xiàn)讀取剪貼板粘貼截圖功能
這篇文章主要介紹了在網(wǎng)頁中實現(xiàn)讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網(wǎng)頁的一個輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件,需要的朋友可以參考下2014-06-06
基于JavaScript實現(xiàn)數(shù)碼時鐘效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)數(shù)碼時鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了微信小程序 WXML節(jié)點信息查詢詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07