Sharing

Application Scenarios

Since API version 20, users can share the current page via its service panel entry or using the share button on the page within the atomic service.

How to Implement

This capability depends on Component Navigation to implement pagination for atomic services.

In the UIAbility of the atomic service project, you need to configure the onShare lifecycle function and declare atomicservice.param.key.shareInfo in wantParams to indicate that the sharing party intends to share page data.

Using this data, the atomic service panel determines whether the page the user is currently on allows sharing. If yes, it constructs the data to share, and starts the system sharing panel.

import UIAbility from '@ohos.app.ability.UIAbility';

export default class EntryAbility extends UIAbility {
  onShare(wantParams: Record<string, Object>) {
    wantParams['atomicservice.param.key.shareInfo'] = {
      'defaultPage': {
        showShareMenu: true;
        title: 'xxx';
        description: 'xxx';
        previewUri: 'xxx';
      },
      [NavigationSubPageName]: { 
        ...
      },
      ...
    };
  }

  ...
}

The structure is Record<string, ShareInfo>.

interface ShareInfo {
    showShareMenu: boolean;  // Whether the current page supports sharing, and whether the panel sharing switch is enabled. If this parameter is not set, sharing is disabled by default.
    title?: string;  // Title of the system sharing panel. The default value is the atomic service name.
    description?: string;  // Description of the system sharing panel. The default value is the atomic service description.
    previewUri?: string;  // Thumbnail of the data to share. The value is the URI of a local file. This parameter is reserved and has no effect.
}

NavigationSubPageName indicates the name of the NavDestination page used in navigation. The following is an example of a custom routing table.

// Use the navigation component to update the page as follows.
@Entry
@Component
struct NavigationExample {
  pageInfos: NavPathStack = new NavPathStack();
  isUseInterception: boolean = false;

   @Builder
  pageMap(pageName: string, params: Record<string, string>) {
    if (pageName === NavigationSubPageName.PageOne) {
      PageOne()
    } else if (pageName === NavigationSubPageName.PageTwo) {
      PageTwo()
    } else if (pageName === NavigationSubPageName.PageThree) {
      PageThree()
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPath({ name: NavigationSubPageName.PageOne }); // Adds the NavDestination page information specified by name to the stack.
          })
        Button('use interception', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.isUseInterception = !this.isUseInterception;
            if (this.isUseInterception) {
              this.registerInterception();
            } else {
              this.pageInfos.setInterception(undefined);
            }
          })
      }
    }.navDestination(this.pageMap)
  }
}