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

中間嘗試了不少，有些在Android上上城會出現問題，親測這個有效，兼容比較好，已經應用到我們項目中了。

由于在使用便利性方面考慮，我對這個進行了一定的改動，新增了二維碼白邊功能和支持回調函數直接獲取臨時文件的功能，希望能夠幫助到大家。

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)  // 接下來就可以直接調用微信小程序的api保存到本地或者將這張二維碼直接畫在海報上面去，看各自需求 }})

結構：

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

注意事項

• 而寬高，js代碼和結構中的寬高需要一致，寬高的樣式一定要寫成內聯樣式，不然會有意想不到的效果😁
• padding的顏色自己控制即可，canvas的背景色就是留邊的顏色
• correctLevel是生成二維碼可辨識度的級別，級別越高可辨識度越高，從低到高以此是M、L、H、Q

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。