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

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

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

生活?yuàn)蕵罚?a href="http://m.itdecent.cn/p/e8a16eda0fd8" target="_blank">夏天到了，來喝點(diǎn)雪碧可樂吧?

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)
    // 接下來就可以直接調(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

下篇預(yù)報(bào)

生成分享海報(bào)

希望能給大家?guī)韼椭?/p>

以上就是今天分享的所有內(nèi)容了，謝謝觀看，喜歡可以點(diǎn)贊加關(guān)注哦??

相關(guān)推薦

微信小程序分享小程序碼的生成（帶參數(shù)）以及參數(shù)的獲取

微信小程序生成分享海報(bào)（附帶二維碼生成）

微信小程序生成清晰海報(bào)

簡單實(shí)現(xiàn)小程序自定義導(dǎo)航欄（基于mpvue）

微信小程序中的版本管理

生活?yuàn)蕵?/h3>

！驚，跑步竟然能跑出錢來（你的額外收入）

大家注意啦，產(chǎn)品經(jīng)理打人啦！(一)

完