[HarmonyOS] page和abilitySlice的跳转及其他_同一page中abilityslice之间跳转

人性化的细节

1.HarmonyOS特别人性化之处在于：app里面的文字尽量都多准备一点语言，到时候就可以根据系统语言切换。(此坑后面细说)

page和abilitySlice

鸿蒙定义了很多花里胡哨的东西，其中我接触到的主要是page和abilitySlice。

在我的世界观中:

1.一个应用有很多功能，其中一些是有ui界面的，一些则没有。有ui界面的功能叫做page ability，简称page，私以为这个简称会带来误解。其他的两个暂时不管。

2.一个功能可能有多个ui界面。比如登陆功能有loading界面，登陆成功界面。很可能点击一个界面的按钮就跳转到另一个界面。一个ui界面就叫做一个abilitySlice.

3.一个功能(即page)有一个默认界面，就是进入它之后显示的界面Slice。

4.总而言之，一个应用有很多功能(page)， 一个功能有很多界面(Slice)

Slice

1.abilitySlice其实和page没什么关系，Slice只是一种页面布局，即它可以在前端完成，不需要什么逻辑。一个布局可以被page使用，仅此而已。

2.新建一个Slice，有两种方法，一种是xml描述，一种是代码描述。

在entry\src\main\com.example.myapplication\slice里面新建一个类，比如xxAbilitySlice，表示是xx这个功能的一个界面。

如果用代码描述，那么直接在类里面描述。

官网给的例子是:

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

        // 声明布局
        DependentLayout myLayout = new DependentLayout(this);

        // 设置布局宽高
        myLayout.setWidth(LayoutConfig.MATCH_PARENT);
        myLayout.setHeight(LayoutConfig.MATCH_PARENT);

        // 设置布局背景为白色
        ShapeElement background = new ShapeElement();
        background.setRgbColor(new RgbColor(255, 255, 255));
        myLayout.setBackground(background);

        // 创建一个文本
        Text text = new Text(this);
        text.setText("Hi there");
        text.setWidth(LayoutConfig.MATCH_PARENT);
        text.setTextSize(100);
        text.setTextColor(Color.BLACK);

        // 设置文本的布局
        DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig(LayoutConfig.MATCH_CONTENT, LayoutConfig.MATCH_CONTENT);
        textConfig.addRule(LayoutConfig.CENTER_IN_PARENT);
        text.setLayoutConfig(textConfig);
        myLayout.addComponent(text);
        super.setUIContent(myLayout);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

如果用xml描述，那么在resourses/base/layout里面新建一个xx.xml, 然后在graphic.xml里面添加一些按钮样式。官网说的很清楚。

此时ability_main.xml里面有一个文本和三个按钮。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="$string:mainability_HelloWorld"
        ohos:text_size="40vp"
        />

    <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Next"
        ohos:text_size="19fp"
        ohos:text_color="#FFFFFF"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:right_padding="70vp"
        ohos:left_padding="70vp"
        ohos:center_in_parent="true"
        ohos:below="$id:text"
        ohos:margin="10vp"
        ohos:background_element="$graphic:background_button"/>

    <Button
        ohos:id="$+id:button2"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Next"
        ohos:text_size="19fp"
        ohos:text_color="#FFFFFF"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:right_padding="70vp"
        ohos:left_padding="70vp"
        ohos:center_in_parent="true"
        ohos:below="$id:button"
        ohos:margin="10vp"
        ohos:background_element="$graphic:background_button"/>

    <Button
        ohos:id="$+id:button3"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Next"
        ohos:text_size="19fp"
        ohos:text_color="#FFFFFF"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:right_padding="70vp"
        ohos:left_padding="70vp"
        ohos:center_in_parent="true"
        ohos:below="$id:button2"
        ohos:margin="10vp"
        ohos:background_element="$graphic:background_button"/>
</DirectionalLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

我修改了 一下id和below，其他全部没有改

3.绑定按钮，点击第一个按钮跳转到同page的不同slice

点击第二个按钮跳转到不同page的默认slice

点击第三个按钮跳转到不同page的指定slice

下面是我的MainAbilitySlice

public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Button button = (Button) findComponentById(ResourceTable.Id_button);
        // 点击第一个按钮跳转至第二个slice
        button.setClickedListener(listener -> present(new SecondAbilitySlice(), new Intent()));

        //点击第二个按钮跳转到第二个page
        Button button2 = (Button) findComponentById(ResourceTable.Id_button2);
        Intent intent2 = new Intent();

        // 通过Intent中的OperationBuilder类构造operation对象，指定设备标识（空串表示当前设备）、应用包名、Ability名称
        Operation operation = new Intent.OperationBuilder()
                .withDeviceId("")
                .withBundleName("com.example.myapplication")
                .withAbilityName("com.example.myapplication.FooAbility")
                .build();

        // 把operation设置到intent中
        intent2.setOperation(operation);
        button2.setClickedListener(listener -> startAbility(intent2));

        //点击第三个按钮跳转到第二个page的第二个slice
        Button button3 = (Button) findComponentById(ResourceTable.Id_button3);
        Intent intent3 = new Intent();

        // 通过Intent中的OperationBuilder类构造operation对象，指定设备标识（空串表示当前设备）、应用包名、Ability名称
        Operation operation3 = new Intent.OperationBuilder()
                .withDeviceId("")
                .withBundleName("com.example.myapplication")
                .withAbilityName("com.example.myapplication.FooAbility")
                .withAction("action.sec")
                .build();

        // 把operation设置到intent中
        intent3.setOperation(operation3);
        button3.setClickedListener(listener -> startAbility(intent3));
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

注意点

1.Button button = (Button) findComponentById(ResourceTable.Id_button);

这句话把一个按钮绑定到了xml的按钮上。很坑的地方在于，鸿蒙的下划线是有含义的，因此id_button的意思是id为button的按钮。

2.绑定到同page，不同slice，只需要用prensent函数即可。

3.绑定到不同page. 需要对intent进行更加详细的配置。主要是withBundleName和withAbilityName。

如果希望跳转到非默认的slice，需要设置action

而那些name和action全部是新建page的时候指定的

Page

page可以有很多个slice。而且不同page可以共用一个slice。比如一个应用有斗地主功能和510K功能，那么斗地主和510K在登陆界面是一样的，它们就可以共用一个slice(感觉这样不太好，尽量不要这样用了)

新建page的方法是：在java/com.example.myapplication目录下，新建一个类，叫做xxAbility

在类里面重载onStart函数。声明需要哪些slice，如果别的page想要跳到该page的slice里面，只有在onStart里面声明的才可以跳。

比如我的MainAbility用了两个abilitySlice，但是不会有人跳过来，因此指定默认的abilitySlice即可：

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(MainAbilitySlice.class.getName());
    }
}
1
2
3
4
5
6
7

比如我的FooAbility用到了两个abilitySlice，而且都可能被跳过来，因此必须在onStart里面指定

public class FooAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(ThirdAbilitySlice.class.getName());
        super.addActionRoute("action.sec", ForthAbilitySlice.class.getName());
    }
}
1
2
3
4
5
6
7
8

setMainRoute这个就是指定默认的slice

addActionRoute这个就是添加别的slice

此时一个page已经新建好，但是需要在config.json里面注册

"abilities": [
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home",
              "action.sec"
            ]
          }
        ],
        "orientation": "unspecified",
        "name": "com.example.myapplication.MainAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "$string:entry_MainAbility",
        "type": "page",
        "launchType": "standard"
      },
      {
        "skills": [
          {
            "actions": [
              "action.system.home",
              "action.sec"
            ]
          }
        ],
        "icon": "$media:icon",
        "name": "com.example.myapplication.FooAbility",
        "description": "$string:mainability_description",
        "label": "$string:entry_FooAbility",
        "type": "page",
        "launchType": "standard"
      }
    ]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

第一个page是自带的，第二个page是我新建的。

可以看出，它们其实是ability，但是类型是page，即page ability。简称page

注意到$string:xxx都是需要在base/element/string.json里面指定值的。

我修改的地方是label: 这个会显示给用户看

actions: 这个指定了page里面有几个action，每个action可以绑定到一个slice里面，在onStart里面绑定。

总结

需要改的地方就是: slice和page以及在config.json里面注册。

config.json里面比较重要的是name, actions, label这些。其他随便填即可。