栈外h5跳转app，否则跳商城下载

江湖yi山人

已于 2023-02-17 18:27:38 修改

阅读量1.1k

点赞数

文章标签： web app

于 2022-04-15 14:47:05 首次发布

本文链接：https://blog.csdn.net/qq_30997503/article/details/124191385

版权

本文介绍了如何在端外环境中通过统跳地址唤起已安装的应用，或者引导用户前往应用商城下载。涉及获取统跳地址、应用宝和iOS商店链接，以及异步处理确保流畅体验，同时避免内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

端外在打开h5时，一些情况下需要唤起app。若安装app，则唤起，否则跳转手机商城下载页。

1 获取端外统跳地址

需要找端内开发人员提供，格式大致如下：

/**
 * protocol为统跳协议（每一个app都有特定的protocol）
 * path为app内页面路径（可以为''）
 * params为跳转参数（如：id=123&from=web）
 */
const schemeUrl = `${protocol}://${path}?${params}`

2 获取应用商城地址

const defaultUrl = 'https://a.app.qq.com/o/simple.jsp?pkgname=xxx' // 应用宝地址，也可以是app官方下载地址，用作兜底（http协议的地址）
const iosAppStore = 'https://apps.apple.com/cn/app/idxxx' // ios商店地址

function getAndriShop() { // 获取安卓商城地址
  let hreff = '';
  if (ua.isVivo) {
    hreff = 'vivoMarket://details?id=xxx'
  } else if (ua.isoppo) {
    hreff = 'oppomarket://details?packagename=xxx'
  } else if (ua.isHuawei) {
    hreff = 'appmarket://details?id=xxx'
  } else if (ua.isXiaomi) {
    hreff = 'mimarket://details?id=xxx'
  } else if (ua.isMeizu) {
    hreff = 'mstore://details?id=xxx'
  } else {
    hreff = YYB
  }
function goAppShop() {
	if (ua.ios) {
		window.location.href = iosAppStore // ios商城
		return
	}
	if (ua.qqbrowser) { // 特殊浏览器处理（商店无法跳转）
     	window.location.href = YYB // 应用宝
    	return
  	}
  	window.location.href = getAndriAddr() // android商城
    setTimeout(function() { // 若商城打开失败，跳转应用宝兜底
      window.location.href = YYB // 应用宝
      setTimeout(() => {
        window.close()
      }, 500)
    }, 500)
}

3 具体实现

实现原理：
使用window.location跳转app协议地址，并在之后通过setInterval做异步处理。
如果成功唤起app，则会离开当前页，否则??s后清除计时器并打开商城。
最后通过监听visibilitychange（当前页是否可见），??s内若唤起app，即当前页被隐藏，document.hidden=true，此时清除计时器，防止内存泄漏（不再跳商城）。
代码如下：

const jumpOutOpenApp = () => {
    Toast.info('链接加载中，请稍候', 3)
    const openAppUrl = schemeUrl // 栈外统跳地址
    window.location = openAppUrl // 打开app（如果安装）
    /**
     * 若已经安装，上一步已经完成跳转，后面的代码执行与否不需在意
     * 若没有安装，上一步跳转失败，延迟执行后面的代码
     */
     const initialTime = new Date()
     let counter = 0
     let waitTime = 0
     const checkOpen = setInterval(() => {
     	counter++
      	waitTime = new Date() - initialTime
      	if (waitTime > 3500) {
        	clearInterval(checkOpen)
        	goAppShop()
      	}
      	if (counter < 1000) {
        	return null
      	}
     }, 20)

     document.addEventListener('visibilitychange', () => {
     	const isHidden = document.hidden
      	if (isHidden) {
        	clearInterval(checkOpen)
      	}
	 })
}

也可以利用一些过渡手段，将唤起app和打开商城分成两步，思路如下：
点击按钮，跳转一个新的页或者在本页面打开一个弹窗（称之为过渡页），过渡页中可以添加下载按钮供用户手动点击跳转商城下载，过渡页在渲染过程中唤醒app（默认操作，用户无感知），能唤醒就直接跳转app，否则停留在过渡页，这种情况等价于未唤醒app，等待用户手动点击跳转商城。

const ModalDown = () => {
	useEffect(() => {
		window.location = openAppUrl // 打开app（如果安装）
	}, [])

	return <div><
		xxx
		<div onClick={goAppShop}>下载app</div>
	/div>
}