uniapp生成二维码海报并且跳转小程序

先看效果

请添加图片描述

  1. 小程序扫码跳转需要去微信公众平台配置微信二维码规则,具体请看官方描述 添加链接描述
  2. uniapp生成二维码插件很多,因为需求二维码不需要图标为了方便用的是wxqrcode, 带图标的参考tkiQrcode
  3. 项目中引入,两者都可
    . 在这里插入图片描述
    4.生成二维码链接,我这里的链接已经在微信公众平台配置过的

在这里插入图片描述

  1. 因为需求要生成二维码海报,简单的二维码满足不了需求,所以需要用到canvas

  2. html代码

    <canvas :style="{ width: 300 + 'px', height: 500 + 'px' }" canvas-id="myCanvas" id="myCanvas"></>
    
  3. 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()
    },
`
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐