wxqrcode.js 不依賴任何類庫苹威,可以生成二維碼圖片base64編碼(data:image/gif;base64,xxx…)
可以用于小程序頁內(nèi)生成二維碼袁稽。
小程序頁面wxml代碼:
1.創(chuàng)建canvas節(jié)點(diǎn),以及設(shè)置canvas-id琉朽。(可以控制該區(qū)域不顯示,但是必須要存在)
<canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas"/>
小程序頁面js代碼:
2.引入qrcode.js,將utils/qrcode.js 文件復(fù)制到自己工程里擅这,并引入齐板。
// 注意: 這里xxx是你自己的路徑
let QR = require("xxxx/qrcode.js") // require方式
import QR from 'xxxx/qrcode.js' // es6的方式
3.在js文件中,定義相關(guān)的方法惧笛,要注意在data中創(chuàng)建imagePath(最終生成的圖片路徑),可以將img的src屬性綁定imagePath
createQrCode: function (content, canvasId, cavW, cavH) {
//調(diào)用插件中的draw方法从媚,繪制二維碼圖片
//this.canvasToTempImage 為繪制完成的回調(diào)函數(shù),可根據(jù)自己的業(yè)務(wù)添加
QR.api.draw(content, canvasId, cavW, cavH, this, this.canvasToTempImage);
},
//獲取臨時緩存圖片路徑患整,存入data中
canvasToTempImage: function (canvasId) {
let that = this;
wx.canvasToTempFilePath({
canvasId, // 這里canvasId即之前創(chuàng)建的canvas-id
success: function (res) {
let tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
imagePath:tempFilePath,
});
},
fail: function (res) {
console.log(res);
}
});
},
4.綁定事件拜效,調(diào)用createQrCode,生成二維碼
onLoad: function (options) {
var that = this;
this.createQrCode('wxapp-qrcode', 'mycanvas', 300, 300)
},
1.基于canvas繪圖制作二維碼:https://github.com/demi520/wxapp-qrcode
2.基于img,base64輸出二維碼:https://git.oschina.net/cxing/wxqrcode.git
3.提供了不同語言的生成二維碼: https://github.com/kazuhikoarase/qrcode-generator
4.二維碼官網(wǎng): http://www.qrcode.com/zh/
5.phpqrcode官網(wǎng):http://phpqrcode.sourceforge.net/