微信小程序中生成二維碼工具：weapp.qrcode.js

MarvinZhang 發布于2019-08-26 11:35 / 3359人閱讀

摘要：前言在近期的小程序開發中，有一個離線生成二維碼的需求。所以，針對微信小程序的特點，封裝了，用于在小程序中快速生成二維碼。由于小程序沒有動態創建標簽的，所以這一步不能省略。調用繪制方法由于微信小程序不支持引入包，可以將目錄下，拷貝至項目中。

前言

在近期的小程序開發中，有一個離線生成二維碼的需求。當時想到了一些優秀的前端開源庫 jquery-qrcode 和 node-qrcode，由于小程序中沒有DOM的概念，這些庫在小程序中并不適用。

所以，針對微信小程序的特點，封裝了 weapp.qrcode.js ，用于在小程序中快速生成二維碼。效果如下圖：

下面來介紹一下使用方法：

使用 創建canvas標簽

先在 wxml 文件中，創建繪制的 canvas，并定義好 width, height, canvasId 。由于小程序沒有動態創建標簽的api，所以這一步不能省略。

調用繪制方法

由于微信小程序不支持引入NPM包，可以將dist目錄下，weapp.qrcode.min.js 拷貝至項目中。

如果你的小程序使用了支持引入NPM包的框架，如 wepy , 也可以直接安裝 weapp-qrcode NPM包。

npm install weapp-qrcode --save

引入 js 文件后，調用 drawQrcode() 繪制二維碼。

import drawQrcode from "weapp-qrcode"
// 或者，將 dist 目錄下，weapp.qrcode.min.js 復制到項目目錄中
// import drawQrcode from "../../utils/weapp.qrcode.min.js"

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

API說明

參數	說明	示例
width	必須，二維碼寬度，與canvas的width保持一致	200
height	必須，二維碼高度，與canvas的height保持一致	200
canvasId	必須，繪制的canvasId	"myQrcode"
text	必須，二維碼內容	"https://github.com/yingye"
typeNumber	非必須，二維碼的計算模式，默認值-1	8
correctLevel	非必須，二維碼糾錯級別，默認值為高級，取值：{ L: 1, M: 0, Q: 3, H: 2 }	1
background	非必須，二維碼背景顏色，默認值白色	"#ffffff"
foreground	非必須，二維碼前景色，默認值黑色	"#000000"

如果想更深入的了解二維碼的原理，推薦大家閱讀二維碼的生成細節和原理。

原始文檔

https://github.com/yingye/wea... ，如果覺得還不錯，記得給個star奧～

云服務器 GPU云服務器工具類微信小程序怎么制作微信小程序微信小程序支付微信小程序部署

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107181.html

微信小程序生成二維碼工具

摘要：微信小程序生成二維碼工具生成二維碼數據的主要代碼來自，因為它這個里面生成二維碼圖片的功能在微信小程序里不能使用，我將這個功能改寫成可以在微信小程序中使用。 weapp-qrcode 微信小程序生成二維碼工具生成二維碼數據的主要代碼來自davidshimjs/qrcodejs，因為它這個里面生成二維碼圖片的功能在微信小程序里不能使用，我將這個功能改寫成可以在微信小程序中使用。截圖 s...

Rocture 2019-08-21 18:35 評論0 收藏0
微信小程序wepy框架學習和使用心得

摘要：四最后一點點感悟本文總結的比較淺顯很多地方說的也不是太詳細歡迎大家留言一起交流探討堅持學習不斷探索總結路漫漫其修遠兮吾將上下而求索參考資料官方文檔微信小程序官網開發文檔官方開發文檔一、微信小程序wepy框架簡介: 微信小程序WePY框架是騰訊官方推出來的框架,類似的框架還有美團的mpvue,京東的Taro等; 目前公司開發小程序主要用到的是微信原生方法和官方的wepy框架; wepy...

Baaaan 2019-08-26 13:54 評論0 收藏0
微信小程序開發系列二：微信小程序的視圖設計

摘要：安裝完畢后啟動微信開發者工具，會要求我們指定一個本地項目目錄和填寫微信小程序的。我最近也剛剛開始微信小程序的開發，想把我自學的一些心得寫出來分享給大家。 showImg(https://segmentfault.com/img/remote/1460000016772885); 這是第一篇，從零開始學習微信小程序開發。主要是小程序的注冊和開發環境的搭建。首先我們要在下列網址申請一個...

Ryan_Li 2019-08-23 12:29 評論0 收藏0
微信小程序開發系列一：微信小程序的申請和開發環境的搭建

摘要：我最近也剛剛開始微信小程序的開發，想把我自學的一些心得寫出來分享給大家。這是第一篇，從零開始學習微信小程序開發。安裝完畢后啟動微信開發者工具，會要求我們指定一個本地項目目錄和填寫微信小程序的。我最近也剛剛開始微信小程序的開發，想把我自學的一些心得寫出來分享給大家。 showImg(https://segmentfault.com/img/remote/1460000016772885...

jeffrey_up 2019-08-23 12:29 評論0 收藏0