效果图如下:
实现wxml
wxss
.container { display: flex;
align-items: center; justify-content: center; width: 100%; height: 100%;}
.container image { width: 686rpx; height: 686rpx;
background-color: #f9f9f9;}
.canvas-box { position: fixed; top: 999999rpx; left: 0;}
js
var QR = require(\"../../../lib/qrcode.js\");Page({ /**
* 页⾯的初始数据 */ data: {
canvasHidden: false, imagePath: '', }, /**
* ⽣命周期函数--监听页⾯加载 */
onLoad: function(options) {
//option为上个页⾯传递过来的参数
var jiaoyanCode = 'sorry,jiaoyanCode is loss'; if (options) {
jiaoyanCode = options.jiaoyanCode; }
console.log(jiaoyanCode);
var size = this.setCanvasSize(); //动态设置画布⼤⼩
this.createQrCode(jiaoyanCode, \"mycanvas\ },
//适配不同屏幕⼤⼩的canvas setCanvasSize: function() { var size = {}; try {
var res = wx.getSystemInfoSync();
var scale = 750 / 686; //不同屏幕下canvas的适配⽐例;设计稿是750宽 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; }, /**
* 绘制⼆维码图⽚ */
createQrCode: function(url, canvasId, cavW, cavH) { //调⽤插件中的draw⽅法,绘制⼆维码图⽚ QR.api.draw(url, canvasId, cavW, cavH); setTimeout(() => {
this.canvasToTempImage(); }, 1000); }, /**
* 获取临时缓存照⽚路径,存⼊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); } }); }, /**
* 点击图⽚进⾏预览 */
previewImg: function (e) {
var img = this.data.imagePath; console.log(img); wx.previewImage({
current: img, // 当前显⽰图⽚的http链接 urls: [img] // 需要预览的图⽚http链接列表 }); },})
qrcode.js 可以去 这⾥ 下载。总结
以上所述是⼩编给⼤家介绍的微信⼩程序动态⽣成⼆维码的实现代码,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持!
因篇幅问题不能全部显示,请点此查看更多更全内容
Copyright © 2019- howto234.com 版权所有 湘ICP备2022005869号-3
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务