效果图如下:
实现
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
总结
以上所述是小编给大家介绍的微信小程序动态生成二维码的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
微信小程序二维码
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无争山庄资源网 Copyright www.whwtcm.com
暂无“微信小程序动态生成二维码的实现代码”评论...
更新日志
2024年10月04日
2024年10月04日
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]