HarmonyOS 鸿蒙Next中怎么解决H5通过schema唤起APP失败的问题

【问题现象】

Web组件加载H5页面，H5通过schema跳转三方APP，跳转失败。

【背景知识】

• 通过Deep Linking跳转：系统会根据接口中传入的uri信息，在本地已安装的应用中寻找到符合条件的应用并进行拉起。当匹配到多个应用时，会拉起应用选择框。详见指导。
• 通过App Linking跳转：系统会根据接口传入的uri信息（HTTPS链接）将用户引导至目标应用中的特定内容，无论应用是否已安装，用户都可以访问到链接对应的内容，整个跳转体验相比Deep Linking方式更加顺畅。详见指导。
• 通过Want信息跳转：显式Want跳转提供参数bundleName、moduleName和abilityName，隐式Want跳转不再提供bundleName、moduleName和abilityName，使用uri进行跳转。详见指导。
• Web拦截请求：通过onLoadIntercept拦截H5请求，详见指导。
• openLink打开应用：通过AppLinking启动UIAbility，使用Promise异步回调。仅支持在主线程调用，详见指导。
• startAbility打开应用：启动Ability，使用callback异步回调。仅支持在主线程调用，详见指导。

【定位思路】

H5内通过a标签跳转，不做处理只会进行H5的路由跳转，不能够唤起三方应用，所以需要拦截url请求再做处理。

【解决方案】

1. 主应用拦截请求

拦截Web组件的H5请求，如果请求地址符合schema，则可以通过以下三种方式唤起三方应用。

（1）APP侧代码：

import { webview } from '@kit.ArkWeb';
import { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  controller: WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({
        src: 'www.example.com',
        controller: this.controller
      })
        .onLoadIntercept((event) => {
          const url = event.data.getRequestUrl();
          //拦截H5的请求，匹配对应schema
          if (url == "xxx://xxxx") {
            //调用元能力接口拉起APP
            //....
            return true
          }
          return false
        })
    }
    .width('100%')
    .height('100%')
  }
}

（2）H5侧代码：

<a id="a" href="xxx://xxxx">打开APP</a>
<script>
   window.onload=function(){
     document.getElementById("a").click();
   }
</script>

2. 拉起应用

通过第一步拦截url请求，就可以在适当的时机拉起应用。

使用startAbility通过Want信息跳转：

let want: Want = {
  bundleName: "com.test.example",
  moduleName: "entry",
  abilityName: "EntryAbility"
};
try {
  context.startAbility(want)
    .then(() => {
      hilog.info(DOMAIN_NUMBER, TAG, 'startAbility success.');
    }).catch((err: BusinessError) => {
      hilog.error(DOMAIN_NUMBER, TAG, `startAbility failed. Code is ${err.code}, message is ${err.message}`);
    })
} catch (paramError) {
  hilog.error(DOMAIN_NUMBER, TAG, `Failed to startAbility. Code is ${paramError.code}, message is ${paramError.message}`);
}

或使用openLink通过Deep Linking或App Linking跳转：

let link: string = "https://www.example.com";
let openLinkOptions: OpenLinkOptions = {
  // 匹配的abilities选项是否需要通过AppLinking域名校验，匹配到唯一配置过的应用ability
  appLinkingOnly: true,
  // 同want中的parameter，用于传递的参数
  parameters: {demo_key: "demo_value"}
};

try {
  context.openLink(link, openLinkOptions)
    .then(() => {
      hilog.info(DOMAIN_NUMBER, TAG, 'open link success.');
    }).catch((err: BusinessError) => {
    hilog.error(DOMAIN_NUMBER, TAG, `open link failed. Code is ${err.code}, message is ${err.message}`);
  })
} catch (paramError) {
  hilog.error(DOMAIN_NUMBER, TAG, `Failed to start link. Code is ${paramError.code}, message is ${paramError.message}`);
}

详见指导。