超超超简单的HarmonyOS入门应用——页面跳转——笔记（1）

一、页面跳转概论

页面跳转这个应用主要是用于给用户点击一个按钮然后，页面从第一个页面跳转到第二个页面。
我们常见的应用有：当我们逛淘宝的时候，看到一个自己心仪的商品，点击这个商品图片或者商品名字，即可跳转到商品购买页面，这主要也是页面的跳转

二、页面跳转步骤

实现步骤

1. 编写第一个页面（文本 + 按钮）
2. 编写第二个页面（文本）
3. 给按钮添加一个跳转

三、实现页面跳转需要的准备

1. DevEco Studio 2.1.0.501 x64（下载地址：https://developer.harmonyos.com/cn/develop/deveco-studio#download）
2. JAVA基础（编程所需的语言是JAVA语言，不熟悉或者不懂JAVA基础的会比较难受）
3. 华为账号（上华为官网注册一个即可，编译器所用到的华为设备模拟器需要登录华为账号才能使用）

四、页面跳转布局编写方法

在鸿蒙UI中，有两种编写布局的方式：

1. XML文件 XML文件里面有不同标签，不同标签表示不同的内容（例如/< Text > 文本、 < Image >图片、 < Button >按钮）
2. JAVA代码 用不同的对象表示要展示不同的内容（例如Text对象表示文本、 Image对象表示图片、 Button对象表示按钮）

在实现页面跳转的代码实现时候，第一个页面将会使用XML文件来实现，而第二个页面则使用JAVA代码来实现

五、页面跳转具体实现

1、创建鸿蒙项目

选择Create HarmonyOS Project

然后选择第二个Empty Ability接着点击Next

该应用主要应用在手机上，所以选择Phone

点击Finish等待几秒生成相关文件即可

2、通过编写XML文件实现第一个页面

在生成的文件中，已经默认生成了一个页面MainAbliity
因此，想要修改该页面，只需要修改对应的XML文件即可

原本XML文件只有一个< Text >标签，因此我们只要在修改< Text >标签里面的文本信息从HelloWorld修改成“第一个页面”即可

在这下面再写一个Button，在该页面增加一个按钮

   <Button
    <Button
        ohos:id="$+id:but1"    <!--给这个按钮起一个名字-->
        ohos:height="match_content"
        ohos:width="match_content"  <!--高和宽都写成match_content， 表示包裹内容，表示按钮里面的文字有多少，按钮就有多大-->
        ohos:background_element="red"   <!--按钮颜色-->
        ohos:text_size="40fp"   <!--文本大小-->
        ohos:text="点我"/>    <!--按钮文本信息-->

白嫖代码的童鞋注意要把注释去掉，不然会报错喔，这是只是为了方便解释（建议自己敲一遍）！！！

这时候我们运行试一试，点击Tools


随便选择一台你喜欢的手机（这里我用的是P40）

运行即可

这样第一个页面就大功告成了！！！！

3、通过JAVA编写第二个页面

首先新建一个页面（JAVA）


因为是要用JAVA编写，所以我们需要把第二个页面的XML文件删除

在第二个页面的切片编写代码实现第二个页面

package com.example.test_02.slice;

import com.example.test_02.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Text;
import ohos.agp.utils.Color;

public class SecondAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //super.setUIContent(ResourceTable.Layout_ability_second);

        //1.创建布局对象
        DirectionalLayout dl = new DirectionalLayout(this);

        //2.创建文本对象
        Text t = new Text(this);

        //设置文本内容
        t.setText("第二个页面");

        //设置文本文字大小
        t.setTextSize(50);

        //设置文本文字颜色
        t.setTextColor(Color.YELLOW);

        //3.把文本信息添加到布局当中
        dl.addComponent(t);

        //4.把布局添加到子页面当中
        super.setUIContent(dl);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

4、给第一个页面的按钮添加跳转

在MainAbilitySlice编写跳转的代码

package com.example.test_02.slice;

import com.example.test_02.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    Button btu;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1.根据ID找按钮
        btu = (Button) findComponentById(ResourceTable.Id_but1);

        //2.给按钮添加一个点击事件
        //只有给按钮田间一个点击事件，当鼠标点击后才会执行相对应的代码
        //鼠标点击了这个按钮之后，就会执行本类中的onClick方法
        btu.setClickedListener(this);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        //鼠标点击后要执行的代码
        //跳转页面

        //进行判断
        if(component == btu){
            //只有点击btu这个按钮才跳转

            //跳转到哪个页面
            Intent i = new Intent();
            //包含了要跳转的页面信息
            Operation operation = new Intent.OperationBuilder()
                    .withDeviceId("")//跳转到哪个页面上，如果一个没有内容的字符串，则表示跳转本机
                    .withBundleName("com.example.test_02")//跳转到哪个应用上
                    .withAbilityName("com.example.test_02.SecondAbility")//要跳转的页面
                    .build();


            //把打包后的operation设置到意图中
            i.setOperation(operation);

            //跳转页面
            startAbility(i);
        }
    }
}

编写完跳转代码之后，运行代码，即可实现最简单的跳转页面功能