基于Navigation的路由管理（下篇）

@Componentexport struct PrivacyDialog {  @Consume('pageInfo') pageStack: NavPathStack;  @State isAgree: string = 'Not Agree';
  build() {    NavDestination() {      Stack({ alignContent: Alignment.Center }) {        // 蒙层        Column()          .width('100%')          .height('100%')          .backgroundColor('rgba(0,0,0,0.5)')
        // 隐私弹窗        Column() {          Text('注册应用账号')            .fontSize(30)            .height('20%')          Text('请您仔细阅读一下协议并同意，我们将全力保护您的个人信息安全，您可以使用账号登录APP。')            .height('40%')          Divider()          Row() {            // 点击隐私条款，跳转到隐私条款页面，并接受隐私条款的返回值，用来刷新页面的同意状态。            Text('《应用隐私政策》')              .onClick(() => {                let pathInfo: NavPathInfo = new NavPathInfo('PrivacyItem', null, (popInfo: PopInfo) => {                  this.isAgree = popInfo.result.toString();                });                this.pageStack.pushDestination(pathInfo, true);              })            Text(this.isAgree)          }          .height('20%')
          Divider()          // 点击同意/不同意按钮，将状态返回登录页          Row() {            Button('不同意')              .onClick(() => {                this.pageStack.pop('Not Agree', true);              })              .width('30%')            Button('同意')              .onClick(() => {                this.pageStack.pop('Agree', true);              })              .width('30%')          }          .height('20%')        }        .backgroundColor(Color.White)        .height('50%')        .width('80%')      }    }    .hideTitleBar(true)    // 设置Dialog类型    .mode(NavDestinationMode.DIALOG)  }}

export default class EntryAbility extends UIAbility {  ...  onWindowStageCreate(windowStage: window.WindowStage): void {    ...    windowStage.getMainWindow((err: BusinessError, data) => {      ...      windowClass = data;      // 获取UIContext实例      let uiContext: UIContext = windowClass.getUIContext();      // 获取UIObserver实例      let uiObserver: UIObserver = uiContext.getUIObserver();      // 注册DevNavigation的状态监听.      uiObserver.on('navDestinationUpdate', (info) => {        // NavDestinationState.ON_SHOWN = 0, NavDestinationState.ON_HIDE = 1        if (info.state == 0) {          // NavDestination组件显示时操作          console.info('page ON_SHOWN: ' + info.name.toString());        } else if (info.state === 1) {          // NavDestination组件隐藏时操作          console.info('page ON_HIDE' + info.name.toString());        } else {          // NavDestination组件其他操作          console.info('page state: ' + info.state);        }      });    });  }}

export function registerInterception() {  RouterManager.setInterception({    willShow: (from: NavDestinationContext | 'navBar', to: NavDestinationContext | 'navBar',      operation: NavigationOperation, animated: boolean) => {      if (typeof to === 'string') {        console.log('target page is navigation home');        return;      }      if (typeof from === 'string') {        console.log('target page is navigation home');        return;      }      // redirect target page.Change pageTwo to pageOne.      let target: NavDestinationContext = to as NavDestinationContext;      let srcPage: NavDestinationContext = from as NavDestinationContext;      console.log('==== setInterception target.pathInfo.name = ' + target.pathInfo.name);      if (target.pathInfo.name === 'MainPage' && srcPage.pathInfo.name === 'LoginPage') {        RouterManager.pushPath('LoginPage', srcPage.pathInfo.param, srcPage.pathInfo.onPop, true);        let confirmDialogData = new ConfirmDialogData();        confirmDialogData.onCancelClick = () => {          RouterManager.popWithoutParam(false);        }        confirmDialogData.onConfirmClick = () => {          RouterManager.popWithoutParam(true);          RouterManager.popWithoutParam(true);        }        RouterManager.pushPath('confirmDialog', confirmDialogData, () => {        }, false)      }    },    didShow: (from: NavDestinationContext | 'navBar', to: NavDestinationContext | 'navBar',      operation: NavigationOperation, isAnimated: boolean) => {    },    modeChange: (mode: NavigationMode) => {    }  });}

let localStorageLoginPage: LocalStorage = new LocalStorage();localStorageLoginPage.setOrCreate('userName', '');
@Componentexport struct LoginPageView {  @LocalStorageLink('userName') userName: string = '';  @State initUserName: string = '';
  build() {    NavDestination() {      TextInput({ placeholder: 'User Name', text: this.initUserName })        .onChange((value: string) => {          this.userName = value;        })        .width('80%')    }
    .hideTitleBar(true)    .onReady((navDestinationContext) => {      this.loginParam = navDestinationContext.pathInfo.param as LoginParamInHAR;      // 判断页面初始输入框初始阶段显示的指是来自传参还是localStorage      if (this.userName === '') {        this.initUserName = this.loginParam.userName === 'not login' ? '' : this.loginParam.userName;      } else {        this.initUserName = this.userName;      }    })  }}
@Builderexport function getLoginPage(): void {  LoginPageView({}, localStorageLoginPage);}

{  "module" : {    ...    "routerMap": "$profile:router_map"  }}

{  "routerMap": [    {      "name": "MainPage",      "pageSourceFile": "src/main/ets/components/mainpage/MainPage.ets",      "buildFunction": "getMainPageRouterMap",      "data": {        "description" : "this is mainPage"      }    },    {      "name": "PersonDetail",      "pageSourceFile": "src/main/ets/components/mainpage/PersonDetail.ets",      "buildFunction": "getPersonDetailRouterMap",      "data": {        "description" : "this is PersonDetailPage"      }    }  ]}

@Entry@Componentstruct IndexRouterMap {  @Provide('pageInfo') pageStack: NavPathStack = new NavPathStack();
  build() {    Navigation(this.pageStack) {      ...    }    .onAppear(() => {      this.pageStack.pushPathByName('MainPage', null, false);    })    .hideNavBar(true)  }}

@Entry@Componentstruct IndexRouterMap {  private pageStack: NavPathStack = new NavPathStack();
  aboutToAppear(): void {    RouterManager.createNavPathStack(this.pageStack);    ...  }
  build() {    Navigation(this.pageStack) {      ...    }    .onAppear(() => {      RouterManager.pushPath('MainPage', null, () => {}, false);    })    .hideNavBar(true)  }}

@Componentexport struct MainPage {  ...  build() {    NavDestination() {      ...    }    .hideTitleBar(true)    .onReady(navDestinationContext => {      let config: RouteMapConfig | undefined = navDestinationContext.getConfigInRouteMap();      if (config) {        let value: string = config.data['description'];        ...      }    })  }}
@Builderexport function getMainPageRouterMap(): void {  MainPage();}

{  ...  "devDependencies": {    "@ohos/hypium": "1.0.19",    "@ohos/hamock": "1.0.1-rc2"  }}