資訊專欄INFORMATION COLUMN
摘要：前言在近期的小程序開發(fā)中，有一個(gè)離線生成二維碼的需求。所以，針對(duì)微信小程序的特點(diǎn)，封裝了，用于在小程序中快速生成二維碼。由于小程序沒有動(dòng)態(tài)創(chuàng)建標(biāo)簽的，所以這一步不能省略。調(diào)用繪制方法由于微信小程序不支持引入包，可以將目錄下，拷貝至項(xiàng)目中。
前言
在近期的小程序開發(fā)中，有一個(gè)離線生成二維碼的需求。當(dāng)時(shí)想到了一些優(yōu)秀的前端開源庫(kù) jquery-qrcode 和 node-qrcode，由于小程序中沒有DOM的概念，這些庫(kù)在小程序中并不適用。
所以，針對(duì)微信小程序的特點(diǎn)，封裝了 weapp.qrcode.js ，用于在小程序中快速生成二維碼。效果如下圖：
下面來介紹一下使用方法：
使用 創(chuàng)建canvas標(biāo)簽先在 wxml 文件中，創(chuàng)建繪制的 canvas，并定義好 width, height, canvasId 。由于小程序沒有動(dòng)態(tài)創(chuàng)建標(biāo)簽的api，所以這一步不能省略。
調(diào)用繪制方法由于微信小程序不支持引入NPM包，可以將dist目錄下，weapp.qrcode.min.js 拷貝至項(xiàng)目中。
如果你的小程序使用了支持引入NPM包的框架，如 wepy , 也可以直接安裝 weapp-qrcode NPM包。
npm install weapp-qrcode --save
引入 js 文件后，調(diào)用 drawQrcode() 繪制二維碼。
import drawQrcode from "weapp-qrcode"
// 或者，將 dist 目錄下，weapp.qrcode.min.js 復(fù)制到項(xiàng)目目錄中
// import drawQrcode from "../../utils/weapp.qrcode.min.js"
drawQrcode({
width: 200,
height: 200,
canvasId: "myQrcode",
text: "https://github.com/yingye"
}
API說明
| 參數(shù) | 說明 | 示例 |
|---|---|---|
| width | 必須，二維碼寬度，與canvas的width保持一致 | 200 |
| height | 必須，二維碼高度，與canvas的height保持一致 | 200 |
| canvasId | 必須，繪制的canvasId | "myQrcode" |
| text | 必須，二維碼內(nèi)容 | "https://github.com/yingye" |
| typeNumber | 非必須，二維碼的計(jì)算模式，默認(rèn)值-1 | 8 |
| correctLevel | 非必須，二維碼糾錯(cuò)級(jí)別，默認(rèn)值為高級(jí)，取值：{ L: 1, M: 0, Q: 3, H: 2 } | 1 |
| background | 非必須，二維碼背景顏色，默認(rèn)值白色 | "#ffffff" |
| foreground | 非必須，二維碼前景色，默認(rèn)值黑色 | "#000000" |
如果想更深入的了解二維碼的原理，推薦大家閱讀 二維碼的生成細(xì)節(jié)和原理 。
原始文檔https://github.com/yingye/wea... ，如果覺得還不錯(cuò)，記得給個(gè)star奧～
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107181.html
摘要：微信小程序生成二維碼工具生成二維碼數(shù)據(jù)的主要代碼來自，因?yàn)樗@個(gè)里面生成二維碼圖片的功能在微信小程序里不能使用，我將這個(gè)功能改寫成可以在微信小程序中使用。 weapp-qrcode 微信小程序生成二維碼工具 生成二維碼數(shù)據(jù)的主要代碼來自davidshimjs/qrcodejs，因?yàn)樗@個(gè)里面生成二維碼圖片的功能在微信小程序里不能使用，我將這個(gè)功能改寫成可以在微信小程序中使用。 截圖 s...
摘要：四最后一點(diǎn)點(diǎn)感悟本文總結(jié)的比較淺顯很多地方說的也不是太詳細(xì)歡迎大家留言一起交流探討堅(jiān)持學(xué)習(xí)不斷探索總結(jié)路漫漫其修遠(yuǎn)兮吾將上下而求索參考資料官方文檔微信小程序官網(wǎng)開發(fā)文檔官方開發(fā)文檔 一、微信小程序wepy框架簡(jiǎn)介: 微信小程序WePY框架是騰訊官方推出來的框架,類似的框架還有美團(tuán)的mpvue,京東的Taro等; 目前公司開發(fā)小程序主要用到的是微信原生方法和官方的wepy框架; wepy...
摘要：安裝完畢后啟動(dòng)微信開發(fā)者工具，會(huì)要求我們指定一個(gè)本地項(xiàng)目目錄和填寫微信小程序的。 我最近也剛剛開始微信小程序的開發(fā)，想把我自學(xué)的一些心得寫出來分享給大家。 showImg(https://segmentfault.com/img/remote/1460000016772885); 這是第一篇，從零開始學(xué)習(xí)微信小程序開發(fā)。主要是小程序的注冊(cè)和開發(fā)環(huán)境的搭建。 首先我們要在下列網(wǎng)址申請(qǐng)一個(gè)...
摘要：我最近也剛剛開始微信小程序的開發(fā)，想把我自學(xué)的一些心得寫出來分享給大家。這是第一篇，從零開始學(xué)習(xí)微信小程序開發(fā)。安裝完畢后啟動(dòng)微信開發(fā)者工具，會(huì)要求我們指定一個(gè)本地項(xiàng)目目錄和填寫微信小程序的。 我最近也剛剛開始微信小程序的開發(fā)，想把我自學(xué)的一些心得寫出來分享給大家。 showImg(https://segmentfault.com/img/remote/1460000016772885...
閱讀 782·2021-09-26 09:55
閱讀 2071·2021-09-22 15:44
閱讀 1480·2019-08-30 15:54
閱讀 1336·2019-08-30 15:54
閱讀 2681·2019-08-29 16:57
閱讀 526·2019-08-29 16:26
閱讀 2496·2019-08-29 15:38
閱讀 2132·2019-08-26 11:48
