微信小程序中生成二维码

先前上传了一个微信小程序中生成二维码的文件：wxapp.qrcode.js，现在补充此文件的使用方法

此文件的下载链接：https://download.csdn.net/download/qq_41981057/10817093

首先将wxapp.qrcode.js放入到项目中，然后在wxml文件中写好布局，代码如下

<view class='container-box'>
  <view class='img-box'>
    <canvas style="width: 686rpx; height: 686rpx;" canvas-id="mycanvars"></canvas>
  </view>
  <form bindsubmit='formsubmit'>
    <view class='input-row'>
      <label>网址</label>
      <input name="url" type='text' maxlength='255' placeholder='{{placeholder}}'></input>
    </view>
    <button form-type='submit' class='mybtn' type='primary'>生成二维码</button>
  </form>
</view>

然后在wxss文件中写好样式，代码如下

.img-box{
  width: 686rpx;
  height: 686rpx;
  background: #f1f1f1;
  margin: 0 auto;
}
.input-row{
  width: 686rpx;
  margin: 43rpx auto;
  border: 1px solid #e5e5e5;
  display: flex;
  height: 100rpx;
  line-height: 100rpx;
  padding-left: 10rpx;
  box-sizing: border-box;
}
.input-row input{
  height: 100%;
  margin-left: 20rpx;
}
.mybtn{
  width: 686rpx;
  margin: 60rpx auto;
}

最后在js文件中写好逻辑处理部分，代码如下

let drawQrcode = require('../../utils/wxapp.qrcode.min.js');//引入wxapp.qrcode.min.js文件
Page({

  /**
   * 页面的初始数据
   */
  data: {
    placeholder:'http://baidu.com'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //setCanvasSize  拿到画布区域的尺寸（微信小程序不支持dom的操作，所以单独定义方法去获取）
    let size = this.setCanvasSize();
    // console.log(size);
    let url = this.data.placeholder;
    //调用createQRcode方法
    this.createQRcode(size.w, size.h, 'mycanvars',url);
  },
  createQRcode(canvasWidth, canvasHeight,canvasId,url){
    // 调用qrcode.js里的方法，传入对应参数
    drawQrcode({
      width: canvasWidth,
      height: canvasHeight,
      canvasId: canvasId,
      text: url
    })
    console.log(drawQrcode.width)
  },
  setCanvasSize(){
    let size = {};
     // getSystemInfoSync  微信小程序提供getSystemInfoSync获取设备的信息
    let res = wx.getSystemInfoSync();
    // console.log(res);
    // 获取比例
    let scale = 686/750;
    let width = res.windowWidth*scale;
    let height = width;
    size.w = width;
    size.h = height;
    return size;
  },
  formsubmit(e){
    let url = e.detail.value.url || this.data.placeholder;
    // let url = e.detail.value.url ? e.detail.value.url : this.data.placeholder;
    wx.showToast({
      title: '生成中',
      icon: 'loading',
      duration: 2000
    })
    let that_ = this;

    let timer = setTimeout(() =>{
      let size = that_.setCanvasSize();
      //调用createQRcode方法
      that_.createQRcode(size.w, size.h, 'mycanvars', url);
      wx.hideToast();
      clearTimeout(timer);
    },2000)
})