小程序根据参数生成二维码
1、 引入js文件
js文件地址：https://github.com/xiaoid/qrcodejs
const QR = require("../../utils/qrcode.js");
2、调用方法
/**
* 页面的初始数据
*/
data: {
imagePath: '', /*二维码路径*/
},
onload:function(){
//动态设置画布大小
var size = app.setCanvasSize();
var goods_url = res.data.data.goods_url == undefined ? 'undefined' : res.data.data.goods_url;
that.createQrCode(goods_url, "mycanvas", size.w, size.h);
}
3、绘制二维码
/**
* 绘制二维码图片
* @params url 生成内容
* @params canvasId 画布层id
* @params cavW 宽
* @params cavH 高
*/
createQrCode: function (url, canvasId, cavW, cavH) {
//调用插件中的draw方法，绘制二维码图片
QR.api.draw(url, canvasId, cavW, cavH);
setTimeout(() => {
this.canvasToTempImage();
}, 1000);
},
4、 获取临时缓存照片路径，存入data中
/**
* 获取临时缓存照片路径，存入data中
*/
canvasToTempImage: function () {
var that = this;
//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
// console.log(tempFilePath);
that.setData({
imagePath: tempFilePath,
// canvasHidden:true
});
},
fail: function (res) {
console.log(res);
}
});
},
5、点击图片进行预览
/**
* 点击图片进行预览
*/
previewImg: function (e) {
var img = this.data.imagePath;
// console.log(img);
wx.previewImage({
current: img, // 当前显示图片的http链接
urls: [img] // 需要预览的图片http链接列表
});
},
6、适配不同屏幕大小的canvas
/**
* 适配不同屏幕大小的canvas
* @return 返回设备信息宽高
*/
setCanvasSize: function() {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750 / 686; //不同屏幕下canvas的适配比例 686是因为样式wxss文件中设置的大小
var width = res.windowWidth / scale;
var height = width; //canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
},
