uniapp生成二维码海报并且跳转小程序
先看效果
- 小程序扫码跳转需要去微信公众平台配置微信二维码规则,具体请看官方描述 添加链接描述
- uniapp生成二维码插件很多,因为需求二维码不需要图标为了方便用的是wxqrcode, 带图标的参考tkiQrcode
- 项目中引入,两者都可
.
4.生成二维码链接,我这里的链接已经在微信公众平台配置过的
-
因为需求要生成二维码海报,简单的二维码满足不了需求,所以需要用到canvas
-
html代码
<canvas :style="{ width: 300 + 'px', height: 500 + 'px' }" canvas-id="myCanvas" id="myCanvas"></>
-
js代码
openQrCode() {
const qrCodeImg = QR.createQrCodeImg('https://w.xyhsoft.com:8090/wxxcx/?id=' + uni.getStorageSync('storeDoctorInfo').doctorId, {
// 二维码大小
size: parseInt(300)
})
// 小程序canvas无法显示base64图像所以将二维码base64转为文件路径
base64ToPath(qrCodeImg).then(path => {
this.qrCodeImg = path
this.qrcodeShow = true
const system = uni.getSystemInfoSync()
setTimeout(async () => {
const ctx = uni.createCanvasContext('myCanvas', this)
ctx.setFillStyle('#fff') // 默认白色
ctx.fillRect(0, 0, system.screenWidth, (system.screenWidth * 1000) / 750)
// 绘制头部背景
ctx.fillStyle = '#07c4ca'
ctx.fillRect(0, 0, (system.screenWidth * 1000) / 750, 100)
// 绘制头像
// const avatar = this.doctorInfo.sex == '女' ? require('@/assets/images/nv.png') : require('@/assets/images/nan.png')
// ctx.drawImage(avatar, 50, 30, 50, 50)
// let avatar = await
const avatar = await base64ToPath(this.doctorInfo.sex == '女' ? require('@/assets/images/nv.png') : require('@/assets/images/nan.png'))
ctx.drawImage(avatar, 50, 30, 50, 50)
// 绘制医生信息
const userInfo = JSON.parse(uni.getStorageSync('loginData').tag)
ctx.fillStyle = '#fff'
ctx.font = 'normal bold 16px sans-serif'
ctx.fillText(userInfo.nickname, 120, 40)
ctx.font = '15px serif'
ctx.fillText(userInfo.titleName, 170, 40)
ctx.fillText(userInfo.deptName, 120, 60)
ctx.fillText('xxxxx医院', 120, 80)
// 绘制二维码边框
ctx.lineWidth = 5
ctx.strokeStyle = '#07c4ca'
this.drawRoundRect(ctx, 60, 160, 180, 180, 10)
// 绘制二维码
ctx.drawImage(this.qrCodeImg, 75, 175, 150, 150)
ctx.fillStyle = '#5a5a5a'
ctx.fillText('长按保存至相册', 98, 380)
// 绘制底部背景
ctx.fillStyle = '#ececec'
ctx.fillRect(0, 400, (system.screenWidth * 1000) / 750, 100)
ctx.font = '20px'
ctx.fillStyle = '#626262'
ctx.fillText('微信扫描二维码,关注我', 70, 440)
ctx.fillText('在家也能问诊', 105, 470)
ctx.draw(true, ret => {
uni.canvasToTempFilePath(
{
canvasId: 'myCanvas',
quality: 1,
complete: res => {
this.imgUrl = res.tempFilePath
}
},
this
)
})
}, 1000)
})
},
// 绘制二维码边框
drawRoundRect(ctx, x, y, w, h, r) {
ctx.beginPath()
ctx.moveTo(x + r, y)
ctx.arcTo(x + w, y, x + w, y + h, r)
ctx.arcTo(x + w, y + h, x, y + h, r)
ctx.arcTo(x, y + h, x, y, r)
ctx.arcTo(x, y, x + r, y, r)
ctx.stroke()
},
`