应用间跳转（拉端体验、App Linking&Deep Linking）

趙一纯
1,677 阅读6分钟

应用间跳转（拉端体验）

指向性跳转（App Linking/Deep Linking跳转）

目标应用URL配置

目标应用配置Deep Linking

请参见使用Deep Linking实现应用间跳转 > 目标应用在配置文件中注册URL skill。

目标应用配置App Linking

请参见使用App Linking实现应用间跳转 > 被拉起应用开发指导。

使用canOpenLink判断应用是否可访问

请参见使用canOpenLink判断应用是否可访问。

查询当前设备已安装应用中适配App Linking信息

可以通过以下命令查询当前设备已安装应用适配App Linking信息。

hdc shell hidumper -s AppDomainVerifyManager

# 返回示例如下
# com.huawei.hmos.myhuawei:
#   appIdentifier:1220095211531676480
#   domain verify status:
#     https://cn.club.vmall.com:success
# com.huawei.hmos.ailife:
#   appIdentifier:1040594029705702144
#   domain verify status:
#     https://smarthome.hicloud.com:success

说明：

被查询的设备镜像需要Root。

原生拉起应用

以Deep Linking的方式跳转应用

  • 目标应用已安装：跳转目标应用（如果有多个时，展示应用选择弹窗）。

  • 目标应用未安装：返回失败，系统不跳转，由应用自行处理。当前会展示链接无法打开弹窗。

常见应用的Deep Linking如下表所示。

应用名称链接说明
应用市场store://appgallery.huawei.com/app/detail?id=com.huawei.hmos.wallet后续会换成App Linking链接
import { common, OpenLinkOptions } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  @State info: string = '-';
  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;

  build() {
    Column({ space: 10 }) {
      Button('1. 原生Deep Linking, 目标应用已安装', { type: ButtonType.Capsule })
        .width('90%')
        .align(Alignment.Start)
        .onClick(() => {
          let link: string = "store://appgallery.huawei.com/app/detail?id=com.huawei.hmos.wallet";
          let openLinkOptions: OpenLinkOptions = {
            appLinkingOnly: false
          };
          this.context.openLink(link, openLinkOptions)
            .then(() => {
              this.info = link + ', return message: link success.';
            }).catch((err: BusinessError) => {
            this.info = link + `, return message: open link failed. Code is ${err.code}, message is ${err.message}`;
          })
        })

      Button('2. 原生Deep Linking, 目标应用未安装', { type: ButtonType.Capsule })
        .width('90%')
        .align(Alignment.Start)
        .onClick(() => {
          let link: string = "store-x://appgallery.huawei.com/app/detail?id=com.huawei.hmos.wallet";
          let openLinkOptions: OpenLinkOptions = {
            appLinkingOnly: false
          };
          this.context.openLink(link, openLinkOptions)
            .then(() => {
              this.info = link + ', return message: link success.';
            }).catch((err: BusinessError) => {
            this.info = link + `, return message: open link failed. Code is ${err.code}, message is ${err.message}`;
          })
        })

      Text(`目标应用URL: ${this.info}`)
        .fontSize(15)
        .width('90%')
    }
    .height('100%')
    .width('100%')
  }
}

运行效果如下图所示。

20240811_174421_DeepLinking.gif
以App Linking的方式跳转应用

  • 以App Linking优先的方式跳转应用

    • 目标应用已安装：直接跳转打开目标应用。

  • 仅以App Linking的方式跳转应用

    • 目标应用已安装：直接跳转打开目标应用。
    • 目标应用未安装：返回失败，系统不跳转，由应用自行处理。

常见应用的App Linking如下表所示。

应用名称链接说明
智慧生活smarthome.hicloud.comOK
import { common, OpenLinkOptions } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  @State info: string = '-';
  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;

  build() {
    Column({ space: 10 }) {
      Button('1. 以App Linking优先的方式跳转应用, 目标应用已安装', { type: ButtonType.Capsule })
        .width('90%')
        .align(Alignment.Start)
        .onClick(() => {
          let link: string = 'https://smarthome.hicloud.com';
          let openLinkOptions: OpenLinkOptions = {
            appLinkingOnly: false
          };
          this.context.openLink(link, openLinkOptions)
            .then(() => {
              this.info = link + ', return message: link success.';
            }).catch((err: BusinessError) => {
            this.info = link + `, return message: open link failed. Code is ${err.code}, message is ${err.message}`;
          })
        })

      Button('2. 以App Linking优先的方式跳转应用, 目标应用未安装', { type: ButtonType.Capsule })
        .width('90%')
        .align(Alignment.Start)
        .onClick(() => {
          let link: string = "https://developer.huawei.com/";
          let openLinkOptions: OpenLinkOptions = {
            appLinkingOnly: false
          };
          this.context.openLink(link, openLinkOptions)
            .then(() => {
              this.info = link + ', return message: link success.';
            }).catch((err: BusinessError) => {
            this.info = link + `, return message: open link failed. Code is ${err.code}, message is ${err.message}`;
          })
        })

      Button('3. 仅以App Linking的方式跳转应用, 目标应用已安装', { type: ButtonType.Capsule })
        .width('90%')
        .align(Alignment.Start)
        .onClick(() => {
          let link: string = 'https://smarthome.hicloud.com';
          let openLinkOptions: OpenLinkOptions = {
            appLinkingOnly: true
          };
          this.context.openLink(link, openLinkOptions)
            .then(() => {
              this.info = link + ', return message: link success.';
            }).catch((err: BusinessError) => {
            this.info = link + `, return message: open link failed. Code is ${err.code}, message is ${err.message}`;
          })
        })

      Button('4. 仅以App Linking的方式跳转应用, 目标应用未安装', { type: ButtonType.Capsule })
        .width('90%')
        .align(Alignment.Start)
        .onClick(() => {
          let link: string = "https://developer.huawei.com/";
          let openLinkOptions: OpenLinkOptions = {
            appLinkingOnly: true
          };
          this.context.openLink(link, openLinkOptions)
            .then(() => {
              this.info = link + ', return message: link success.';
            }).catch((err: BusinessError) => {
            this.info = link + `, return message: open link failed. Code is ${err.code}, message is ${err.message}`;
          })
        })

      Text(`目标应用URL: ${this.info}`)
        .fontSize(15)
        .width('90%')
    }
    .height('100%')
    .width('100%')
  }
}

通过App Linking方式拉起智慧生活如下图所示。

20240811_221155_AppLinking_Smarthome.gif

目标应用Web页面拉起应用

可以通过起一个本地服务器，在手机设备中浏览器打开网页，验证以下几种网页端拉起应用的场景。

说明：

可以在Web页面通过读取UserAgent判断当前是否是HarmonyOS NEXT设备。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://smarthome.hicloud.com">App Linking识别已安装自动适配跳转智慧生活应用</a>
    <br>
    <a href="https://developer.huawei.com/">App Linking识别未安装自动跳转默认浏览器</a>
    <br>
    <a href="store://appgallery.huawei.com/app/detail?id=com.huawei.hmos.wallet">以Deep
 Linking方式打开应用市场的华为钱包页面</a>
</body>
</html>

运行效果如下图所示。

20240813_001722_目标应用Web页面拉起应用.gif

ArkWeb拉起应用

ArkWeb拉起三方应用，可以使用Deep Linking/App Linking的方式拉起应用。

  1. ArkWeb通过Deep Linking方式拉起应用时，可以通过Web组件的onLoadIntercept()拦截机制，并通过调用UIAbilityContext的openLink()方法拉起应用。
  2. ArkWeb内核已完成对App Linking的自动适配，集成了ArkWeb内核的应用，在ArkWeb中访问目标应用的Web页面时，如果页面点击事件中嵌入了App Linking的代码，系统将在应用已安装时自动拉端，未安装时体专对应网页，ArkWeb的宿主应用无需特殊处理。
  3. 如果网页嵌入的拉端链接为App Linking时，需要注意App Linking链接的域名与当前访问网页的域名不能相同，即Host部分不可以完全相同，否则会认为用户希望继续停留在网页中访问，不跳转目标端。因此在该场景下需要跨域处理，建议使用子域名的方式区分分享的链接与H5网页中嵌入的链接。
  4. 直接在浏览器地址栏中输入App Linking链接，不会触发自动拉端逻辑，需要在Web页面嵌入代码逻辑进行实现链接跳转的功能。

开发步骤如下所示。

  1. 在src/main/resources/rawfile/目录中新建index.html文件。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://smarthome.hicloud.com">App Linking默认自动适配跳转智慧生活应用</a>
    <br>
    <a href="third-party://pages/toThirdApp/appgallery">以Deep
 Linking方式打开应用市场的华为钱包页面</a>
</body>
</html>

  2. 需要申请ohos.permission.INTERNET权限，配置方式请参见配置文件权限声明。

  3. 修改Index.ets文件。

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

@Entry
@Component
struct Index {
  @State info: string = '-';
  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
  controller = new webview.WebviewController();

  build() {
    Column({ space: 10 }) {
      Web({
        src: $rawfile('index.html'),
        controller: this.controller
      })
        .height(200)
        .zoomAccess(false)
        .onLoadIntercept((event) => {
          const url: string = event.data.getRequestUrl();
          if (url === 'third-party://pages/toThirdApp/appgallery') {
            const link: string = "store://appgallery.huawei.com/app/detail?id=com.huawei.hmos.wallet";
            const openLinkOptions: OpenLinkOptions = {
              appLinkingOnly: false,
              parameters: {
                name: 'test'
              }
            };
            this.context.openLink(link, openLinkOptions).then(() => {
              this.info = link + ', return message: link success.';
            }).catch((err: BusinessError) => {
              console.error(`open link failed. Code is ${err.code}, message is ${err.message}`);
            })
          }
          // // 返回true表示阻止此次加载，否则允许此次加载
          return false;
        })

      Text(`目标应用URL: ${this.info}`)
        .fontSize(15)
        .width('90%')
    }
    .height('100%')
    .width('100%')
  }
}

运行效果如下图所示。

20240813_001722_ArkWeb拉起应用.gif

链接分享

通过在备忘录中打开智慧生活应用的App Linking链接，模拟打开分享的链接。可以直接打开对应的应用。

20240813_012317_链接分享.gif

扫码直达

可以通过以下方式，将App Linking链接生成二维码。

  • 方式一：通过草料二维码生成器，将对应的链接生成二维码。

    20240818_0818_扫码直达_草料二维码.jpg

  • 方式二：代码生成

    @Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      QRCode('https://smarthome.hicloud.com')
        .width(200)
        .height(200)
    }
    .height('100%')
    .width('100%')
  }
}

    运行效果如下图所示。

    20240813_011541_扫码直达.jpeg

通过小艺智慧扫一扫功能，扫描上述二维码即可实现扫码直达应用。运行效果如下图所示。

20240813_011541_扫码直达.gif

常见场景及适配指导

Snipaste_2024-08-20_22-46-55.jpg

通用意图跳转

请参见通用意图跳转。

拉起系统应用

请参见拉起系统应用。

更多参考

最新/更多请参考

日志

  • 2024年08月07日01:42:57 初版
  • 2024年08月12日00:31:14 重新排版目录结构，以及增加网页端拉起应用的场景
  • 2024年08月13日01:40:55 新增ArkWeb和Web网页拉起应用相关场景的说明、新增查询当前设备已安装应用适配App Linking信息章节、新增链接分享和扫码直达的场景
  • 2024年08月18日23:07:06 新增草料二维码生成二维码的方式
  • 2024年08月20日22:43:40 新增常见场景及适配指导
avatar
文章
阅读
粉丝