微信小程序 生成二维码

Posted 2021-03-01 卜心累

 效果如下图

 

 

 需要用到weapp-qrcode.js，下载https://blog-static.cnblogs.com/files/-tiantian/weapp-qrcode.js，点开链接按 ctrl + s 保存到相应的位置

 

 index.wxml中的代码：

<view id="container">
  <view class="ewm">
    <canvas style="width: 600rpx; height: 600rpx;" canvas-id="myQrcode"></canvas>
  </view>
  <input class="inpt" bindinput="ewmText" value="{{ text }}"></input>
  <button bindtap="searchFn" class="btn" type="primary">生成二维码</button>
</view>

index.wxss中的代码：

.ewm{
  background-color: #e8e8e8;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 680rpx;
  height: 680rpx;
  margin: 50rpx auto;
}

.inpt{
  border: 1rpx solid #e8e8e8;
  width: 620rpx;
  margin: 30rpx auto;
  padding: 30rpx;
}

.btn{
  width: 680rpx;
}

index.js中的代码：

//index.js
const app = getApp()
let drawQrcode = require("../../utils/weapp-qrcode.js")
Page({
  data: {
    text:"(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤",
  },
  onLoad() {
    this.ewmChange()
  },

  ewmChange(){
    let size = {}
    size.w = wx.getSystemInfoSync().windowWidth / 750 * 600
    size.h = size.w
    var that = this

    drawQrcode({
      width: size.w,
      height: size.h,
      canvasId: \'myQrcode\',
      // ctx: wx.createCanvasContext(\'myQrcode\'),
      text: that.data.text,
      // v1.0.0+版本支持在二维码上绘制图片
    })
  },

  ewmText(e){
    this.setData({
      text: e.detail.value
    })
  },

  searchFn(){
    this.ewmChange()
  }
  
})