微信小程序生成二维码

最新推荐文章于 2024-09-13 21:36:54 发布

跨时空思念ღ

最新推荐文章于 2024-09-13 21:36:54 发布

阅读量774

点赞数 1

原文链接：https://www.cnblogs.com/-tiantian/p/12698629.html

版权

微信小程序小程序

效果图如下：

这里需要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()
  }
  
})