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


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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
JavaScript多线程详解
Aug 12 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
js实现星星打分效果
Jul 05 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
PHP has encountered an Access Violation
2007/01/15 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP使用函数用法详解
2018/09/30 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
python3实现名片管理系统
2020/11/29 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
竟聘演讲稿范文
2013/12/31 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
创业大赛策划书
2014/03/01 职场文书
小学端午节活动方案
2014/03/13 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
PHP 时间处理类Carbon
2022/05/20 PHP