微信小程序 二维码生成

导入生成二维码的js文件

文件原地址：https://github.com/vivialex/wx_program_QRCode

 

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;

    
  }
})