效果图如下:
实现
wxml
<!-- 存放二维码的图片--> <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="/UploadFiles/2021-04-02/{{imagePath}}">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", size.w, size.h); }, //适配不同屏幕大小的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 可以去 这里 下载。
详细源码请查看 https://github.com/demi520/wxapp-qrcode
总结
以上所述是小编给大家介绍的微信小程序动态生成二维码的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]