您的当前位置:首页正文

ArkTS实现页面之间的跳转

2024-11-25 来源:个人技术集锦

说些废话

    官方文档:
    因为没有OpenHarmony的设备,就建的HarmonyOS的工程了。。
    虽然同一个Ability的Slice(从基于java开发过来方便理解就这么叫了)可以用router进行跳转,但是测试的过程中好像是出现了两个Ability的话,他们是各自维护各自的router,back()可以但是数据又传不通,所以我就还是选择带意图的转了,跟ajax也像,统一的话写的也舒服点。
    用java写的时候,如果要跳转的Ability有多个Slice,要指定跳到哪个Slice的时候还需要添加路由并配置到config.json里,这个就方便多了,直接写url就行了,噢耶\(^o^)/
    这个小demo是这样的,上一页就是返回跳转过来的页面,下一页就是这个顺序:MainAbility的index页面->MainAbility的show页面->PageAbility的index页面,另外点击中间的文字可以看已经跳了几下了。

开源代码

    

环境

    HUAWEI MatePad Pro 10.8英寸 2019款 HarmonyOS3.0.0.163
    DevEco Studio 3.1 Canary1
    SDK 8
    我看的《PageAbility开发指导 》更新时间为2022-11-04 14:03

代码

MainAbility

index.ets

import hilog from '@ohos.hilog';
import featureAbility from '@ohos.ability.featureAbility'
@Entry
@Component
struct Index {
  //记录一共跳转了多少次了
  @State jumpNum: number = 0
  //记录上一页的abilityName
  @State preAbilityName: string = ''
  //记录上一页的sliceName
  @State preSliceName: string = ''
  //页面展示内容
  @State text_content: string = 'MainAbility index'
  //上一页按钮内容
  @State button_content_pre_page: string = '上一页'
  //下一页按钮内容
  @State button_content_next_page: string = '下一页'

  onPageShow(){
    hilog.isLoggable(0x00001, 'MainAbility\\index.ets', hilog.LogLevel.INFO);
    hilog.info(0x00001, 'MainAbility\\index.ets', '%{public}s', 'onPageShow');
    //因为获取这个数据如果只放在点击事件中,得点两次才能抓到数据,所以干脆就在这里先拿一次算了
    //搞不清原因,我也没人问
    featureAbility.getWant((err, data) => this.getData(err, data))
  }

  getData(err, data){
    let pre_ability_name = data.parameters['preAbilityName']
    let pre_slice_name = data.parameters['preSliceName']
    let jump_num = data.parameters['jumpNum']
    if (pre_ability_name != undefined) {
      //如果不等于undefined,代表当前页面不是跳转过来的,是应用初始打开的,就不用理他。
      this.preAbilityName = pre_ability_name
      this.preSliceName = pre_slice_name
      this.jumpNum = jump_num
    }
  }

  build() {
    //个人理解,
    //row表示定一个在屏幕中间(相当于手机上下对折)的行,然后按给的宽高扩大
    //column表示定一个在屏幕中间(相当于手机左右对折)的列,然后按给的宽高扩大
    Row() {
      Column(){
        //伪第一行,实际上这是这个列的文字
        //展示当前页面的文字
        Text(this.text_content)
          .textAlign(TextAlign.Center)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .width('100%')
          .onClick(() => {
            //先获得数据
            featureAbility.getWant((err, data) => this.getData(err, data))
            //在展示弹窗
            AlertDialog.show({
              title:'查看跳转次数',
              message:"jumpNum = " + this.jumpNum,
              confirm:{
                value:'确认',
                fontColor:$r('sys.color.ohos_id_color_badge_red'),
                action:() => {
                  console.info('点击了确定')
                }
              }
            })
          })
        //伪第二行,一行里放两个各占一半的列,分别放一个按钮
        Row(){
          Column(){
            //上一页的按钮
            Button(this.button_content_pre_page)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .onClick((e) => {
                //先拿到上个页面传过来的值(如果没有就代表现在是开始页面
                featureAbility.getWant((err, data) => this.getData(err, data))
                //判断是不是最初始的页面,如果是最初始的页面的话就没有上一页
                if(this.jumpNum != 0){
                  //拿完数据,开始跳转
                  featureAbility.startAbilityForResult({
                    want:{
                      deviceId:'',
                      bundleName:'com.openvalley.cyj.page',
                      abilityName:this.preAbilityName,
                      parameters:{
                        url:this.preSliceName,
                        preAbilityName:'com.openvalley.cyj.page.MainAbility',
                        preSliceName:'pages/index',
                        jumpNum: ++(this.jumpNum)
                      }
                    }
                  }, (err, data) => {

                  })
                }
              })
          }
          .width('50%')
          Column(){
            //下一页的按钮
            Button(this.button_content_next_page)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .onClick((e) => {
                //先拿到上个页面传过来的值(如果没有就代表现在是开始页面
                featureAbility.getWant((err, data) => this.getData(err, data))
                //拿完数据,开始跳转
                featureAbility.startAbilityForResult({
                  want:{
                    deviceId:'',
                    bundleName:'com.openvalley.cyj.page',
                    abilityName:'com.openvalley.cyj.page.MainAbility',
                    parameters:{
                      url:'pages/show',
                      preAbilityName:'com.openvalley.cyj.page.MainAbility',
                      preSliceName:'pages/index',
                      jumpNum: ++(this.jumpNum)
                    }
                  }
                }, (err, data) => {

                })
            })
          }
          .width('50%')
        }
        .width('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

show.ets

import hilog from '@ohos.hilog';
import featureAbility from '@ohos.ability.featureAbility';
@Entry
@Component
struct Show {
  //记录一共跳转了多少次了
  @State jumpNum: number = 0
  //记录上一页的abilityName
  @State preAbilityName: string = ''
  //记录上一页的sliceName
  @State preSliceName: string = ''
  //页面展示内容
  @State text_content: string = 'MainAbility show'
  //上一页按钮内容
  @State button_content_pre_page: string = '上一页'
  //下一页按钮内容
  @State button_content_next_page: string = '下一页'

  onPageShow(){
    hilog.isLoggable(0x00001, 'MainAbility\\show.ets', hilog.LogLevel.INFO);
    hilog.info(0x00001, 'MainAbility\\show.ets', '%{public}s', 'onCreate');
    //因为获取这个数据如果只放在点击事件中,得点两次才能抓到数据,所以干脆就在这里先拿一次算了
    featureAbility.getWant((err, data) => this.getData(err, data))
  }

  getData(err, data){
    let pre_ability_name = data.parameters['preAbilityName']
    let pre_slice_name = data.parameters['preSliceName']
    let jump_num = data.parameters['jumpNum']
    if (pre_ability_name != undefined) {
      //如果不等于undefined,代表当前页面不是跳转过来的,是应用初始打开的,就不用理他。
      this.preAbilityName = pre_ability_name
      this.preSliceName = pre_slice_name
      this.jumpNum = jump_num
    }
  }

  build() {
    Row() {
      Column(){
        //展示当前页面的文字
        Text(this.text_content)
          .textAlign(TextAlign.Center)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .width('100%')
          .onClick(() => {
            //先获得数据
            featureAbility.getWant((err, data) => this.getData(err, data))
            //在展示弹窗
            AlertDialog.show({
              title:'查看跳转次数',
              message:"jumpNum = " + this.jumpNum,
              confirm:{
                value:'确认',
                fontColor:$r('sys.color.ohos_id_color_badge_red'),
                action:() => {
                  console.info('点击了确定')
                }
              }
            })
          })
        Row(){
          Column(){
            //上一页的按钮
            Button(this.button_content_pre_page)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .onClick((e) => {
                //拿到数据
                featureAbility.getWant((err, data) => this.getData(err, data))
                //拿完数据,开始跳转
                featureAbility.startAbilityForResult({
                  want:{
                    deviceId:'',
                    bundleName:'com.openvalley.cyj.page',
                    abilityName:this.preAbilityName,
                    parameters:{
                      url:this.preSliceName,
                      preAbilityName:'com.openvalley.cyj.page.MainAbility',
                      preSliceName:'pages/show',
                      jumpNum: ++(this.jumpNum)
                    }
                  }
                }, (err, data) => {

                })
              })
          }
          .width('50%')
          Column(){
            //下一页的按钮
            Button(this.button_content_next_page)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .onClick((e) => {
                //拿数据
                featureAbility.getWant((err, data) => this.getData(err, data))
                //拿完数据,开始跳转
                featureAbility.startAbilityForResult({
                  want:{
                    deviceId:'',
                    bundleName:'com.openvalley.cyj.page',
                    abilityName:'com.openvalley.cyj.page.PageAbility',
                    parameters:{
                      url:'pages/index',
                      preAbilityName:'com.openvalley.cyj.page.MainAbility',
                      preSliceName:'pages/show',
                      jumpNum: ++(this.jumpNum)
                    }
                  }
                }, (err, data) => {

                })
              })
          }
          .width('50%')
        }
        .width('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

PageAblity

index.ets

import hilog from '@ohos.hilog';
import featureAbility from '@ohos.ability.featureAbility';
@Entry
@Component
struct Index {
  //记录一共跳转了多少次了
  @State jumpNum: number = 0
  //记录上一页的abilityName
  @State preAbilityName: string = ''
  //记录上一页的sliceName
  @State preSliceName: string = ''
  //页面展示内容
  @State text_content: string = 'PageAbility index'
  //上一页按钮内容
  @State button_content_pre_page: string = '上一页'
  //下一页按钮内容
  @State button_content_next_page: string = '下一页'

  onPageShow(){
    hilog.isLoggable(0x00001, 'PageAbility\\index.ets', hilog.LogLevel.INFO);
    hilog.info(0x00001, 'PageAbility\\index.ets', '%{public}s', 'onCreate');
    //因为获取这个数据如果只放在点击事件中,得点两次才能抓到数据,所以干脆就在这里先拿一次算了
    featureAbility.getWant((err, data) => this.getData(err, data))
  }

  getData(err, data){
    let pre_ability_name = data.parameters['preAbilityName']
    let pre_slice_name = data.parameters['preSliceName']
    let jump_num = data.parameters['jumpNum']
    if (pre_ability_name != undefined) {
      //如果不等于undefined,代表当前页面不是跳转过来的,是应用初始打开的,就不用理他。
      this.preAbilityName = pre_ability_name
      this.preSliceName = pre_slice_name
      this.jumpNum = jump_num
    }
  }

  build() {
    Row() {
      Column(){
        //展示当前页面的文字
        Text(this.text_content)
          .textAlign(TextAlign.Center)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .width('100%')//拿到数据看当前已经跳跃了的次数
          .onClick((e) => {
            //先获得数据
            featureAbility.getWant((err, data) => this.getData(err, data))
            //在展示弹窗
            AlertDialog.show({
              title:'查看跳转次数',
              message:"jumpNum = " + this.jumpNum,
              confirm:{
                value:'确认',
                fontColor:$r('sys.color.ohos_id_color_badge_red'),
                action:() => {
                  console.info('点击了确定')
                }
              }
            })
          })
        Row(){
          Column(){
            //上一页的按钮
            Button(this.button_content_pre_page)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .onClick((e) => {
                //先试探拿一下上个页面传过来的值
                //拿到数据
                featureAbility.getWant((err, data) => this.getData(err, data))
                //拿完数据,开始跳转
                featureAbility.startAbilityForResult({
                  want:{
                    deviceId:'',
                    bundleName:'com.openvalley.cyj.page',
                    abilityName:this.preAbilityName,
                    parameters:{
                      url:this.preSliceName,
                      preAbilityName:'com.openvalley.cyj.page.PageAbility',
                      preSliceName:'pages/index',
                      jumpNum: ++(this.jumpNum)
                    }
                  }
                }, (err, data) => {

                })
              })
          }
          .width('50%')
          Column(){
            //下一页的按钮
            Button(this.button_content_next_page)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .onClick((e) => {
                //拿数据
                featureAbility.getWant((err, data) => this.getData(err, data))
                //拿完数据,开始跳转
                featureAbility.startAbilityForResult({
                  want:{
                    deviceId:'',
                    bundleName:'com.openvalley.cyj.page',
                    abilityName:'com.openvalley.cyj.page.MainAbility',
                    parameters:{
                      url:'pages/index',
                      preAbilityName:'com.openvalley.cyj.page.PageAbility',
                      preSliceName:'pages/index',
                      jumpNum: ++(this.jumpNum)
                    }
                  }
                }, (err, data) => {

                })
              })
          }
          .width('50%')
        }
        .width('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

测试

项目结构

显示全文