快捷導(dǎo)航

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

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

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

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

中間嘗試了不少，有些在Android上上城會(huì)出現(xiàn)問(wèn)題，親測(cè)這個(gè)有效，兼容比較好，已經(jīng)應(yīng)用到我們項(xiàng)目中了。

由于在使用便利性方面考慮，我對(duì)這個(gè)進(jìn)行了一定的改動(dòng)，新增了二維碼白邊功能和支持回調(diào)函數(shù)直接獲取臨時(shí)文件的功能，希望能夠幫助到大家。

github地址

weapp-qrcode 點(diǎn)擊查看(歡迎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, // 生成二維碼四周自動(dòng)留邊寬度，不傳入默認(rèn)為0
 correctLevel: QRCode.CorrectLevel.L, // 二維碼可辨識(shí)度
 callback: (res) => {
  console.log(res.path)
  // 接下來(lái)就可以直接調(diào)用微信小程序的api保存到本地或者將這張二維碼直接畫(huà)在海報(bào)上面去，看各自需求
 }
})

結(jié)構(gòu)：

<canvas class="canvas-code"canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px;"/>

注意事項(xiàng)

而寬高，js代碼和結(jié)構(gòu)中的寬高需要一致，寬高的樣式一定要寫(xiě)成內(nèi)聯(lián)樣式，不然會(huì)有意想不到的效果😁
padding的顏色自己控制即可，canvas的背景色就是留邊的顏色
correctLevel是生成二維碼可辨識(shí)度的級(jí)別，級(jí)別越高可辨識(shí)度越高，從低到高以此是M、L、H、Q

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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