学习笔记|HarmonyOS的页面间跳转

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.

前言

大家好，我又回来啦。这一星期的学习时间又到了。那我们在前几个星期讲的都是harmonyOS里的分布式能力，可能学起来会相对较难一点，那我们这一星期就找了个简单一点的来学，那这就是页面间的跳转了。虽然这和分布式能力毫无相关也比较简单，但也不是说明这就不重要了，在所有的应用中都基本涉及到了这一个能力，把这学好了，也可以为我们后面的应用开发打下一个非常良好的基础。

那现在就先开始我们这星期的西之旅吧!

[[424776]]

正文

说到页面跳转就不得不提到Ability，Ability是应用所具备能力的抽象，一个应用可以具备多种能力(即可以包含多个Ability)。Page Ability可以用于提供与用户交互的能力，一个Page可以由一个或多个AbilitySlice构成的，那AbilitySlice又是什么呢，AbilitySlice可以用于实现一个页面的逻辑。

创建工程

还是和往常一样，创建一个名为MyJump的手机应用。

一个page包含多个AbilitySlice

设置UI界面

在graphic目录下增加一个background_button的文件，这个文件可以用于我们按钮的背景的设置。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
  
  
  
  3.        ohos:shape="rectangle"> 
    4.   
  
  
  
  4.       
  
  
  
  5.         ohos:color="#007DFF"/> 
    6.   
  
  
  
  6.       
  
  
  
  7.         ohos:radius="100"/> 
    8.   
  
  
  
  8.  
    9.

接下来到layout目录下增加一个名为ability_second的文件。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    4.   
  
  
  
  4.     ohos:height="match_parent" 
    5.   
  
  
  
  5.     ohos:width="match_parent" 
    6.   
  
  
  
  6.     ohos:alignment="center" 
    7.   
  
  
  
  7.     ohos:orientation="vertical"> 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.       
  
  
  
  10.         ohos:height="match_content" 
    11.   
  
  
  
  11.         ohos:width="match_content" 
    12.   
  
  
  
  12.         ohos:id="$+id:text_second" 
    13.   
  
  
  
  13.         ohos:background_element="$graphic:background_ability_main" 
    14.   
  
  
  
  14.         ohos:layout_alignment="horizontal_center" 
    15.   
  
  
  
  15.         ohos:text="This is SecondAbility" 
    16.   
  
  
  
  16.         ohos:text_size="30vp"/> 
    17.   
  
  
  
  17.       
  
  
  
  18.         ohos:height="match_content" 
    19.   
  
  
  
  19.         ohos:width="match_parent" 
    20.   
  
  
  
  20.         ohos:id="$+id:button_second" 
    21.   
  
  
  
  21.         ohos:background_element="$graphic:background_button" 
    22.   
  
  
  
  22.         ohos:text="返回" 
    23.   
  
  
  
  23.         ohos:text_color="#FFFFFF" 
    24.   
  
  
  
  24.         ohos:text_size="19vp" 
    25.   
  
  
  
  25.         ohos:top_padding="8vp" 
    26.   
  
  
  
  26.         ohos:bottom_padding="8vp" 
    27.   
  
  
  
  27.         ohos:top_margin="20vp"/> 
    28.   
  
  
  
  28.  
    29.

跳转动作的实现

接下来我们就要在Slice目录下增加一个类，名为SecondAbilitySlice。

 
 
 
 
    
  
  
  
  
  1. package com.example.myjump.slice; 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. import com.example.myjump.ResourceTable; 
    4.   
  
  
  
  4. import ohos.aafwk.ability.Ability; 
    5.   
  
  
  
  5. import ohos.aafwk.content.Intent; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. public class SecondAbilitySlice extends AbilitySlice { 
    8.   
  
  
  
  8.     @Override 
    9.   
  
  
  
  9.     protected void onStart(Intent intent) { 
    10.   
  
  
  
  10.         super.onStart(intent); 
    11.   
  
  
  
  11.         super.setUIContent(ResourceTable.Layout_ability_second); 
    12.   
  
  
  
  12.     } 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.     @Override 
    15.   
  
  
  
  15.     protected void onActive() { 
    16.   
  
  
  
  16.         super.onActive(); 
    17.   
  
  
  
  17.     } 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.     @Override 
    20.   
  
  
  
  20.     protected void onForeground(Intent intent) { 
    21.   
  
  
  
  21.         super.onForeground(intent); 
    22.   
  
  
  
  22.     } 
    23.   
  
  
  
  23. } 
    24.

接下来是MainAbilitySlice里编写代码，使得点击按钮能跳转到SecondAbilitySlice。

 
 
 
 
    
  
  
  
  
  1. Button buttonsecond = (Button)findComponentById(ResourceTable.Id_page1); 
    2.   
  
  
  
  2.    buttonsecond.setClickedListener(new Component.ClickedListener() { 
    3.   
  
  
  
  3.        @Override 
    4.   
  
  
  
  4.        public void onClick(Component component) { 
    5.   
  
  
  
  5.            Intent intent1 = new Intent(); 
    6.   
  
  
  
  6.            present(new SecondAbilitySlice(),intent1); //跳转到其他页面 
    7.   
  
  
  
  7.        } 
    8.   
  
  
  
  8.    }); 
    9.

那跳转到了SecondAbilitySlice，总要有一个按钮可以跳转回原来的页面吧，那我们接下来就编写代码，使得点击按钮可以销毁当前页面，返回MainAbilitySlice。

 
 
 
 
    
  
  
  
  
  1. Button button = (Button)findComponentById(ResourceTable.Id_button_second); 
    2.   
  
  
  
  2.      button.setClickedListener(new Component.ClickedListener() { 
    3.   
  
  
  
  3.          @Override 
    4.   
  
  
  
  4.          public void onClick(Component component) { 
    5.   
  
  
  
  5.              terminate(); //销毁当前页面 
    6.   
  
  
  
  6.          } 
    7.   
  
  
  
  7.      }); 
    8.

那有的人就说了，这个页面的数据也想带到那个页面应该怎么办呢。没事不慌，问题不大。接下来我们就来解决携带数据的问题。

我们可以在跳转动作执行之前，将数据以键值对的形式储存到网络中(intent)，让其带到另外一个页面。

 
 
 
 
    
  
  
  
  
  1. intent1.setParam("key","the ability is same!"); //将数据储存到intent中，让其以形参的形式传到另外一个页面 
    2.

然后在SecondAbilitySlice中先定义一个输出控制台，用于输出intent中携带的数据，然后在onStart里输出对应的数据。

 
 
 
 
    
  
  
  
  
  1. HiLog.info(TAG, intent.getStringParam("key")); //用于输出intent中携带的key对应的数据 
    2.

那怎么将销毁的页面的数据往回带呢，是不是还是用相同的方法呢。那方法也挺相识的，也是将数据写到intent中，然后调用setResult函数，然后将intent传到该函数里面。在点击函数里的代码如下：

 
 
 
 
    
  
  
  
  
  1. Intent intent1 = new Intent(); 
    2.   
  
  
  
  2.            intent1.setParam("second","我是SecondAbility!"); 
    3.   
  
  
  
  3.            setResult(intent1); 
    4.   
  
  
  
  4.            terminate(); //销毁当前页面 
    5.

那这个setResult()函数有什么用呢，这个函数调用之后呢，在MainAbilitySlice里就会调用onResult()函数，同时我们应该将页面跳转所用到的present()函数改为presentForResult()函数，在这个函数里面多了一个请求码的参数，请求码是用于标识某一个请求的，也就是用来区分是哪个页面销毁页面之后返回的，请求码是一个非负的整数，我们就定义请求码为0，然后调用presentForResult函数。

 
 
 
 
    
  
  
  
  
  1. presentForResult(new SecondAbilitySlice(),intent1, request_code); //跳转到其他页面 
    2.

在onResult()函数中，会传来两个参数，一个就是网络resultIntent，另外一个就是请求码requestCode，这个请求码就是用来区分是哪个页面销毁之后返回来的。例如我们刚刚在用presentForResult跳转到SecondAbilitySlice时用的请求码就为0，那从SecondAbilitySlice返回的请求码就是0。那onResult怎么重写呢，代码如下：

 
 
 
 
    
  
  
  
  
  1. @Override 
    2.   
  
  
  
  2.    protected void onResult(int requestCode, Intent resultIntent) { 
    3.   
  
  
  
  3.        super.onResult(requestCode, resultIntent); 
    4.   
  
  
  
  4.        //这个requestCode可以用来区分是哪个页面返回的数据，我们刚刚传递的请求码为0，那从SecondAbilitySlice返回的请求码就为0 
    5.   
  
  
  
  5.        if(resultIntent != null && requestCode == request_code) { 
    6.   
  
  
  
  6.            HiLog.info(TAG, resultIntent.getStringParam("second")); 
    7.   
  
  
  
  7.        } 
    8.   
  
  
  
  8.    } 
    9.

那再次运行程序，和刚刚程序的区别就是在输出台会输出下面两句话：

第一句话是在MainAbilitySlice点击按钮跳转到SecondAbilitySlice时，在SecondAbilitySlice输出的，另外一句是在SecondAbilitySlice点击返回，在MainAbilitySlice输出的。

一个page包含一个AbilitySlice

在com.example.myjump目录下新建一个page ability，命名为ThirdAbility。

在ability_third设置界面 

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    4.   
  
  
  
  4.     ohos:height="match_parent" 
    5.   
  
  
  
  5.     ohos:width="match_parent" 
    6.   
  
  
  
  6.     ohos:alignment="center" 
    7.   
  
  
  
  7.     ohos:orientation="vertical"> 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.       
  
  
  
  10.         ohos:height="match_content" 
    11.   
  
  
  
  11.         ohos:width="match_content" 
    12.   
  
  
  
  12.         ohos:id="$+id:text_third" 
    13.   
  
  
  
  13.         ohos:background_element="$graphic:background_ability_third" 
    14.   
  
  
  
  14.         ohos:layout_alignment="horizontal_center" 
    15.   
  
  
  
  15.         ohos:text="This is ThirdAbility" 
    16.   
  
  
  
  16.         ohos:text_size="30vp"/> 
    17.   
  
  
  
  17.       
  
  
  
  18.         ohos:height="match_content" 
    19.   
  
  
  
  19.         ohos:width="match_parent" 
    20.   
  
  
  
  20.         ohos:id="$+id:button_third" 
    21.   
  
  
  
  21.         ohos:background_element="$graphic:background_button" 
    22.   
  
  
  
  22.         ohos:text="返回" 
    23.   
  
  
  
  23.         ohos:text_color="#FFFFFF" 
    24.   
  
  
  
  24.         ohos:text_size="19vp" 
    25.   
  
  
  
  25.         ohos:top_padding="8vp" 
    26.   
  
  
  
  26.         ohos:bottom_padding="8vp" 
    27.   
  
  
  
  27.         ohos:top_margin="20vp"/> 
    28.   
  
  
  
  28.  
    29.

编写跳转动作

在MainAbilitySlice编写代码，完成点击按钮跳转到ThirdAbilitySlice去。

先构建一个Intent.OperationBuilder实例，然后链式调用withDeviceId、withBundleName、withAbilityName、build。

 
 
 
 
    
  
  
  
  
  1. Button buttonthird = (Button)findComponentById(ResourceTable.Id_page2); 
    2.   
  
  
  
  2.         buttonthird.setClickedListener(new Component.ClickedListener() { 
    3.   
  
  
  
  3.             @Override 
    4.   
  
  
  
  4.             public void onClick(Component component) { 
    5.   
  
  
  
  5.                 Intent intent1 = new Intent(); 
    6.   
  
  
  
  6.                 Operation operation = new Intent.OperationBuilder() //构建一个Intent.OperationBuilder实例 
    7.   
  
  
  
  7.                         .withDeviceId("") 
    8.   
  
  
  
  8.                         .withBundleName(getBundleName()) 
    9.   
  
  
  
  9.                         .withAbilityName(ThirdAbility.class.getName()) 
    10.   
  
  
  
  10.                         .build(); 
    11.   
  
  
  
  11.                 intent1.setOperation(operation); 
    12.   
  
  
  
  12.                 startAbility(intent1); 
    13.   
  
  
  
  13.             } 
    14.   
  
  
  
  14.         }); 
    15.

那同样的，我们还需要在ThirdAbilitySlice中编写代码，完成点击返回按钮销毁当前页面，销毁ThirdAbilitySlice，回到MainAbilitySlice。那有人就觉得用刚才那个terminate函数不就行了吗，那这就大错特错了，在一个Ability下的不同AbilitySlice就是这样子销毁页面的，但在不同的Ability下的话，需要调用terminateAbility函数，那我们就在点击事件中去调用这个函数。

 
 
 
 
    
  
  
  
  
  1. Button button = (Button)findComponentById(ResourceTable.Id_button_third); 
    2.   
  
  
  
  2.   button.setClickedListener(new Component.ClickedListener() { 
    3.   
  
  
  
  3.       @Override 
    4.   
  
  
  
  4.       public void onClick(Component component) { 
    5.   
  
  
  
  5.           terminateAbility(); 
    6.   
  
  
  
  6.       } 
    7.   
  
  
  
  7.   }); 
    8.

运行一下查看结果。

解决携带数据的问题

首先怎么把MainAbilitySlice的数据带到ThirdAbilitySlice呢，还是和刚刚是相同的，把数据以键值对的形式写到intent中，而且还是用相同的方法setParam。

 
 
 
 
    
  
  
  
  
  1. intent1.setParam("key","the ability is different!"); 
    2.

接下来还是相同的，在ThirdAbilitySlice里面定义一个输出控制台，然后把intent携带的数据在onStart输出出来。

相似的，我们接下来还是实现怎么销毁页面之后把数据也带到MainAbility。那我们还是仍然把数据写到intent中，然后调用getAbility().setResult()，这个函数里面有两个参数，第二个就是那个intent，第一个是一个响应码，这个响应码是用于标识某一次响应的，作用也和刚刚的标识码是相识的。这里我们就定义一个响应码为1，然后调用该函数。最后调用terminAbility函数来实现页面的销毁。

 
 
 
 
    
  
  
  
  
  1. HiLog.info(TAG, intent.getStringParam("key")); //用于输出intent中携带的key对应的数据 
    2.   
  
  
  
  2.       Button button = (Button)findComponentById(ResourceTable.Id_button_third); 
    3.   
  
  
  
  3.       button.setClickedListener(new Component.ClickedListener() { 
    4.   
  
  
  
  4.           @Override 
    5.   
  
  
  
  5.           public void onClick(Component component) { 
    6.   
  
  
  
  6.               Intent intent1 = new Intent(); 
    7.   
  
  
  
  7.               intent1.setParam("third","我是从ThirdAbility来的!"); 
    8.   
  
  
  
  8.               getAbility().setResult(resultCode, intent1); 
    9.   
  
  
  
  9.               terminateAbility(); 
    10.   
  
  
  
  10.           } 
    11.   
  
  
  
  11.       }); 
    12.

这样子我们就完成了页面的销毁工作了，下面我们需要在MainAbilitySlice来接受页面销毁后带来的数据。同样的还是把startAbility()改为startAbilityForResult()，然后在参数里面多加一个响应码。然后再重写onAbilityResult函数，当页面销毁之后，会自动调用该函数，那我们就可以在这个函数里面接收数据了。在该函数中会有三个参数，第一个参数是请求码，也就是我们最开始在MainAbilitySlice里跳转到ThirdAbilitySlice时的参数，第二个是一个响应码，也是我们刚刚在getAbility().setResult()中设置的参数，最后一个就是那个intent了，数据也是在这个里面的。

 
 
 
 
    
  
  
  
  
  1. @Override 
    2.   
  
  
  
  2.   protected void onAbilityResult(int requestCode, int resultCode, Intent resultData) { 
    3.   
  
  
  
  3.       super.onAbilityResult(requestCode, resultCode, resultData); 
    4.   
  
  
  
  4.       if (requestCode == request_code && resultCode == result_code && resultData != null) { 
    5.   
  
  
  
  5.           HiLog.info(TAG, resultData.getStringParam("third")); 
    6.   
  
  
  
  6.       } 
    7.   
  
  
  
  7.   } 
    8.

那就让我们来看看运行的效果吧!

第一句话是点击“jump to ThirdAbility”按钮时跳转到ThirdAbilitySlice页面输出的，另外一句是点击返回按钮销毁页面回到MainAbilitySlice输出的。

结语

源码我会放到附件中的，有需求的可以自行下载自行学习，大家有什么看不懂的地方可以私信问我或者对照源码进行学习。

https://harmonyos./resource/1251

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.

网站名称：学习笔记|HarmonyOS的页面间跳转
网页链接：http://www.shufengxianlan.com/qtweb/news48/347848.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

营销型网站建设知识

分类信息网

南充服务器托管　　 　广安网站制作公司　　 　邛崃做网站　　 　卖友情链接　　 　网站制作　　 　木包装箱　　 　app软件开发　　 　网站定制　　 　眉山电信机房　　 　成都网站营销　　 　芦山网站建设　　 　成都网站托管　　 　成都圣月窗帘　　 　微商城开发　　 　德昌麦琪建站　　 　定制网站　　 　3D立体画　　 　php主机　　 　重庆做网站　　 　温江电信机房