微信小程序动态生成二维码的实现代码


Posted in Javascript onJuly 25, 2018

效果图如下:

微信小程序动态生成二维码的实现代码

实现

wxml

<!-- 存放二维码的图片-->
<view class='container'>
  <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image>
</view>
<!-- 画布,用来画二维码,只用来站位,不用来显示-->
<view class="canvas-box">
  <canvas hidden="{{canvasHidden}}" style="width: 686rpx;height: 686rpx;background:#f1f1f1;" 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 可以去 这里 下载。

详细源码请查看 https://github.com/demi520/wxapp-qrcode

总结

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

Javascript 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
JS实现商品筛选功能
Aug 19 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
js实现随机点名器精简版
Jun 29 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 #Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 #Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 #Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 #Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 #Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 #Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 #Javascript
You might like
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
在Python中移动目录结构的方法
2016/01/31 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python虚拟环境项目实例
2017/11/20 Python
理解python中生成器用法
2017/12/20 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Python List cmp()知识点总结
2019/02/18 Python
Python GUI编程完整示例
2019/04/04 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
django 取消csrf限制的实例
2020/03/13 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
职工运动会感言
2014/02/07 职场文书
交通安全寄语大全
2014/04/08 职场文书
白莲教口号
2014/06/18 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
2014年化验员工作总结
2014/11/18 职场文书
教师个人成长总结
2015/02/11 职场文书
研究生个人学年总结
2015/02/14 职场文书