526互联

vue使用vue-qr生成二维码

发布时间 2023-04-25 19:54:59作者: ℳℓ马温柔

vue-qr基础使用：

第一步，先安装 vue-qr 插件

npm install vue-qr --save
第二步，在想要生成vueQr 的Vue页面引入组件

import vueQr from 'vue-qr'
第三步，在components中引入VueQr组件

components: { VueQr }
如下：

<script>
import VueQr from 'vue-qr';

export default {
    components: {
    VueQr,
    },
}
</script>

 

data() {
  return {
          logo:require("@/assets/images/1.jpg"),//默认二维码中间图片，图片需要使用require
          textUrl: "https://baidu.com" //二维码内容,我这里是扫码后要跳转的链接

}

},
// <template>
 //  <vue-qr :text="config.text" :logoScale="40" :size="300" :logoSrc="config.logo">
 //  </vue-qr>
// </template>

我这里二维码不需要中间logo

<vue-qr :text="qrUrl" :margin="0"></vue-qr>

参数说明：
1、:text 用于绑定生成二维码内容
2、:logoScale 中间logo标志大小，单位px
3、:logoSrc 用于绑定二维码中间logo图片的地址

 

vue-qr组件中的属性如下图:

 

我这里的业务场景是：在PC端扫描二维码跳转下载app

实现逻辑：

1.安装使用vueqr生成二维码插件,生成二维码, 扫二维码跳转到h5中转页面（先开发一个h5页面做为中转页面）

2.在pc端获取配置项得到安卓手机 苹果手机的下载地址 携带到中转页面

3.在中转页面判断是安卓手机还是ios打开 使用window.location.href分别跳转到不同的下载

PC端：
<template>
 <div class="item-qrcode"">
    <vue-qr :text="qrUrl" :margin="0"></vue-qr>
     <div class="title">下载APP</div>
  </div>
</template> <script> import VueQr from "vue-qr";  export default { name: "header-comp", components: { VueQr }, }, data() { return {// 下载APP中转页面传递的参数  jumpLink: {
      //安卓下载链接
        androidUrl: "https://baidu.com",
      //ios下载链接
        iosUrl: "https://www.jianshu.com/"
      }
    };
  },
  created() {
 // 二维码Url
this.qrUrl = `${window.envConfig.custom.qrcodePage}pages/template/download-app/pages/page?formItem=${JSON.stringify(this.jumpLink)}`; }, methods: {  }; </script> <style lang="scss" scoped> .download-app { width: 100%; text-align: center; .title, .text { font-size: 15px; color: #333333; } .title { font-weight: bold; } .text { text-indent: 2em; text-align: left; margin: 8px 0 10px 0; } .qrcode { display: flex; justify-content: space-evenly; .item-qrcode { text-align: center; .title { width: 85px; flex-wrap: warp; font-size: 14px; color: #333333; margin: 5px 0; } img { display: inline-block; width: 85px; height: 85px; margin: 0 auto; } } } } </style>
<template>
  <!-- PC端下载APP-h5中转页面 -->
  <view class="topnet-container">
  </view>
</template>
<script>
  export default {
    data() {
      return {
        jumplink: {},
      };
    },
    created() {
      this.getjumplink();
    },
    methods: {
      getjumplink() {
        const user = navigator.userAgent;
        // android端
        const isAndroid = user.indexOf('Android') > -1 || user.indexOf('Adr') > -1;
        // ios端
        const isiOS = !!user.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        // 接收参数
        const parameters = window.location.hash;
        if (parameters.indexOf('?') == -1) return null;
        const strs = parameters.substring(1).split('&');
        for (let i = 0; i < strs.length; i++) {
          const str = strs[i].split('=');
          this.jumplink = JSON.parse(decodeURIComponent(str[1]));
        }
        // 去掉链接两边双引号
        this.jumplink.androidUrl = this.jumplink.androidUrl.replace(/\"/g, '');
        this.jumplink.iosUrl = this.jumplink.iosUrl.replace(/\"/g, '');
        // 判断跳转
        if (isAndroid) {
          window.location.href = this.jumplink.androidUrl + '?time=' + new Date().getTime();
        } else if (isiOS) {
          window.location.href = this.jumplink.iosUrl + '?time=' + new Date().getTime();
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .topnet-container-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>

 

 

require