vue使用vue-qr生成二維碼
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 {
// 掃海南e登記二維碼要跳轉的鏈接
qrUrl: "",
// 下載APP中轉頁面傳遞的參數
jumpLink: {
androidUrl: "https://baidu.com",
iosUrl: "https://www.jianshu.com/"
},
};
},
created() {
this.qrUrl = `${window.envConfig.custom.qrcodePage}pages/template/download-app/pages/page?formItem=${JSON.stringify(this.jumpLink)}`;
},
};
</script>
<style lang="scss" scoped>
.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
你是什么樣的人，便會遇到什么樣的人；你想遇到什么樣的人，就得先讓自己成為那樣的人。
浙公網安備 33010602011771號