鸿蒙Next H5如何打开原生应用

在鸿蒙Next系统中，如何通过H5页面跳转到指定的原生应用？需要具体实现方法和示例代码，比如调用系统相机或地图等应用。目前尝试使用scheme方式但无法成功，求教正确的调用方式和参数配置。

2 回复

鸿蒙Next H5想调起原生应用？简单！用system.app.launchApp就行，记得配好应用包名和参数。不过小心别把H5搞成“应用启动器”了——用户可能以为你在玩套娃呢！😄

更多关于鸿蒙Next H5如何打开原生应用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过Ability Kit提供的Want机制实现H5页面打开原生应用。以下是具体实现方法：

1. 配置权限

在module.json5中声明权限：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.START_ABILITIES_FROM_BACKGROUND"
      }
    ]
  }
}

2. H5页面调用

在H5页面中使用scheme或want参数：

<!-- 方式1：使用URL Scheme -->
<a href="hap://app/com.example.demo?page=index">打开应用</a>

<!-- 方式2：通过JavaScript调用 -->
<button onclick="launchApp()">启动应用</button>
<script>
  function launchApp() {
    // 通过Want参数传递目标信息
    window.location.href = 'hap://app/com.example.demo?action=view&entity=video';
  }
</script>

3. 原生应用配置

在目标应用的module.json5中配置导出Ability：

{
  "module": {
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ts",
        "exported": true,  // 必须设为true
        "skills": [
          {
            "actions": [
              "action.system.view"
            ],
            "entities": [
              "entity.system.default"
            ],
            "uris": [
              {
                "scheme": "hap",
                "host": "app",
                "port": "80", // 可选
                "path": "com.example.demo"
              }
            ]
          }
        ]
      }
    ]
  }
}

4. 处理Want参数

在目标Ability的onCreate中接收参数：

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

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchReason) {
    // 获取H5传递的参数
    let page = want.parameters?.page; // 例如"index"
    let action = want.action; // 例如"action.system.view"
    // 根据参数执行跳转逻辑
  }
}

关键点说明：

  1. URL Scheme规则：需与目标应用skills中配置的scheme、host、path匹配
  2. 参数传递：通过URL查询参数或Want的parameters字段传递
  3. 权限控制：确保声明了后台启动权限
  4. 跨应用校验：系统会自动验证目标应用是否允许被拉起

通过以上配置，即可实现从H5页面跳转到指定原生应用页面。

回到顶部