文章目录
文章参考问题描述weapp-qrcode 插件介绍
文章参考
https://github.com/demi520/wxapp-qrcodehttps://github.com/tomfriwel/weapp-qrcode
问题描述
为了减轻服务器的压力，后台给小程序前端传递一个字符串，然小程序端生成二维码，实现“分布式”计算的功能
weapp-qrcode 插件介绍
<view class="qrcode" >
<canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas"/>
</view>
import QR from '@/common/js/qrcode.js'
export default {
data() {
return {
isShowQrcode
: false
};
},
mounted
: function () {
this.createQrCode ('https://github.com/demi520/wxapp-qrcode', 'mycanvas', 300, 300)
},
methods
: {
createQrCode
: function (content
, canvasId
, cavW
, cavH
) {
QR.api
.draw(content
, canvasId
, cavW
, cavH
);
this.canvasToTempImage(canvasId
);
},
canvasToTempImage
: function (canvasId
) {
let that
= this;
wx
.canvasToTempFilePath({
canvasId
,
success
: function (res
) {
let tempFilePath
= res
.tempFilePath
;
console
.log(tempFilePath
);
},
fail
: function (res
) {
console
.log(res
);
}
});
},
toggleShowQrcode
: function () {
this.isShowQrcode
= !this.isShowQrcode
;
}
}
}
效果如图：
