场景描述

在 HarmonyOS 的开发中，经常需要在应用或者浏览器的 H5 页面中跳转到另一个应用。为了实现这一目标，本文档将介绍一种通过 URL Scheme（Deep Link）来启动已安装应用或者跳转至应用商店下载未安装应用的方法。

实现步骤

1. 配置 Scheme 查询

首先，在拉起方的 module.json5 文件中配置 querySchemes 字段，表示本应用可能会用到的 Scheme 查询。

"module": {
  "querySchemes": [
    "hwtips",
  ],
}

2. 配置支持的 Scheme 协议

接着，在被拉起方的 module.json5 文件中配置 abilities 的 skills 字段，指定支持的 Scheme 协议。

"abilities": [
  {
    "skills": [
      {
        "actions": [
          "ohos.want.action.viewData"
        ],
        "uris": [
          {
            "scheme": "hwtips"
          }
        ]
      }
    ]
  }
]

3. 在 H5 页面中添加按钮及绑定事件

在 H5 页面中添加一个按钮，并绑定点击事件，用于触发 URL Scheme。

<!DOCTYPE html>
<html>
<body>
<div>
    <button type="button" onclick="goToLink()">拉起应用</button>
</div>
</body>
</html>
<script>
    function goToLink() {
        window.open('hwtips://com.huawei.hmos.tips.app?id=xxx&funNum=xxx&type=xxx');
    }
</script>

4. 检测应用是否可打开

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

const bundleManager = bundle.getBundleManager();

let canOpen = bundleManager.canOpenLink('hwtips://com.huawei.hmos.tips.app');

if (canOpen) {
  // 拉起应用
  const want = {
    action: 'ohos.intent.action.VIEW',
    parameters: { id: 'xxx', funNum: 'xxx', type: 'xxx' },
    uri: 'hwtips://com.huawei.hmos.tips.app'
  };
  
  context.startAbility(want).then(() => {
    console.log('应用已成功启动');
  }).catch((error) => {
    console.error('启动应用失败:', error);
  });
} else {
  // 跳转应用市场下载
  const want = {
    action: 'ohos.intent.action.VIEW',
    uri: 'store://appgallery.huawei.com/app/detail?id=C1229502635594278976'
  };

  context.startAbility(want).then(() => {
    console.log('应用市场已成功启动');
  }).catch((error) => {
    console.error('启动应用市场失败:', error);
  });
}

5. URL 解释

  • hwtips://：这是玩机技巧 APP 的协议头，表明这是一个玩机技巧 APP 的链接。
  • com.huawei.hmos.tips.app：玩机技巧 APP 的主域名，表明该链接由玩机技巧 APP 生成。
  • funNum=xxx&type=xxx：链接参数，表示要跳转的具体页面。
  • id=xxx：应用的唯一标识 ID，用于跳转至应用商店下载页面。

6. 使用 onLoadIntercept 截获前端请求

const web = new Web({
  src: 'wanjijiqiao.html',
  controller: this.controller,
});

web.onLoadIntercept((event) => {
  if (event) {
    const url = event.data.getRequestUrl();
    // 进一步处理 URL
  }
});

以上就是如何在 HarmonyOS 中使用 URL Scheme 从 H5 页面启动其他应用的完整流程。这种方法可以提高用户体验，并且为开发者提供了一个简单而强大的跨应用交互手段。