HarmonyOS鸿蒙实战（ Beta6版）H5页面通过url scheme拉起应用实践指南

太空人_喜之郎

于 2024-09-03 21:13:43 发布

阅读量516

点赞数 19

分类专栏：鸿蒙 HarmonyOS OpenHarmony 文章标签： harmonyos 华为 linux 前端鸿蒙移动开发开发语言

本文链接：https://blog.csdn.net/2401_84917132/article/details/141866077

版权

鸿蒙同时被 3 个专栏收录

181 篇文章 0 订阅

订阅专栏

HarmonyOS

181 篇文章 0 订阅

订阅专栏

OpenHarmony

181 篇文章 0 订阅

订阅专栏

场景描述

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

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

常见场景

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

通过onLoadIntercept拦截前端H5请求，进行url判断。
使用bundleManager.canOpenLink检测是否可以打开相关应用。
已安装应用则拉起。
未安装应用跳转应用市场进行下载。

相关配置：

在拉起方的module.json5文件中配置querySchemes字段，表示本应用可能会用到的scheme查询。
```
"module": {
  "querySchemes": [
  "hwtips",
  ],
}
```
在被拉起方的module.json文件中的skill字段中配置该应用支持的scheme协议，表示这个应用可以通过此协议打开，例如玩机技巧应用想被成功拉起则需要玩机技巧应用在工程的model.json5文件中配置abilities的skills中配置scheme。
```
"abilities": [
{
  "skills": [
  {
    "actions": [
    "ohos.want.action.viewData"
    ],
    "uris": [
    {
      "scheme": "hwtips"
    }
    ]
  }
  ]
}
]
```
以在H5页面拉起玩机技巧为例，玩机技巧网页需要给自己的应用拉活，因此在网页中添加按钮引导用户拉起玩机技巧应用。网页端显示打开玩机技巧应用按钮，此按钮绑定点击事件，并执行window.open('hwtips://com.huawei.hmos.tips.app?id=xxx&funNum=xxx&type=xxx')，用户点击按钮后，web端收到的url为'hwtips://com.huawei.hmos.tips.app?id=xxx&funNum=xxx&type=xxx'，点击该按钮，打开网页web端收到的url为'hwtips://com.huawei.hmos.tips.app?id=xxx&funNum=xxx&type=xxx'。
```
<!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>
```

url解释

hwtips:// 是玩机技巧APP的协议头，表示这是一个玩机技巧APP的链接。
com.huawei.hmos.tips.app 是玩机技巧APP的主域名，表示这个链接是由玩机技巧APP生成的。
funNum=xxx&type=xxx是链接的参数，表示要跳转到的具体页面。xxx是一个代表具体页面的字符串，可以是详情页、咨询页等。
id=xxx是应该上架应用市场才有的标识id，通过此id可以跳转到对应app下载页面。
查询AppId参考：如何查询AppId。

核心代码

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

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

使用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);
  })
}

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

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(() => {
      // 拉起成功
    })
  }
);

常见问题

跳转Want的有哪些参数可以配置？

Want跳转配置的参数参考链接：Want参数配置。
Web会对deeplink链接做任何解析或处理吗？

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

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

为了确保高效学习，建议规划清晰的学习路线

GitCode - 全球开发者的开源社区,开源代码托管平台 希望这一份鸿蒙学习文档能够给大家带来帮助~

鸿蒙（HarmonyOS NEXT）最新学习路线

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.学习视频+学习PDF文档

HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

纯血版鸿蒙全套学习文档（面试、文档、全套视频等）

鸿蒙APP开发必备

总结

【纯血版鸿蒙全套最新学习文档】

总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。

太空人_喜之郎

关注

19
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HarmonyOS鸿蒙实战（ Beta6版）H5页面通过url scheme拉起应用实践指南

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

扫一扫

专栏目录