在应用开发中，推荐其他应用或展示当前应用的详情页是一个常见需求。通过展示应用详情页面，用户可以直达应用市场，简化下载流程，增加应用的下载量和用户活跃度。
一、方式选择
| 场景 | 推荐方式 |
|---|
| 应用内打开应用市场 | loadProduct方式 |
| Web页面打开应用市场 | App Linking方式 |
二、限制
| 限制项 | 说明 |
|---|
| 模拟器 | 不支持（提示："无法获取内容，请点击屏幕重试"） |
| 设备支持 | Phone、Tablet、PC/2in1、TV(22+) |
三、方式一：loadProduct接口调用
3.1 接口
| 接口 | 描述 |
|---|
loadProduct(context, want, callback) | 加载应用详情页面接口 |
3.2 开发步骤
步骤1：导入模块
import { productViewManager } from '@kit.AppGalleryKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import type { common, Want } from '@kit.AbilityKit'; import { BusinessError } from '@kit.BasicServicesKit';
步骤2：构造应用详情页参数
@Entry @Component struct LoadProductView { build() { Column() { Button('拉起应用市场详情页') .fontSize(24) .fontWeight(FontWeight.Bold) .onClick(() => { // 归因数据（可选） const exposureData: productViewManager.SKExposure = { adTechId: '20****e8', campaignId: '123456', destinationId: '10*******', mmpIds: ['2f****5', '2f7***5'], serviceTag: '123***2', nonce: '123***2', timestamp: 1705536488, signature: 'MEQCIEQlmZ****zKBSE8QnhLTIHZZZ****ZpRqRxHss65Ko****JgJKjdrWdkL****juEx2RmFS7da****ZRVZ8RyMyUXg==' }; const uiContext = this.getUIContext().getHostContext() as common.UIAbilityContext; const wantParam: Want = { parameters: { // 必填：要加载的应用包名 bundleName: 'com.huawei.hmsapp.books', // 可选：归因数据 skExposure: exposureData } }; const callback: productViewManager.ProductViewCallback = { onError: (error: BusinessError) => { hilog.error(0, 'TAG', `loadProduct error: ${error.code}, ${error.message}`); }, onAppear: () => { hilog.info(0, 'TAG', `loadProduct onAppear.`); }, onDisappear: () => { hilog.info(0, 'TAG', `loadProduct onDisappear.`); } }; // 调用loadProduct productViewManager.loadProduct(uiContext, wantParam, callback); }) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } }
参数说明：
| 参数 | 类型 | 必填 | 说明 |
|---|
bundleName | string | 是 | 要加载的应用包名 |
skExposure | SKExposure | 否 | 归因数据（用于统计来源） |
四、方式二：Deep Linking方式
4.1 链接格式
uri: 'store://appgallery.huawei.com/app/detail?id=' + bundleName
4.2 代码示例
import { BusinessError } from '@kit.BasicServicesKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import type { common, Want } from '@kit.AbilityKit'; function startAppGalleryDetailAbility(context: common.UIAbilityContext, bundleName: string): void { let want: Want = { action: 'ohos.want.action.appdetail', // 隐式指定action uri: 'store://appgallery.huawei.com/app/detail?id=' + bundleName }; context.startAbility(want).then(() => { hilog.info(0x0001, 'TAG', "Succeeded in starting Ability successfully.") }).catch((error: BusinessError) => { hilog.error(0x0001, 'TAG', `Failed to startAbility. Code: ${error.code}, message: ${error.message}`); }); } @Entry @Component struct StartAppGalleryDetailAbilityView { build() { Column() { Button('拉起应用市场详情页') .onClick(() => { const context = this.getUIContext().getHostContext() as common.UIAbilityContext; const bundleName = 'com.huawei.hmsapp.books'; startAppGalleryDetailAbility(context, bundleName); }) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } }
4.3 网页中打开Deep Linking
<html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div> <button type="button" onclick="openDeepLink()">拉起应用详情页</button> </div> </body> </html> <script> function openDeepLink() { window.open('store://appgallery.huawei.com/app/detail?id=com.xxxx.xxxx') } </script>
五、方式三：App Linking方式
5.1 链接格式
let link: string = 'https://appgallery.huawei.com/app/detail?id=' + bundleName;
5.2 代码示例
import { BusinessError } from '@kit.BasicServicesKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import type { common } from '@kit.AbilityKit'; @Entry @Component struct Index { build() { Button('start app linking', { type: ButtonType.Capsule }) .width('87%') .height('5%') .margin({ bottom: '12vp' }) .onClick(() => { let context = this.getUIContext().getHostContext() as common.UIAbilityContext; let bundleName: string = 'com.huawei.hmsapp.books'; let link: string = 'https://appgallery.huawei.com/app/detail?id=' + bundleName; // appLinkingOnly: false 表示优先在应用市场打开，失败则用浏览器 context.openLink(link, { appLinkingOnly: false }) .then(() => { hilog.info(0x0001, 'TAG', 'openlink success.'); }) .catch((error: BusinessError) => { hilog.error(0x0001, 'TAG', `openlink failed. Code: ${error.code}, message: ${error.message}`); }); }); } }
5.3 网页中打开App Linking
<html lang="en"> <head> <meta charset="UTF-8"> <title>跳转示例</title> </head> <body> <a href='https://appgallery.huawei.com/app/detail?id=com.xxxx.xxxx'>AppLinking跳转示例</a> </body> </html>
六、三种方式对比
| 方式 | 适用场景 | 优势 | 注意事项 |
|---|
| loadProduct | 应用内拉起 | 支持归因回调，可监听页面打开/关闭 | 需要传入Want参数 |
| Deep Linking | 应用内/网页 | 格式简单，通用性强 | 需要指定action |
| App Linking | 应用内/网页 | 支持降级（失败时用浏览器打开） | appLinkingOnly参数控制行为 |
