h5通过scheme地址唤起App或打开下载App的应用商店

发布时间 2023-07-03 17:57:08作者: gwhao

实现目标:可以在h5页面点击按钮唤起App,如果没有下载改App,则打开应用市场对应的APP的下载页面。

实现步骤2步:

  1.  将打开App按钮设置为<a>标签,href值设置为App的scheme地址。  

     <a href = 'scheme'  target = '_self'/>

  2.  同时开启定时器,3-5秒后跳转对应的应用商店(后面会说明为什么要延时并跳转到应用商店)

    window.setTimeout(()=> { 
        window.location.href = '应用商店的scheme地址'

    }, delay)

为什么要延时几秒并跳转到应用商店?
  因为使用跳转scheme地址的方式无法判断手机是否下载了App,同样也无法判断是否成功打开了App。
  那么就会出现两种情况:
  • 当下载了app时,可以成功跳转到App(有时会需要确认浏览器自动调起的确认跳转按钮才能跳转)。
  • 未下载时,跳转会失败,安卓的用户端表现是什么都不会发生,ios则会弹窗报错(可以忽视)。

      未下载时按照实现的目标则应该打开应用商店的app下载页面。所以为了处理未下载的情况,就无论是否下载了App,都在延时几秒后跳转到应用商店。

 

当然也可以有不同的用户交互方案以提升用户体验。比如进入页面就直接尝试进行打开app的逻辑,如果没有成功唤起则什么都不做。让用户自己去点击页面里的下载按钮,此时不需要延时了,而是直接打开应用商店。