HarmonyOS H5页面如何通过scheme方式拉起应用

HarmonyOS

zxjiu

3天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

浏览器访问网页经常会遇到deeplink的场景。当前处理方案统一为使用AMS系统能力startAbility去隐式拉起。传递的want参数为

 { "actions": "ohos.want.action.viewData", "uri": deeplink链接 }

网页需要给自己的应用拉活，因此在网页中添加按钮引导用户拉应用。

网页端直接提示打开应用按钮绑定点击事件

window.open(xxx://www.huawei.com?url=XXX)>

点击该按钮，打开网页web端收到的url为xxx://www.huawei.com?url=XXX

应用想被成功拉起则需要应用在工程的model.json5文件中配置abilities的skills中配置

{ "actions": [ "ohos.want.action.viewData" ], "uris": [ { "scheme": "xxx" } ] }

需要注意deeplink链接的scheme协议头必须网页拉起的链接的应用配置的保持一致。

另外浏览器不会对deeplink链接做任何解析或处理，只会原封不动的传递给拉起的应用。因此第三方应用只需要自己的网页端和应用端协商好url规则，自己去做解析打开对应页面即可

浏览器支持Deeplink链接的打开能力。应用想要响应Deeplink拉起，需要注册viewData action和scheme+host，这样才能匹配到。

如果有多个应用注册了相同的scheme+host，就会拉起应用选择框，让用户选择某个应用。

Deeplink响应的声明，需要在module.json5文件的接收Ability中skills项中增加action和uris内容：

"skills": [{
  ...
  "actions": [
    "ohos.want.action.viewData" // 声明Deeplink接收的Action，这个是固定的 
  ...
  ],
  "uris": [{
    "scheme":
    "store", // scheme尽量做到唯一 ,仅设置此协议头就可以跳转 
    "host":
    "test.xxx.com" // host不与其他应用相同，这样可以减少冲突 
  }
  ...
  ]
  ...
}]

需要注意deeplink链接的scheme协议头必须网页拉起的链接的应用配置的保持一致。另

外浏览器不会对deeplink链接做任何解析或处理，只会原封不动的传递给拉起的应用。因此应用只需要自己的网页端和应用端协商好url规则，自己去做解析打开对应页面即可

webview Deeplink拉起应用示例：

import web_webview from '@ohos.web.webview';
import { common, Want } from '@kit.AbilityKit';

@Entry
@Component
struct WebPage {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Row() {
      Column() {
        Web({ src: $rawfile('local.html'), controller: this.controller }).onLoadIntercept((event) => {
          if (event) {
            let url: string = event.data.getRequestUrl();
            console.log(url) // 判断链接是否为拨号链接 
            if (url.indexOf('store://') === 0) {
              // 跳转拨号界面 
              const want: Want = { uri: 'store://appgallery.huawei.com/app/detail?id=xxxx' }
              const context = getContext(this) as common.UIAbilityContext;
              context.startAbility(want)
                .then(() => { //拉起成功 
                }).catch(() => {
              })
              return true;
            }
          }
          return false;
        }).domStorageAccess(true)
      }.width('100%')
    }.height('100%')
  }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试页面</title>
    <script> function goToLink() { window.open('store://appgallery.huawei.com/app/detail?id=C1229...94278976') }
    </script>
</head>
<body>
<div align="center">
    <button type="button" id="btn_navi" onclick="goToLink()">跳转应用市场</button>
</div>
</body>
</html>

3天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS H5页面如何通过scheme方式拉起应用

订阅鸿蒙技术特刊，精选内容抢先看