快捷導(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í)吧

好久沒有寫文章了，最近公司要做海報(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保存到本地或者將這張二維碼直接畫在海報(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)中的寬高需要一致，寬高的樣式一定要寫成內(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)的SHA-1加密算法完整實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的SHA-1加密算法,以完整實(shí)例形式分析了SHA-1加密算法的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-02-02
微信jssdk踩坑之簽名錯(cuò)誤invalid signature
這篇文章主要介紹了微信jssdk踩坑之簽名錯(cuò)誤invalid signature，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
小發(fā)現(xiàn)之淺談location.search與location.hash的問(wèn)題
下面小編就為大家?guī)?lái)一篇小發(fā)現(xiàn)之淺談location.search與location.hash的問(wèn)題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
JS數(shù)組降維的幾種方法詳解
這篇文章主要介紹了JS數(shù)組降維的幾種方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
js完美的div拖拽實(shí)例代碼
文章實(shí)現(xiàn)的div拖拽程序可以根據(jù)按鈕來(lái)控制是要種拖拽方式與位置，下面希望有需要的朋友可參考
2014-01-01
JSONP跨域的原理解析及其實(shí)現(xiàn)介紹
JSONP跨域GET請(qǐng)求是一個(gè)常用的解決方案，下面我們來(lái)看一下JSONP跨域是如何實(shí)現(xiàn)的，并且探討下JSONP跨域的原理
2014-03-03
深入了解最常用的JavaScript 事件
這篇文章主要為大家介紹了JavaScript 事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
javascript在網(wǎng)頁(yè)中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能
這篇文章主要介紹了在網(wǎng)頁(yè)中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網(wǎng)頁(yè)的一個(gè)輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件,需要的朋友可以參考下
2014-06-06
基于JavaScript實(shí)現(xiàn)數(shù)碼時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)數(shù)碼時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
這篇文章主要介紹了微信小程序 WXML節(jié)點(diǎn)信息查詢?cè)斀?文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07