项目中QRCode使用

FF_XM

已于 2022-08-15 09:07:23 修改

阅读量499

点赞数

分类专栏： QRCode 文章标签： javascript vue.js 前端

于 2022-05-19 10:54:33 首次发布

本文链接：https://blog.csdn.net/FF_XM/article/details/124858710

版权

前端开发二维码生成 groupOptionData access_token 前端路由

关键词由CSDN通过智能技术生成

QRCode 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

终端下载包 npm install --save qrcode
// 引入二维码包 二维码生成
import QRCode from 'qrcode'

// 创建二维码事件 QRCode
 CreateQrCode() {
      const checkedNames = []
      let groupOptionArray = []
      // checked选项转为数组
      for (let prop in this.groupOptionData) {
        groupOptionArray.push(this.groupOptionData[prop])
      }
      // console.log(groupOptionArray, 'groupOptionArray')
      groupOptionArray.forEach((item, index) => {
        if (item) {
          console.log(this.currentContain, 'this.currentContain.scopes[index]')
          if (this.currentContain.scopes.length > 1) {
            checkedNames.push(this.currentContain.scopes[index])
          }
        }
      })
      let checkedStr = checkedNames.toString()
      // console.log(checkedStr, 'checkedStr')
      let { id } = this.$route.query
      let token = getToken()
      let windowHref = window.location.origin
      console.log(windowHref, 'windowHref')
      // 给路径前加http://可以直接打开你的路径 扫描二维码跳转网页功能
      let QRqueryData = `${windowHref}/portal-app/preview?id=${id}&scopes=${checkedStr}&access_token=${token}`
      console.log(QRqueryData, 'QRqueryData')
      // mode为类型 data为你的qr二维码信息
      const segs = [
        {
          data: QRqueryData,
          mode: 'byte',
        },
        // { data: '0123456', mode: 'numeric' },
      ]
      let codeUrl = ''
      QRCode.toDataURL(segs, function (err, url) {
        codeUrl = url
        console.log(err, 'err')
      })
      const qrCodeDom = document.getElementById('qrcode')
      qrCodeDom.src = codeUrl
    },

log太多懒得删，o(╥﹏╥)o大家将就看