华为HarmonyOS 帮助应用实现更好的推广下载能力 -- 1 应用市场推荐

场景介绍

• 元服务卡片加桌

  您可调用应用市场服务提供的元服务加桌loadService接口，加载元服务卡片加桌页面，用户点击“添加至桌面”按钮，将元服务卡片添加至桌面。

• 应用详情页展示
  1. 您可调用应用市场服务提供的loadProduct接口，直接加载应用市场的应用详情页面，用户可以在页面内点击“安装”按钮完成应用的下载安装。
  2. 您可使用DeepLink链接的方式拉起应用市场应用详情页，通过拼接应用市场DeepLink链接，在应用中调用或网页中点击DeepLink链接拉起应用详情页，用户可以在页面内点击“安装”按钮完成应用的下载安装。
  3. 您可使用App Linking链接的方式拉起应用市场应用详情页，通过拼接应用市场App Linking链接，在应用中调用或网页中点击App Linking链接拉起应用详情页，用户可以在页面内点击“安装”按钮完成应用的下载安装。

图1 元服务加桌页示例

图2 应用详情页示例

业务流程

 

1. 用户使用元服务卡片加桌页或者打开应用详情页功能。
2. 应用调用Store Kit的loadService或者loadProduct接口。
3. Store Kit API获取应用传入的信息，生成展示页面。
4. 展示生成的页面给用户使用。

接口说明

应用市场推荐场景提供loadService，loadProduct两个接口，具体API说明详见接口文档。

接口名	描述
loadService(context: common.UIAbilityContext, want: Want, callback?: ServiceViewCallback): void	加载元服务加桌页面接口。
loadProduct(context: common.UIAbilityContext, want: Want, callback?: ProductViewCallback): void	加载应用详情页面接口。

开发步骤

元服务卡片加桌

1. 导入productViewManager模块及相关公共模块。
   1. import { productViewManager } from '@kit.StoreKit';
   2. import { hilog } from '@kit.PerformanceAnalysisKit';
   3. import type { common, Want } from '@kit.AbilityKit';
   4. import { BusinessError } from '@kit.BasicServicesKit';

2. 构造元服务卡片参数。
   • 第一个参数是获取当前Page页面的UIAbilityContext。
   • 第二个参数是构造一个Want类型的对象，在属性中传入要加载的元服务的加桌链接。
   • 第三个参数是可选参数对象，可以传入两个属性，onError：回调函数，回调返回的信息为元服务详情页加载失败的错误信息。onReceive：回调函数，接收元服务加桌结果信息。
   1. const uiContext = getContext(this) as common.UIAbilityContext
   2. const wantParam: Want = {
   3. // 此处填入要加载的元服务的加桌链接
   4. uri: 'xxx'
   5. }
   6. const callback: productViewManager.ServiceViewCallback = {
   7. onReceive: (data: productViewManager.ServiceViewReceiveData) => {
   8. hilog.info(0x0001, 'TAG', `loadService onReceive.result is ${data.result}, msg is ${data.msg}`);
   9. },
   10. onError: (error: BusinessError) => {
   11. hilog.error(0x0001, 'TAG', `loadService onError.code is ${error.code}, message is ${error.message}`);
   12. }
   13. }

3. 调用loadService方法，将步骤2中构造的参数依次传入接口中。
   1. // 调用接口，加载元服务加桌页面
   2. productViewManager.loadService(uiContext, wantParam, callback);

应用详情页展示

• 方式一：loadProduct接口调用

1. 导入productViewManager模块及相关公共模块。
   1. import { productViewManager } from '@kit.StoreKit';
   2. import { hilog } from '@kit.PerformanceAnalysisKit';
   3. import type { common, Want } from '@kit.AbilityKit';
   4. import { BusinessError } from '@kit.BasicServicesKit';

2. 构造应用详情页参数。
   • 第一个参数是获取当前Page页面的UIAbilityContext。
   • 第二个参数是构造一个Want类型的对象，在属性中传入要加载的应用包名。
   • 第三个参数是可选参数对象，可以使用其onError属性来接收应用详情页加载失败时的返回的错误信息。
   1. const uiContext = getContext(this) as common.UIAbilityContext
   2. const wantParam: Want = {
   3. parameters: {
   4. // 此处填入要加载的应用包名，例如： bundleName: 'com.huawei.hmsapp.books'
   5. bundleName: 'com.xxx'
   6. }
   7. }
   8. const callback: productViewManager.ProductViewCallback = {
   9. onError: (error: BusinessError) => {
   10. hilog.error(0x0001, 'TAG', `loadProduct onError.code is ${error.code}, message is ${error.message}`);
   11. }
   12. }

3. 调用loadProduct方法，将步骤2中构造的参数依次传入接口中。
   1. // 调用接口，拉起应用详情页
   2. productViewManager.loadProduct(uiContext, wantParam, callback);

• 方式二：DeepLink方式

  构造拼接bundleName的DeepLink链接，其中bundleName为需要打开的应用包名，其格式为：

  1. store://appgallery.huawei.com/app/detail?id= + bundleName

  在应用中调用context.startAbility()方法，拉起应用市场应用详情页：

  1. import { BusinessError } from '@kit.BasicServicesKit';
  2. import { hilog } from '@kit.PerformanceAnalysisKit';
  3. import type { common, Want } from '@kit.AbilityKit';
  5. // 拉起应用市场对应的应用详情页面
  6. function startAppGalleryDetailAbility(context: common.UIAbilityContext, bundleName: string): void {
  7. let want: Want = {
  8. action: 'ohos.want.action.appdetail', //隐式指定action为ohos.want.action.appdetail
  9. uri: 'store://appgallery.huawei.com/app/detail?id=' + bundleName, // bundleName为需要打开应用详情的应用包名
  10. };
  11. context.startAbility(want).then(() => {
  12. hilog.info(0x0001, 'TAG', "Succeeded in starting Ability successfully.")
  13. }).catch((error: BusinessError) => {
  14. hilog.error(0x0001, 'TAG', `Failed to startAbility.Code: ${error.code}, message is ${error.message}`);
  15. });
  16. }
  18. @Entry
  19. @Component
  20. struct StartAppGalleryDetailAbilityView {
  21. @State message: string = '拉起应用市场详情页';
  23. build() {
  24. Row() {
  25. Column() {
  26. Button(this.message)
  27. .fontSize(24)
  28. .fontWeight(FontWeight.Bold)
  29. .onClick(() => {
  30. const context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
  31. // 按实际需求获取应用的bundleName，例如bundleName: 'com.huawei.hmsapp.books'
  32. const bundleName = 'xxxx';
  33. startAppGalleryDetailAbility(context, bundleName);
  34. })
  35. }
  36. .width('100%')
  37. }
  38. .height('100%')
  39. }
  40. }

  在网页中打开DeepLink链接拉起应用市场应用详情页：

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. </head>
  5. <body>
  6. <div>
  7. <button type="button" οnclick="openDeepLink()">拉起应用详情页</button>
  8. </div>
  9. </body>
  10. </html>
  11. <script>
  12. function openDeepLink() {
  13. window.open('store://appgallery.huawei.com/app/detail?id=com.xxxx.xxxx')
  14. }
  15. </script>

• 方式三：App Linking方式

  构造拼接bundleName的App Linking链接，其中bundleName为需要打开的应用包名，其格式为：

  1. https://appgallery.huawei.com/app/detail?id= + bundleName

  在应用中调用openLink()接口拉起App Linking链接：

  1. import type { common } from '@kit.AbilityKit';
  2. import { BusinessError } from '@kit.BasicServicesKit';
  3. import { hilog } from '@kit.PerformanceAnalysisKit';
  5. @Entry
  6. @Component
  7. struct Index {
  8. build() {
  9. Button('start app linking', { type: ButtonType.Capsule, stateEffect: true })
  10. .width('87%')
  11. .height('5%')
  12. .margin({ bottom: '12vp' })
  13. .onClick(() => {
  14. let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
  15. // 需要拼接不同的应用包名，用以打开不同的应用详情页,例如：bundleName: 'com.huawei.hmsapp.books'
  16. let bundleName: string = 'xxxx';
  17. let link: string = 'https://appgallery.huawei.com/app/detail?id=' + bundleName;
  18. // 以App Linking优先的方式在应用市场打开指定包名的应用详情页
  19. context.openLink(link, { appLinkingOnly: false })
  20. .then(() => {
  21. hilog.info(0x0001, 'TAG', 'openlink success.');
  22. })
  23. .catch((error: BusinessError) => {
  24. hilog.error(0x0001, 'TAG', `openlink failed. Code: ${error.code}, message is ${error.message}`);
  25. });
  26. })
  27. }
  28. }

  在网页中打开App Linking链接：

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>跳转示例</title>
  5. </head>
  6. <body>
  7. <a href='https://appgallery.huawei.com/app/detail?id=bundleName'>AppLinking跳转示例</a>
  8. </body>
  9. </html>