h5: 打开手机上的某个app

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 linkdocument.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&' + paramsStrconst downloadMarketUrl = isAndroid ? 'https://www.xxx.com/xxx' : 'https://itunes.apple.com/us/app/xxx/xxx?l=zh&ls=1&mt=x'let iframeEle = nulllet 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 = schemaUrliframeEle.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://mp.weixin.qq.com/s?__biz=MzI2OTQ3NDU1MA==&mid=2247484368&idx=1&sn=b232115efd8107f622854370d218273b&chksm=eade8c49dda9055f6da7e0d14805e88f06649280f2649f92b13870ca3104b9361a10bc72a4da&mpshare=1&scene=1&srcid=0217QAbw6zMuzrvGY1It6In5&sharer_sharetime=1676610130340&sharer_shareid=f2f33c323565b5c8acdb7a31574d6c5b&version=4.1.0.6011&platform=win#rd

• 关于URL Schema：https://www.jianshu.com/p/5bf51eb5322a?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

• H5如何实现唤起APP（如唤起知乎）：https://blog.csdn.net/qq_41960279/article/details/124817190