微信小程序生成二維碼的示例代碼

更新時間：2019年03月29日 10:01:01 作者：dillon_fly

這篇文章主要介紹了微信小程序生成二維碼的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

好久沒有寫文章了，最近公司要做海報分享的活動，需要在小程序中生成掃了之后可以跳轉(zhuǎn)普通網(wǎng)頁的二維碼，就在github上面找了一下，確實找到了一個兼容兼容性比較不錯的，給打加分享一下。

中間嘗試了不少，有些在Android上上城會出現(xiàn)問題，親測這個有效，兼容比較好，已經(jī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, // 生成二維碼四周自動留邊寬度，不傳入默認為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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript實現(xiàn)簡單計算器效果【推薦】
下面小編就為大家?guī)硪黄猨avascript實現(xiàn)簡單計算器效果【推薦】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考
2016-04-04
JS根據(jù)Unix時間戳顯示發(fā)布時間是多久前【項目實測】
小編最近在實現(xiàn)這樣的需求類似微信朋友圈顯示發(fā)布時間為距離當前時間多久之前這樣的功能，本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧
2019-07-07
js實現(xiàn)單擊可修改表格
這篇文章主要為大家詳細介紹了js實現(xiàn)單擊可修改表格，類似成績單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
JavaScript實現(xiàn)動態(tài)刪除列表框值的方法
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)刪除列表框值的方法,涉及javascript針對select列表框的遍歷與刪除操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
你應該了解的JavaScript Array.map()五種用途小結(jié)
大家都知道m(xù)ap() 方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。下面這篇文章主要給大家介紹了關(guān)于JavaScript Array.map()的五種用途，需要的朋友可以參考下
2018-11-11
js?window.addEventListener?簡介
window.addEventListener是JavaScript中用于添加事件監(jiān)聽器的方法,允許在發(fā)生特定事件時執(zhí)行函數(shù),本文給大家介紹js?window.addEventListener?是什么,感興趣的朋友一起看看吧
2024-09-09
這篇文章主要為大家詳細介紹了JS面向?qū)ο缶幊?，幫助大家更詳細的對JS面向?qū)ο筮M行學習，感興趣的朋友可以參考一下
2016-03-03