鸿蒙Next中浏览器如何唤起app

在鸿蒙Next系统中，从浏览器点击链接时如何唤起对应的App？是否需要特定的URL Scheme配置？如果遇到无法跳转的情况，应该如何排查和解决？求具体的实现方法和示例代码。

2 回复

鸿蒙Next中，浏览器想唤起App？简单！用Scheme跳转就行。比如在网页里藏个链接，用户一点就蹦到App里了。不过记得提前在App里配好Scheme，不然就像叫醒装睡的人——白费劲！

更多关于鸿蒙Next中浏览器如何唤起app的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，浏览器唤起App主要通过深度链接（Deep Link） 实现。以下是具体步骤和示例代码：

实现原理

  • 在App中注册自定义URI Scheme（如 myapp://），浏览器通过访问该链接即可唤起对应App。
  • 鸿蒙Next使用 Want 机制进行应用间跳转。

步骤1：在App中配置Scheme

在 module.json5 文件中声明URI Scheme：

{
  "module": {
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "skills": [
          {
            "entities": ["entity.system.browsable"],
            "actions": ["action.system.view"],
            "uris": [
              {
                "scheme": "myapp",   // 自定义Scheme
                "host": "detail",
                "port": "8000"       // 可选端口
              }
            ]
          }
        ]
      }
    ]
  }
}

步骤2：在App中处理链接

在Ability中接收并解析Want参数：

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    // 获取Want中的URI
    let want = this.context.startAbilityParameter?.want;
    if (want?.uri) {
      console.log('Received URI:', want.uri); // 示例：myapp://detail?id=123
      // 解析参数并跳转到对应页面
    }
  }
}

步骤3：浏览器中触发链接

在HTML页面中放置链接或通过JS跳转：

<!-- 方法1：直接使用a标签 -->
<a href="myapp://detail?id=123">打开App</a>

<!-- 方法2：通过JS跳转 -->
<script>
  window.location.href = 'myapp://detail?id=123';
</script>

注意事项

  1. Scheme唯一性：确保自定义Scheme不与系统或其他应用冲突。
  2. 安全校验：App应验证URI来源和参数，防止恶意调用。
  3. fallback处理：若未安装App，可引导用户跳转应用市场：
    <script>
  setTimeout(() => {
    window.location.href = 'https://appstore.huawei.com/app/xxx'; // 备用链接
  }, 1500);
</script>

完整流程

用户点击链接 → 系统匹配Scheme → 拉起对应App → App解析参数并跳转目标页面。

通过以上配置即可实现浏览器唤起App的功能。

回到顶部