先前上传了一个微信小程序中生成二维码的文件：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)})