效果如下图
需要用到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() } })
