Redirecting to a Mini Program from HarmonyOS

Prerequisites

• Client version 10.2.3.13 or later

• Server-side version

  • Public cloud: version 1.21.11 or later

  • Private cloud: version 1.37.0 or later

Solution design

The solution involves configuring and opening an Ability that can route to a mini program page. When you push a message, you specify this routing Ability in the harmonyRouteUrl extension parameter. All push notifications intended to open a mini program are routed through this Ability. You can also pass a page URL to open a specific page in the mini program. This parameter is optional. If you specify a page URL in the extension parameters, it overwrites the URL from the message template. If this parameter is not specified, the URL from the template is used.

Instructions

Client configuration

Configure the client to open the mini program page, as shown in the following PushLandingAbility code example.

import UIAbility from '@ohos.app.ability.UIAbility';
import Want from '@ohos.app.ability.Want';
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import window from '@ohos.window';
import hilog from '@ohos.hilog';
import { MpaasPushServiceImpl, MPPushMsg, msgOutput, PushMsgHandler } from '@mpaas/push';
import pushService from '@hms.core.push.pushService';
import { BusinessError } from '@ohos.base';
import { HRiverMini } from '@mpaas/hrivermini';

export class PushLandingAbility extends UIAbility {
  private static  TAG: string = "PushLandingAbility"

  private pushData: object = JSON.parse("{}");
  private pushKey: string = "";
  public  para: Record<string,string> = { 'msg_id': "default", 'msg_data': "default", 'page_route':"default"};
  public storageData: LocalStorage = new LocalStorage(this.para);
  landingWindowStage: window.WindowStage | undefined = undefined;

  async onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): Promise<void> {
    // MPFramework.create(this.context)
    hilog.info(0x0000, PushLandingAbility.TAG, 'PushLandingAbility create. Data: %{public}s', JSON.stringify(want.parameters) ?? '');
    let k: string = ""
    let v: object = JSON.parse("{}")
    let msg: msgOutput | undefined = PushMsgHandler.parsePushMsg(want)
    let msg_id: string | undefined = msg?.msg_id
    let msg_data: MPPushMsg | undefined = msg?.msg_data

    if (msg) {
      if (msg_id) {
        k = msg_id
        hilog.info(0x0000, PushLandingAbility.TAG, 'onCreate k: %{public}s', k);
      } else {
        hilog.warn(0x0000, PushLandingAbility.TAG, 'msg_id is undefined');
      }
      if (msg_data) {
        v = msg_data
        hilog.info(0x0000, PushLandingAbility.TAG, 'onCreate v: %{public}s', v);
      } else {
        hilog.warn(0x0000, PushLandingAbility.TAG, 'msg_data is undefined');
      }
    } else {
      hilog.warn(0x0000, PushLandingAbility.TAG, 'msg is undefined');
    }

    let pageRoute: string | undefined = this.getOpenH5Url(want.parameters)
    hilog.info(0x0000, PushLandingAbility.TAG, 'pageRoute='+pageRoute);
      
    this.storageData.set('msg_id', k)
    this.storageData.set('msg_data', JSON.stringify(v))
    this.storageData.set('page_route', pageRoute as string)
    hilog.info(0x0000, PushLandingAbility.TAG, 'onCreate push_msgkey: %{public}s', k);
    hilog.info(0x0000, PushLandingAbility.TAG, 'onCreate push_msgdata: %{public}s', JSON.stringify(v));
    hilog.info(0x0000, PushLandingAbility.TAG, 'onCreate page_route: %{public}s', this.storageData.get("page_route"));
  }

  async onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): Promise<void> {
    hilog.info(0x0000, PushLandingAbility.TAG, 'PushLandingAbility onNewWant. Data: %{public}s', JSON.stringify(want.parameters) ?? '');
    let k: string = ""
    let v: object = JSON.parse("{}")

    let msg: msgOutput | undefined = PushMsgHandler.parsePushMsg(want)
    let msg_id: string | undefined = msg?.msg_id
    let msg_data: MPPushMsg | undefined = msg?.msg_data

    if (msg) {
      if (msg_id) {
        k = msg_id
        hilog.info(0x0000, PushLandingAbility.TAG, 'onCreate k: %{public}s', k);
      } else {
        hilog.warn(0x0000, PushLandingAbility.TAG, 'msg_id is undefined');
      }
      if (msg_data) {
        v = msg_data
        hilog.info(0x0000, PushLandingAbility.TAG, 'onCreate v: %{public}s', k);
      } else {
        hilog.warn(0x0000, PushLandingAbility.TAG, 'msg_data is undefined');
      }
    } else {
      hilog.warn(0x0000, PushLandingAbility.TAG, 'msg is undefined');
    }

    let pageRoute: string | undefined = this.getOpenH5Url(want.parameters)
    hilog.info(0x0000, PushLandingAbility.TAG, 'pageRoute='+pageRoute);

    this.storageData.set('msg_id', k)
    this.storageData.set('msg_data', JSON.stringify(v))
    this.storageData.set('page_route', pageRoute as string)

    hilog.info(0x0000, PushLandingAbility.TAG, 'onNewWant push_msgkey: %{public}s', this.storageData.get("msg_id"));
    hilog.info(0x0000, PushLandingAbility.TAG, 'onNewWant push_msgdata: %{public}s', JSON.stringify(this.storageData.get("msg_data")));
    hilog.info(0x0000, PushLandingAbility.TAG, 'onNewWant page_route: %{public}s', this.storageData.get("page_route"));

    if (this.landingWindowStage != null) {
      hilog.info(0x0000, PushLandingAbility.TAG, 'start landingWindowStage.loadContent');
      await this.landingWindowStage.loadContent('pushpages/pushLandingPage', this.storageData)
    }
  }

  onDestroy(): void {
    hilog.info(0x0000, PushLandingAbility.TAG, '%{public}s', 'Ability onDestroy');
  }

  async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
    // Main window is created, set main page for this ability
    // Create a new instance and initialize it with the given object.
    this.landingWindowStage = windowStage
    hilog.info(0x0000, PushLandingAbility.TAG, 'this.pushKey= %{public}s',this.storageData.get("msg_id"));
    hilog.info(0x0000, PushLandingAbility.TAG, 'this.pushData= %{public}s',this.storageData.get("msg_data"));
    try {
      hilog.info(0x0000, PushLandingAbility.TAG, 'this.storageData. Key: %{public}s, this.storageData Data: %{public}s',this.storageData.get("msg_id"), this.storageData.get("msg_data"));
      await windowStage.loadContent('pushpages/pushLandingPage', this.storageData)
      hilog.info(0x0000, PushLandingAbility.TAG, 'Succeeded in loading the content. Key: %{public}s, Data: %{public}s',this.storageData.get("msg_id"), JSON.stringify(this.storageData.get("msg_data")) ?? '');
    } catch (e) {
      console.log("err msg="+e.message)
      return
    }
  }

  private getOpenH5Url(data?: object): string | undefined {
    hilog.info(0x0000, PushLandingAbility.TAG, 'data='+data);
    if(data && data["com_harmony_push"] && data["com_harmony_push"]["bData"]) {
      return data["com_harmony_push"]["bData"]["openH5Url"]
    }
    return undefined
  }
}

The following is an example of the UI code:

import { common } from '@kit.AbilityKit';
import { HRiverMini, AppPage } from '@mpaas/hrivermini';
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG: string = "PushLandingPage"

let store2 = LocalStorage.getShared()

@Entry(store2)
@Component
struct pushLandingPage {

  @LocalStorageLink('msg_id') msgKey: string = "default";
  @LocalStorageLink('msg_data') msgData: string = "default";
  @LocalStorageLink('page_route') pageRoute: string = "default";

  @State msg: string = 'Landing Page';
  @State msgKeyStat: string = 'received msg_id = ' + `${this.msgKey}`;
  @State pageRouteStat: string = 'received page_route = ' + `${this.pageRoute}`;
    
  private context = getContext(this) as common.UIAbilityContext;

  pageInfos: NavPathStack = new NavPathStack()

  @Builder
  PageMap(name: string, navPageIntent: Map<string, Object>) {
    AppPage(name, navPageIntent);
  }

  onPageShow(){
    HRiverMini.notifyNavigationCreate(this.context, this.pageInfos)
  }

  aboutToAppear() {
    let startParams = new Map<string, Object>() // Startup parameters
    startParams.set("page", this.pageRoute as string);
    HRiverMini.startApp("2024052820240528", startParams)
  }

  build() {
    Navigation(this.pageInfos){
      Row() {
        Column({space:20}) {
          Text(this.msg)
            .fontSize(15)
            .fontWeight(FontWeight.Bold)

          Text(this.msgKeyStat)
            .fontSize(15)
            .fontWeight(FontWeight.Bold)

          Text(this.msgDataStat)
            .fontSize(15)
            .fontWeight(FontWeight.Bold)

        }
        .width('100%')
      }
    }.navDestination(this.PageMap);

  }
}

Server-side configuration

Add the following two extension parameters.