阿坝州网站建设公司

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

效果图如下：

创新互联专注于企业网络营销推广、网站重做改版、宝兴网站定制设计、自适应品牌网站建设、H5场景定制、商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为宝兴等各大城市提供网站开发制作服务。

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

实现

wxml

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

总结

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


分享名称：微信小程序动态生成二维码的实现代码
文章位置：http://azwzsj.com/article/pcdpgh.html

其他资讯