微信小程序生成二維碼

 效果如下圖

 

 

 需要用到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()
  }
  
})