How to open the App Store and jump to the app details

#harmonyos #arktsdeeplinking #applinkingopenlink #harmonyosstartability

Read the original article：How to open the App Store and jump to the app details

Context

Video apps, social apps, and browser apps usually redirect to the target app's designated page via a link. If the user doesn't have the app installed, they will be redirected to the app store's download page, prompting them to install it.

Description

Open the App Store and jump to the app details interface. This can be achieved through Deep Linking , App Linking , and loadProduct .

Solution / Approach

Deep Linking:
Constructs a DeepLink link by concatenating bundleName, where bundleName is the name of the application package to be opened. Its format is:

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

Note: To be compatible with old links, you can add a capital C before appId. As shown below:

// For example, 123456 is the actual appid. Add a capital C in front.
uri: 'store://appgallery.huawei.com/app/detail?id=' + 'C123456'

Call the context.startAbility() method in the application to open the application details page of the App Market. Sample code:

import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import type { common, Want } from '@kit.AbilityKit';

// Pull up the application details page corresponding to the application market
function startAppGalleryDetailAbility(context: common.UIAbilityContext, bundleName: string): void {
  let want: Want = {
    action: 'ohos.want.action.appdetail', //Implicitly specify action as ohos.want.action.appdetail
    uri: 'store://appgallery.huawei.com/app/detail?id=' + bundleName, //bundleName is the name of the application package for which you want to open the application details
  };
  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 is ${error.message}`);
  });
}

@Entry
@Component
struct StartAppGalleryDetailAbilityView {
  @State message: string = 'Pull up the app store details page';
  uiContext = this.getUIContext();
  build() {
    Row() {
      Column() {
        Button(this.message)
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            const context: common.UIAbilityContext = this.uiContext?.getHostContext() as common.UIAbilityContext;
            // Get the application bundleName according to actual needs, for example, bundleName: 'com.huawei.hmsapp.books'
            const bundleName = 'xxxx';
            startAppGalleryDetailAbility(context, bundleName);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Open the DeepLink link on the web page to open the App Market app details page. Sample code:

<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div>
      <button type="button" onclick="openDeepLink()">Pull up the app details page</button>
    </div>
  </body>
</html>
<script>
  function openDeepLink() {
    window.open('store://appgallery.huawei.com/app/detail?id=com.xxxx.xxxx')
  }
</script>

Use the "Direct App Download" feature in AppGallery Connect to configure a stamp link based on Deep Linking. Associate DeepLink to quickly generate an H5 link or QR code. Users can click the H5 link or scan the QR code to launch the App Store and jump to the app details, making it easier for developers to promote their apps.

App Linking: Constructs an App Linking link by concatenating bundleName, where bundleName is the name of the application package to be opened. The format is:

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

Sample code for calling the openLink() API in an app to launch an App Linking link:

import type { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  build() {
    Button('start app linking', { type: ButtonType.Capsule, stateEffect: true })
      .width('87%')
      .height('5%')
      .margin({ bottom: '12vp' })
      .onClick(() => {
        let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
        // You need to concatenate different application package names to open different application details pages, for example：bundleName: 'com.huawei.hmsapp.books'
        let bundleName: string = 'xxxx';
        let link: string = 'https://appgallery.huawei.com/app/detail?id=' + bundleName;
        //Open the app details page of the specified package name in the App Store with App Linking priority
        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 is ${error.message}`);
          });
      })
  }
}

Sample code for opening an App Linking link on a web page:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jump example</title>
  </head>
  <body>
    <a href='https://appgallery.huawei.com/app/detail?id=bundleName'>AppLinking Redirect Example</a>
  </body>
</html>

Call the loadProduct method to open the application details page:

 aboutToAppear(): void {
    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 = getContext(this) as common.UIAbilityContext
    const wantParam: Want = {
      parameters: {
        // Required. Enter the name of the application package to be loaded, for example: bundleName: 'com.huawei.xxx.xxx'
        bundleName: 'com.xxx',
        // Optional, pass the registered attribution source data to the application attribution service
        skExposure: exposureData
      }
    }
    const callback: productViewManager.ProductViewCallback = {
      onError: (error: BusinessError) => {
        hilog.error(0, 'TAG', `loadService onError.code is ${error.code}, message is ${error.message}`)
      },
      onAppear: () => {
        hilog.info(0, 'TAG', `loadProduct onAppear.`);
      },
      onDisappear: () => {
        hilog.info(0, 'TAG', `loadProduct onDisappear.`);
      }
    }
    // Call the interface and open the application details page
    productViewManager.loadProduct(uiContext, wantParam, callback);
  }