效果图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/162375cddfa1a63e0a85d29ec6a97020.png)
这里需要weapp-qrcode.js,下载链接 点开链接,直接 ctrl + s 保存相对于位置即可
![](https://i-blog.csdnimg.cn/blog_migrate/51eb4d3e69b18051ba7052b3e96f9ace.png)
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:"(๑′ᴗ‵๑)I 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()
}
})