小程序制作网站1002小程序制作网站

小程序制作网站1002小程序制作网站:微信小程序动态生成二维码的实现代码

微信小程序动态生成二维码的实现代码  更新2018年07月25日   作者:She_lock   这篇文章主要介绍了微信小程序动态生成二维码的实现代码,需要的朋友可以参考下

效果图如下:

实现

wxml

 !-- 存放二维码的图片-- 
 view 
 image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}" /image 
 /view 
 !-- 画布,用来画二维码,只用来站位,不用来显示-- 
 view 
 canvas hidden="{{canvasHidden}}" canvas-id="mycanvas" / 
 /view 

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 可以去 这里 下载。

详细源码请查看

总结

以上所述是小编给大家介绍的微信小程序动态生成二维码的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!


相关文章

下面小编就为大家分享一篇简单谈谈CommonsChunkPlugin抽取公共模块,具有很的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

这篇文章主要介绍了jQuery 的 ready()的纯js替代方法的相关资料,需要的朋友可以参考下

这篇文章主要介绍了js实现鼠标悬停图片上时滚动文字说明的方法,涉及js操作鼠标事件的使用技巧,需要的朋友可以参考下

本篇文章通过代码实例给大家讲述了如何javascript填充默认头像以及相代码分享,对此有兴趣的朋友可以学习下。

这篇文章主要为大家详细介绍了小程序实现列表展开收起效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了Bootstrap CSS组件之按钮下拉菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本篇文章给详细讲解了9个JavaScript图表库以及用法,需要的朋友参考学习下。

这篇文章主要为大家详细介绍了JavaScript循环的相关资料,JavaScript的两种循环方式,一种是for循环,另while一种是循环具有一定的参考价值,感兴趣的小伙伴们可以参考一下

这篇文章主要介绍了js unicode 编码解析关于数据转换为中文的两种方法,需要的朋友可以参考下

这篇文章主要介绍了BootStrap中Table隐藏后显示问题的实现代码,需要的朋友可以参考下

相关阅读