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


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匿名函数
Nov 25 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
JS实现购物车特效
Feb 02 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
React学习笔记之事件处理(二)
Jul 02 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
详解如何在JS代码中消灭for循环
Dec 11 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
十天学会php(2)
2006/10/09 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
Python 线程池用法简单示例
2019/10/02 Python
Python 切分数组实例解析
2019/11/07 Python
员工自我鉴定
2013/10/09 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
个人授权委托书格式
2014/08/30 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
接收函格式
2015/01/30 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
早上好问候语大全
2015/11/10 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫