H5通过url scheme拉起对应应用

rhlee

发布于 2024-8-1 16:41

浏览

0收藏

场景描述

三方应用使用过程中，可能会在应用或浏览器的H5页面中需要跳转到其它应用，本文档提供了H5跳转页面的方法

1. 如果在应用中则使用startAbility打开deepLink拉起对应应用，如果在H5页面中拉起其它应用，则绑定点击事件，点击按钮后调用window.open(deepLink)进行跳转。

常见场景

在H5页面中，通过deepLink拉起已安装应用，或拉起应用市场下载未安装应用，关键步骤如下：

1. 通过onLoadIntercept拦截前端H5请求，进行url判断。

2. 使用bundleManager.canOpenLink检测是否可以打开相关应用。

3. 已安装应用则拉起。

4. 未安装应用跳转应用市场进行下载。

url解释

1. hwtips:// 是玩机技巧APP的协议头，表示这是一个玩机技巧APP的链接。

2. com.huawei.hmos.tips.app 是玩机技巧APP的主域名，表示这个链接是由玩机技巧APP生成的。

3. funNum=xxx&type=xxx是链接的参数，表示要跳转到的具体页面。xxx是一个代表具体页面的字符串，可以是详情页、咨询页等。

4. id=xxx是应该上架应用市场才有的标识id，通过此id可以跳转到对应app下载页面。

5. 查询AppId参考：如何查询AppId。

核心代码

1. 使用webView onLoadIntercept拦截前端请求，目的是获取拉起应用的url，也可以使用应用侧与前端交互方法获取url，例如javaScriptProxy。

Web({ src: $rawfile('wanjijiqiao.html'), controller: this.controller }) 
  .onLoadIntercept((event) => { 
    if (event) { 
      let url: string = event.data.getRequestUrl(); 
    })

2. 使用bundleManager.canOpenLink检测是否可以打开相关应用，可以打开则拉起应用。

let canOpen = bundleManager.canOpenLink('xxx'); 
if (canOpen) { 
  const want: Want = { 
    uri: 'xxx' 
  } 
  const context = getContext(this) as common.UIAbilityContext; 
  context.startAbility(want).then(() => { 
    //拉起成功 
  }).catch((error: BusinessError) => { 
    console.log('error code:' + error.code + ', message:' + error.message); 
  }) 
}

3. 未安装，不可打开则跳转应用市场进行下载。

promptAction.showDialog({ 
  title: `提示`, 
  message: '应用未下载前去应用市场', 
  buttons: [{ 
    text: '确定', 
    color: '#41464b', 
  }] 
}, 
  (err, data) => { 
    if (err) { 
      console.info('showDialog err: ' + err); 
      return; 
    } 
    // 应用未安装，拉起应用市场 
    const want: Want = { 
      uri: `store://appgallery.huawei.com/app/detail?id=C1229502635594278976` 
    } 
    const context = getContext(this) as common.UIAbilityContext; 
    context.startAbility(want).then(() => { 
      // 拉起成功 
    }) 
  } 
);