端外在打开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>
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐