匯入生成二維碼的js檔案

index.wxml

<!--index.wxml-->
<view class="box">
  <canvas canvas-id='qrcode' style='margin:auto;width:660rpx; height:660rpx; background:#AAA;'>
    
  </canvas>
  <view>
  
    <input bindinput="bindKeyInput" class='url-input' type='text' confirm-type="done" placeholder='內容：'></input>
    <button bindtap='createQRcode' type='primary' class='create-qrcode-btn'>生成二維碼</button>
  </view>
</view>
 

 index.wxss

/**index.wxss**/
.box {
  
}
.url-input {
  margin: 50rpx 0;
  border-bottom: solid 1px #ccc;
  padding: 20rpx;

  height: 50rpx;
  width: 100%;
}

.create-qrcode-btn {
  width: 660rpx;
}

index.js

let QRCode = require("../../utils/qrcode.js").default;

//index.js
//獲取應用例項
const app = getApp()

Page({
  data: {
    qrtext : ''
  },
  //輸入框內容改變時觸發
  bindKeyInput: function(e){
    this.setData({
      qrtext: e.detail.value
    })
  },
  //單擊生成二維碼觸發
  createQRcode: function(){
    this.QR.clear(); 
    this.QR.makeCode(this.data.qrtext); 
  },
  onLoad: function () {
    // console.log(QRCode);
    // 獲取手機資訊
    let  sysinfo = wx.getSystemInfoSync();
    console.log(sysinfo)
    let qrcode = new QRCode('qrcode', {
      text: '',
      //獲取手機螢幕的寬和長  進行比例換算
      width: sysinfo.windowWidth * 660 / 750,
      height: sysinfo.windowWidth * 660 / 750,
      //二維碼底色儘量為白色， 圖案為深色
      colorDark: '#000000',
      colorLight: '#ffffff',  
      correctLevel: QRCode.correctLevel.H
    });
    //將一個區域性變數共享
    this.QR = qrcode;

    
  }
})