1、android端：直接通过URL Scheme方式打开。
2、ios端（2种）：（1）使用URL Scheme方式打开。（2）使用Universal link方式打开。
3、Universal link方式使用注意事项：（1）需让原生app开发人员配置universal link给到前端；（2）只有ios9版本以上（包含ios9）的设备才支持universal link; （3）需让运维人员配置univeral link指定的h5页面路径（访问404时（微信或企微打开，手机没有安装app），定向到h5的落地页）。
4、微信或企微微信中：都不支持URL Scheme和Universal link打开 APP，需使用微信引导页，提示在浏览器打开的方式。
5、schemaUrl：让原生app的android和ios开发人员配置，给到前端URL即可。
一、新建工具函数文件utils.js如下：
// android终端
export const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
// ios终端
export const isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
// 微信
export function isWeixin() {
return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
}
/**
* 获取IOS的版本号
*/
const getIosVersion = () => {
const ua = navigator.userAgent.toLowerCase();
const version = ua.match(/cpu iphone os (.*?) like mac os/);
const finalVersionStr = version && version[1].replace(/_/g,".")
return finalVersionStr
}
/**
* 判断IOS设备版本号，是否大于ios9
*/
const isGreatOrSameIos9 = () => {
const currentVersion = getIosVersion()
const versionList = currentVersion.split('.')
return Number(versionList[0]) >= 9
}
/**
* 打开IOS的商品详情的universal link
*/
const openIosGoodDetailUniversalLink = (paramsStr) => {
let ele = document.createElement('a')
ele.style.display = 'none'
ele.href = 'https://www.xxxx.com.cn/open/xxxx?action_type=1024&' + paramsStr // ios的universal link
document.body.appendChild(ele)
ele.click()
}
/**
* h5打开手机上的app
* @param { Object } that 页面实例
* @param { String } propName 控制微信浏览器（微信、企业微信）引导页显示的变量
* @param { String } paramsStr 打开APP内某个页面的业务传参
* @Note 1、ios的univeral link在微信或企业微信上，即使安装了app，也不会直接跳到 APP, 而是显示h5页面。
* @Note 2、ios的itunes下载链接：在微信和企业微信中都无法显示页面, 加载不了。
*/
export const handleH5InvokeApp = (that, propName = 'showWeiXinGuide', paramsStr) => {
// 微信 或 企微中: 需要在浏览器中打开
try {
if(isWeixin()) {
that[propName] = true
} else if (isAndroid || isIos) {
const schemaUrl = 'xxxx://action?action_type=1024&' + paramsStr
const downloadMarketUrl = isAndroid ? 'https://www.xxx.com/xxx' : 'https://itunes.apple.com/us/app/xxx/xxx?l=zh&ls=1&mt=x'
let iframeEle = null
let timer = setTimeout(function(){
document.hasFocus() && (window.location.href = downloadMarketUrl)
}, 3000)
if (isIos) {
// ios9以上（包含ios9）: 使用univeral link方式
if (isGreatOrSameIos9()) {
clearTimeout(timer)
openIosGoodDetailUniversalLink(paramsStr)
return
} else {
iframeEle = document.createElement('iframe')
iframeEle.src = schemaUrl
iframeEle.style.display = 'none'
document.body.appendChild(iframeEle)
}
// ios 中无法触发 visibilitychange 事件，所以需要 pagehide 来做兼容
window.addEventListener('pagehide', function(event) {
clearTimeout(timer)
})
} else {
window.location.href = schemaUrl
}
// 各种浏览器兼容
let hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
// 安卓: 可以直接使用 visibilitychange 来判断标签页展示、还是隐藏
document.addEventListener(visibilityChange, function() {
if(document.hidden) {
clearTimeout(timer)
}
}, false);
} else {
alert('只能在手机端浏览器打开') // 部分手机端浏览器可设置为Web打开
}
} catch (e) {
console.log('h5唤起app失败', e)
}
}二、微信或企微环境中的引导页组件open-in-browser-guide.vue（使用uniapp-h5语法）：
<template>
<view class="guide-container">
<u-mask :show="show" @click="handleClose">
<view class="main">
<view class="content">
<text>步骤一、点击右上角的三个点</text>
<text>步骤二、选择在浏览器中打开</text>
<u-image width="166rpx" height="257rpx" :src="src" class="image-wrap"></u-image>
</view>
</view>
</u-mask>
</view>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
}
},
data() {
return {
// 箭头图片（图片资源在博客最下方）
src: require('../../static/imgs/guide-arrow.png'),
};
},
methods: {
handleClose() {
this.$emit('update:show', false)
}
}
}
</script>
<style lang="scss" scoped>
.guide-container {
.main {
display: flex;
justify-content: center;
height: 100%;
.content {
display: flex;
flex-direction: column;
align-items:center;
justify-content: center;
width: 80%;
font-size: 32rpx;
line-height: 2;
margin: -80rpx auto 0;
color: #fff;
}
.image-wrap {
border-style: none;
position: absolute;
transform: rotateZ(246deg);
top: 20%;
right: 100rpx;
}
}
}
</style>
guide-arrow.png
参考链接：
H5如何实现唤起APP（如唤起知乎）：https://blog.csdn.net/qq_41960279/article/details/124817190