概述
- H5公众号拉起APP
注意事项
- 要在正式环境，也就是管理公众号配置的那个域名下才有效，要不然出不来
- 微信sdk要1.6.0版本以上
- 微信浏览器版本要7.0.12版本以上
- 微信开发工具（版本：1.05.210390），即使是正式环境，都是能出现<wx-open-launch-app>这个标签，但是不能正确渲染，所以调试起来非常麻烦，在手机端调试
main.js文件
- 在main.js 文件添加Vue.config.ignoredElements = ['wx-open-launch-app']这句代码，要不然vue会不识别<wx-open-launch-app>这个标签，会有个警告，可能会影响显示
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.ignoredElements = ['wx-open-launch-app']
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
config的配置
- 要配置openTagList: ['wx-open-launch-app']
- 没有配置不知道会出现什么问题，我乖乖按照微信要求配置了
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [], // 必填，需要使用的JS接口列表
openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
封装的组件
- 由于样式不好改，所以改成了弹框的形式
<template>
<div>
<van-dialog
:value="value"
@input="closeApp"
title="提示"
class="my-dialog"
:showConfirmButton="false"
>
<p>这是描述</p>
<!-- 权限不够,伪按钮标签 -->
<button class="fake-btn" v-if="!isPassWeixin" @click="handleNotSatisfied">
立即打开
</button>
<wx-open-launch-app
v-else
id="launch-btn"
@error="handleError"
@launch="handleLaunch"
:extinfo="extData"
appid="你公司的appid"
>
<script type="text/wxtag-template">
<style>
.wx-open-tag-download {
border: 1px solid #94252A;
background: #94252A;
font-weight: 600;
color: #fff;
outline: none;
font-size: 13px;
border-radius: 30px;
padding: 8px 14px;
}
</style>
<button class="wx-open-tag-download">立即打开</button>
</script>
</wx-open-launch-app>
</van-dialog>
</div>
</template>
<script>
export default {
props: {
value: Boolean, //拉起APP组件是否显示
extData: String //跳转App信息
},
data() {
return {
showDialog: this.value, //打开APP弹框
isPassWeixin: false, //微信版本是否达标
isPassIOS: false, //苹果系统是否达标
isPassAndroid: false //安卓系统是否达标
}
},
created() {
this.judgeWeixinVersion()
},
methods: {
closeApp() {
this.$emit('input')
},
//处理条件不满足
handleNotSatisfied() {
if (!this.isPassWeixin) {
this.$dialog.alert({
title: '提示',
message: '请升级微信'
})
}
},
init() {
this.judgeWeixinVersion()
},
//判断微信版本是否达到最低要求 7.0.12
judgeWeixinVersion() {
/* eslint-disable */
const wechatInfo = window.navigator.userAgent.match(
/MicroMessenger\/([\d\.]+)/i
)
/* eslint-disable */
if (!wechatInfo) return false
const versionStr = wechatInfo[1]
const result = this.versionStringCompare(versionStr, '7.0.12')
if (result >= 0) {
this.isPassWeixin = true
}
},
//判断安卓系统版本是否达到最低要求 5.0
judgeAndroidVersion() {
const androidInfo = window.navigator.userAgent.match(
/; Android ([\d\.]+);/i
)
const versionStr = androidInfo[1]
const result = this.versionStringCompare(versionStr, '5.0')
if (result >= 0) {
this.isPassAndroid = true
}
},
//判断苹果系统系统版本是否达到最低要求 10.3
judgeIOSVersion() {
// const iosInfo = window.navigator.userAgent.match(/cpu iphone os (\d+)\_(\d+) like/i)
const iosInfo = window.navigator.userAgent.match(
/CPU iPhone OS ([\d\_]+) like/i
)
const versionStr = iosInfo[1].split('_').join('.')
const result = this.versionStringCompare(versionStr, '10.3')
if (result >= 0) {
this.isPassIOS = true
}
},
/***
* @param {string} preVersion //版本1
* @param {string} lastVersion //版本2
* @return {number} 1:版本1>版本2 0:版本1==版本2 -1:版本1<版本2
*/
versionStringCompare(preVersion, lastVersion) {
let sources = preVersion.split('.')
let dests = lastVersion.split('.')
let maxL = Math.max(sources.length, dests.length)
let result = 0
for (let i = 0; i < maxL; i++) {
let preValue = sources.length > i ? sources[i] : 0
let preNum = isNaN(Number(preValue))
? preValue.charCodeAt()
: Number(preValue)
let lastValue = dests.length > i ? dests[i] : 0
let lastNum = isNaN(Number(lastValue))
? lastValue.charCodeAt()
: Number(lastValue)
if (preNum < lastNum) {
result = -1
break
} else if (preNum > lastNum) {
result = 1
break
}
}
return result
},
handleLaunch() {
this.closeApp()
},
handleError(e) {
console.log('error', e, e.detail)
this.download()
// dialog.alert({ message: "error:" + JSON.stringify(e.detail) });
},
download() {
if (this.utils.isIOS()) {
this.downloadIos()
} else {
this.downloadAndroid()
}
},
async downloadAndroid() {
//自己公司下载安卓的业务
},
async downloadIos() {
//自己公司下载苹果的业务
},
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/styles/global.less';
.fake-btn {
border: 1px solid #ff2442;
background: #fff;
font-size: 0.28rem;
font-weight: 600;
border-radius: 0.3rem;
padding: 0.12rem 0.18rem;
color: #ff2442;
outline: none;
}
.my-dialog {
/deep/.van-dialog__content {
text-align: center;
padding-bottom: 0.32rem;
p {
margin: 0;
padding: 0.16rem 0.48rem 0.48rem;
}
}
}
</style>
使用组件
<template>
<div>
<van-button @click="handleOpenApp">点击弹出微信标签弹框</van-button>
<open-app v-model="showApp" :extData="'type=2&id=123'" />
</div>
</template>
<script>
import openApp from '@/components/openApp/openApp'
export default {
components: {
openApp
},
data() {
return {
showApp: false
}
},
methods: {
handleOpenApp() {
this.showApp = true
}
}
}
</script>
<style></style>
图片
- 因为涉及公司隐私，所以有部分图片我不方便放出来
-
点击微信开放标签，会有个微信的弹框，询问你是否打开APP
18d3b4263a89174ab898b0e99098474.jpg
完成
- 目前功能是已经做出来了，拉起对应的苹果和安卓APP，如果没有APP的就跳应用市场帮用户下载
