微(wēi)信小(xiǎo)程序中生(shēng)成二維碼工(gōng)具 ≠←：weapp.qrcode.js

發表時(shí)間(jiān)：2021-3-31

發布人(rén)：葵宇科(kē)技(jì)

浏覽次數(shù)：138

前言

在近(jìn)期的(de)小(xiǎo)程序開(kāi)發中，有(yǒu₹<)一(yī)個(gè)離(lí)線生(shēng)成二維碼的(de)需求。>♦©✔當時(shí)想到(dào)了(le)一(yī)些(xiē)優秀的₽"(de)前端開(kāi)源庫 jquery-qrcode 和(hé)&nbs ↔p;node-qrcode，由于小(xiǎo)程序中沒有(yǒu•Ω)DOM的(de)概念，這(zhè)些(xiē)庫在小(xiǎo)程序中并不(bù)★γ适用(yòng)。

所以，針對(duì)微(wēi)信小(xiǎo)程序的(de)特點，封裝了(★™γ©le) weapp.qrcode.js ，用(y✘β‌€òng)于在小(xiǎo)程序中快(kuài)速生(shēng)成二維碼。效果如(rúπ¶λ®)下(xià)圖：

下(xià)面來(lái)介紹一(yī)下(xià)≥≥使用(yòng)方法：

使用(yòng)

創建canvas标簽

先在 wxml 文(wén)件(jiàn)中，創建繪制(zhì)的(de)&nb←→$®sp;canvas，并定義好(hǎo) width, height, canvasId 。由于小(xiǎo)程序沒有(yǒu)動态"¥創建标簽的(de)api，所以這(zhè)一(yī)步不(bù)能(néng)省略。

<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>

調用(yòng)繪制(zhì)方法

由于微(wēi)信小(xiǎo)程序不(bù)支持引入NPM包，可(kě) ₩以将dist目錄下(xià)，weapp.qrcode.mi$∞n.js 拷貝至項目中。

如(rú)果你(nǐ)的(de)小(xiǎo)程序使'♠♠用(yòng)了(le)支持引入NPM包的(de)框架，如(rú)&nbs>•p;wepy , 也(yě)可(kě)以直接安裝 we₽★app-qrcode NPM包。

npm install weapp-qrcode --save

引入 js 文(wén)件(jiàn)後，調用(yòng) drawQrcode() 繪制(zhì)二維碼。

import drawQrcode from 'weapp-qrcode'
// 或者，将 dist 目錄下(xià)，weap♠δγ‍p.qrcode.min.js 複制(zhì)到(dào)γ✔₽→項目目錄中
// import drawQrcode from '&✔±../../utils/weapp.qrcode.min.js'§$

drawQrcode({
  width: 200,
  height: 200,
  canvasId: 'myQrcode',
  text: 'https://github.com/yingye'
}