花生_TL007

这个屌丝很懒，什么也没留下！

热门标签

鸿蒙HarmonyOS的初次使用––制作一登录页面，实现跳转(DevEcoStudio)_devecostudio登录页面

作者：花生_TL007 | 2024-03-18 21:22:05

踩

devecostudio登录页面

------用DevEcoStudio实现鸿蒙开发（制做登录页面，跑马灯，页面跳转，页面选择）

环境配置
- 创建java项目
- 运行模拟器
代码部署
运行结果
收尾

环境配置

创建java项目

根据以下图片过程，可以创建java项目，开始设计属于你的phone软件
在这里插入图片描述

加注：DES（DevEco Studio）支持分布式多端开发、分布式多端调测、多端模拟仿真和全方位的质量与安全保障。
鸿蒙系统是支持多款编程语言的，通过DES可以实现js开发，java开发，可以实现手机端上和TV等端口上的开发，借助DES,可以在开发过程中，实现及时反馈的效果（共屏操作），方便了程序的调试（当然了，也需要理解软件刚发布，存在卡顿的情况，一切都有待加强了）

本文章（本笔记）记录的是用Java开发phone软件(程序)。

运行模拟器

先登录你的华为账户，允许使用
选中TOOL，选中你说需要的模拟器，并启动
点击运行按钮，即可运行程序到模拟机

在这里插入图片描述

代码部署

java代码

（代码文件框架）
在这里插入图片描述

（提醒：有跑马灯，有登录界面的制作，选择页面的功能或页面跳转功能，具体如代码中所示，解析（理解）写在代码中的注释里，可以参考一下）

MainAbilitySlice的代码（slice文件夹下）

package com.etc.mysignin.slice;

import com.etc.mysignin.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.components.element.ShapeElement;


public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //跳转登录页面（首页面）
        super.setUIContent(ResourceTable.Layout_ability_main);

        //有跳转页面时，需要使用以下语句，获取跳转后的页面（笔记）
        //Component ld = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_ability_main,null,false);
        //Text text = (Text)ld.findComponentById(ResourceTable.Id_text_round);

        //无跳转页面，直接获取Text
        Text text = (Text)findComponentById(ResourceTable.Id_text_round);

        //将首页的语句实行跑马灯功能
        //设置跑马灯效果
        text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
        //启动跑马灯效果
        text.startAutoScrolling();
        //设置始终处于自动滚动状态
        text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);

        //不太理解的AbilitySlice, 后面依旧使用到此slice
        AbilitySlice slice = this;

        //点击登录按钮，改变状态,识别按钮
        Button button = (Button)findComponentById(ResourceTable.Id_enter_button);
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                //点击后获取数据
                TextField name =(TextField) findComponentById(ResourceTable.Id_name_text_field);
                String name_value = name.getText();  //  获取输入框的数据
                TextField password =(TextField) findComponentById(ResourceTable.Id_password_text_field);
                String  password_value = password.getText();  //  获取输入框的数据

                //将获取的数据进行判断是否正确
                if(name_value.equals("1981")&&password_value.equals("123")){
                    //账号密码正确
                    //点击后识别正确，跳转进入下个页面
                    button.setClickedListener(listener ->present(new FirstAbilitySlice(),new Intent()));
                }else {
                    //账号或密码错误，进行提醒
                    //显示错误提示的text       //错误提醒放置在name中
                    Text error_text = (Text) findComponentById(ResourceTable.Id_error_tip_text);
                    error_text.setVisibility(Component.VISIBLE);
                    //显示Textfield错误状态下的样式
                    ShapeElement errorElement = new ShapeElement(slice, ResourceTable.Graphic_background_ability_main);
                    name.setBackground(errorElement);   //设置name错误情况下的背景样式
                    name.setEnabled(true);     //ture表示还能被输入，false表示不能再输入
                    //失去焦点
                    name.clearFocus();
                }
            }
        });
    }

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

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

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
67
68
69
70
71
72
73
74
75
76
77

FirstAbilitySlice的代码（slice文件夹下）

package com.etc.mysignin.slice;

import com.etc.mysignin.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;

public class FirstAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_first);

        TabList tablist = (TabList) findComponentById(ResourceTable.Id_tab_list);
        TabList.Tab tabOne = tablist.new Tab(getContext());
        tabOne.setText("林丹");
        tablist.addTab(tabOne);

        //        tablist.selectTab(tabOne);  //选中此tab作为首页（此次用不到，另加在此处，作为笔记使用）

        TabList.Tab tabTwo = tablist.new Tab(getContext());
        tabTwo.setText("李宗伟");
        tablist.addTab(tabTwo);

        TabList.Tab tabThree = tablist.new Tab(getContext());
        tabThree.setText("盖德");
        tablist.addTab(tabThree);

        TabList.Tab tabFour = tablist.new Tab(getContext());
        tabFour.setText("陶菲克");
        tablist.addTab(tabFour);

        //使得标签栏的数据填满整栏
        tablist.setFixedMode(true);

//        //点击跳转第二个页面（笔记）
//        Button button = (Button) findComponentById(ResourceTable.Id_button);
//        button.setClickedListener(listener ->present(new SecondAbilitySlice(),new Intent()));
        
        AbilitySlice slice = this;
        //检测按钮点击事件，并接收数据到tab
        tablist.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {

                //当某个tab页可从未选中到选中的状态切换回调这个方法
                ComponentContainer container = (ComponentContainer) findComponentById(ResourceTable.Id_tab_container);

//                //弹出框测试（笔记）（可以一试）
//                //测试输出是否成功
//                new ToastDialog(getContext()).setText("今年东京奥运会冠军是"+tab.getText()).setAlignment(LayoutAlignment.CENTER).show();
				
				//根据tab接收的数据，匹配字符串，选择相应功能
                if(tab.getText().equals("林丹")){
                    container.removeAllComponents();
                    Component ld = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_yt_LD,null,false);
                    //获取参与跑马灯的数据
                    Text text = (Text)ld.findComponentById(ResourceTable.Id_text_information);
                    //设置跑马灯效果
                    text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
                    //启动跑马灯效果
                    text.startAutoScrolling();
                    //设置始终处于自动滚动状态
                    text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);

                    container.addComponent(ld);
                }else if(tab.getText().equals("李宗伟")){
                    container.removeAllComponents();
                    Component lzw = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_yt_LZW,null,false);
                    //以下四行设置跑马灯，滚动
                    Text text = (Text)lzw.findComponentById(ResourceTable.Id_text_information);
                    text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
                    text.startAutoScrolling();
                    text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
                    container.addComponent(lzw);
                }else if(tab.getText().equals("盖德")){
                    container.removeAllComponents();
                    Component gd = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_yt_GD,null,false);
                    //以下四行设置跑马灯，滚动
                    Text text = (Text)gd.findComponentById(ResourceTable.Id_text_information);
                    text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
                    text.startAutoScrolling();
                    text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
                    container.addComponent(gd);
                }else if(tab.getText().equals("陶菲克")){
                    container.removeAllComponents();
                    Component tfk = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_yt_TFK,null,false);
                    //以下四行设置跑马灯，滚动
                    Text text = (Text)tfk.findComponentById(ResourceTable.Id_text_information);
                    text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
                    text.startAutoScrolling();
                    text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
                    container.addComponent(tfk);
                }
            }

            @Override
            public void onUnselected(TabList.Tab tab) {

            }

            @Override
            public void onReselected(TabList.Tab tab) {

            }
        });
    }

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

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

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

MainAbility的代码（生成项目时自动生成）

package com.etc.mysignin;

import com.etc.mysignin.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;

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
8
9
10
11
12
13
14

MyApplication的代码（生成项目时自动生成）

package com.etc.mysignin;

import ohos.aafwk.ability.AbilityPackage;

public class MyApplication extends AbilityPackage {
    @Override
    public void onInitialize() {
        super.onInitialize();
    }
}

1
2
3
4
5
6
7
8
9
10
11

xml代码

(代码文件框架)
在这里插入图片描述

layout目录下的xml文件

ability_first.xml（layout目录下）
理解：TabList指的是实现一个标签选中的功能，具体实现功能如图所示，此页面布局处理即为了实现“页面选择功能”

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

    <TabList
        ohos:id="$+id:tab_list"
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:tab_length="63vp"
        ohos:text_size="25fp"
        ohos:text_alignment="center"
        ohos:orientation="horizontal"
        ohos:normal_text_color="#FF29F3F3"
        ohos:selected_text_color="#FF2BDD1B"
        ohos:selected_tab_indicator_color="#FFF5084B"
        ohos:scrollbar_background_color="#FF1A1ACA"
        ohos:selected_tab_indicator_height="2vp"
        ohos:tab_margin="10vp"
        />
    <Image
        ohos:id="$+id:imageContext"
        ohos:height="158vp"
        ohos:width="300vp"
        ohos:center_in_parent = "true"
        ohos:image_src="$media:M"
        ohos:scale_x="3"
        ohos:scale_y="3"
        />
    <DirectionalLayout
        ohos:id="$+id:tab_container"
        ohos:below="$id:tab_list"
        ohos:height="match_parent"
        ohos:width="match_parent"
        />

<!--    <Button-->
<!--        ohos:height = "match_content"-->
<!--        ohos:width  ="match_content"-->
<!--        ohos:id ="$+id:button"-->
<!--        ohos:text = "click"-->
<!--        ohos:text_size="24fp"-->
<!--        ohos:text_color="#FF141414"-->
<!--        ohos:bottom_padding="8vp"-->
<!--        ohos:top_padding="8vp"-->
<!--        ohos:left_padding="70vp"-->
<!--        ohos:right_padding="70vp"-->
<!--        ohos:margin = "8vp"-->
<!--        ohos:background_element="$graphic:background_button"-->
<!--        ohos:below = "$id:text_helloworld"-->
<!--        ohos:center_in_parent = "true"-->
<!--        />-->

</DependentLayout>
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

ability_main.xml（layout目录下）
理解：TextField此处使用主要是为了实现文本框功能，实现登录界面的输入框（输入账号，密码），具体如图所示

<?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:orientation="vertical"
   ohos:background_element="$media:mu">

   <Text
       ohos:id="$+id:text_round"
       ohos:height="match_content"
       ohos:width="match_content"
       ohos:top_padding="50vp"
       ohos:text="正在播放的音乐是 一斉の声 ~         下一首是 あの日タイムマシン           "
       ohos:text_size="32fp"
       ohos:text_color="#FFFFFF"
       ohos:center_in_parent="true"
       ohos:multiple_lines="false"
       ohos:max_text_lines="1"
       />
   <TextField
       ohos:id="$+id:name_text_field"
       ohos:height="match_content"
       ohos:width="match_content"
       ohos:top_margin="166vp"
       ohos:left_padding="36vp"
       ohos:right_padding="36vp"
       ohos:top_padding="10vp"
       ohos:bottom_padding="10vp"
       ohos:background_element="$graphic:background_text_field"
       ohos:element_cursor_bubble="$graphic:color_cursor_bubble"
       ohos:hint="请输入账号"
       ohos:multiple_lines="false"
       ohos:text_size="22fp"
       ohos:layout_alignment="center"
       ohos:text_alignment="vertical_center"
       ohos:text_input_type="pattern_number"
       ohos:basement="#FF030001"
       />
   <Text
       ohos:id="$+id:error_tip_text"
       ohos:height="match_content"
       ohos:width="match_content"
       ohos:visibility="hide"
       ohos:top_padding="8vp"
       ohos:bottom_padding="8vp"
       ohos:right_margin="20vp"
       ohos:text="Incorrect account or password"
       ohos:text_size="16fp"
       ohos:text_color="red"
       ohos:layout_alignment="right"
       />

   <TextField
       ohos:id="$+id:password_text_field"
       ohos:height="match_content"
       ohos:width="match_content"
       ohos:left_padding="36vp"
       ohos:right_padding="36vp"
       ohos:top_padding="10vp"
       ohos:bottom_padding="10vp"
       ohos:background_element="$graphic:background_text_field"
       ohos:element_cursor_bubble="$graphic:color_cursor_bubble"
       ohos:hint="请输入密码"
       ohos:multiple_lines="false"
       ohos:text_size="22fp"
       ohos:layout_alignment="center"
       ohos:text_alignment="vertical_center"
       ohos:text_input_type="pattern_password"
       ohos:basement="#FF030001"
       />
   
   <Button
       ohos:top_margin="40vp"
       ohos:id="$+id:enter_button"
       ohos:height="35vp"
       ohos:width="120vp"
       ohos:background_element="$graphic:background_enter_button"
       ohos:text="SighIn"
       ohos:text_color="#FFFFFF"
       ohos:text_size="20fp"
       ohos:layout_alignment="horizontal_center"
       />


</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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

yt_GD.xml（layout目录下）
理解：Image为展示图片，Text为展示文本，此处使用DependentLayout布局框架，主要是利用其“从上往下”的执行方式

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="$media:background1">

    <Image
        ohos:id="$+id:imageContext"
        ohos:height="158vp"
        ohos:width="300vp"
        ohos:center_in_parent = "true"
        ohos:image_src="$media:gaide"
        />

    <Text
        ohos:id="$+id:text_information"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_padding="210vp"
        ohos:text="$string:GD"
        ohos:text_color="$ohos:color:sys_color_accent_inverse"
        ohos:text_size="32fp"
        ohos:center_in_parent="true"
        ohos:multiple_lines="false"
        ohos:max_text_lines="1"
        />

</DependentLayout>
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

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="$media:background1">

    <Image
        ohos:id="$+id:imageContext"
        ohos:height="158vp"
        ohos:width="300vp"
        ohos:center_in_parent = "true"
        ohos:image_src="$media:lindan"
        />

    <Text
        ohos:id="$+id:text_information"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_padding="210vp"
        ohos:text="$string:LD"
        ohos:text_color="$ohos:color:sys_color_accent_inverse"
        ohos:text_size="32fp"
        ohos:center_in_parent="true"
        ohos:multiple_lines="false"
        ohos:max_text_lines="1"
        />
        <!--      multiple_lines    ->  false表示禁止换行，true表示同意换行-->


</DependentLayout>
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

yt_LZW.xml（layout目录下）

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="$media:background1">

    <Image
        ohos:id="$+id:imageContext"
        ohos:height="158vp"
        ohos:width="300vp"
        ohos:center_in_parent = "true"
        ohos:image_src="$media:lizongwei"
        />

    <Text
        ohos:id="$+id:text_information"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_padding="210vp"
        ohos:text="$string:LZW"
        ohos:text_color="$ohos:color:sys_color_accent_inverse"
        ohos:text_size="32fp"
        ohos:center_in_parent="true"
        ohos:multiple_lines="false"
        ohos:max_text_lines="1"
        />

</DependentLayout>
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

yt_TFK.xml（layout目录下）

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="$media:background1">

    <Image
        ohos:id="$+id:imageContext"
        ohos:height="158vp"
        ohos:width="300vp"
        ohos:center_in_parent = "true"
        ohos:image_src="$media:taofeike"
     />

    <Text
        ohos:id="$+id:text_information"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_padding="210vp"
        ohos:text="$string:TFK"
        ohos:text_color="$ohos:color:sys_color_accent_inverse"
        ohos:text_size="32fp"
        ohos:center_in_parent="true"
        ohos:multiple_lines="false"
        ohos:max_text_lines="1"
        />

</DependentLayout>
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

graphic目录下的xml文件

background_ability_main.xml(在graphic文件目录下)

<?xml version="1.0" encoding="UTF-8" ?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#2F0C0C0C"/>
</shape>
1
2
3
4
5
6
7

background_button.xml(在graphic文件目录下)

<?xml version = "1.0" encoding = "UTF-8" ?>
<shape
    xmlns:ohos ="http://schemas.huawei.com/res/ohos"
    ohos:shape = "rectangle">
    <corners
        ohos:radius="100"
        />
    <solid
        ohos:color="#FF0FFFEB"/>
</shape>
1
2
3
4
5
6
7
8
9
10

background_enter_button.xml(在graphic文件目录下)

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:raiud="35"/>
    <solid
        ohos:color="#FF1CF827"/>
</shape>
1
2
3
4
5
6
7
8

background_text_field.xml(在graphic文件目录下)

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="40"/>
    <solid
        ohos:color="#FFFFFF"/>
</shape>
1
2
3
4
5
6
7
8

color_cursor_bubble.xml(在graphic文件目录下)

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="40"/>
    <solid
        ohos:color="#FF45EE08"/>
    <stroke
        ohos:color="#FF0EF3F3"
        ohos:width="6"/>
</shape>
1
2
3
4
5
6
7
8
9
10
11

string.json配置

{
  "string": [
    {
      "name": "app_name",
      "value": "MySignIn"
    },
    {
      "name": "mainability_description",
      "value": "Java_Phone_Empty Feature Ability"
    },
    {
      "name": "HelloWorld",
      "value": "Hello World"
    },
    {
      "name": "LD",
      "value": "           林丹，汉族，1983年10月14日出生于福建省龙岩市上杭县临江镇，中国羽毛球男单运动员，2008年北京奥运会、2012年伦敦奥运会羽毛球男单冠军，羽毛球史上第一位集奥运会、世锦赛、世界杯、苏迪曼杯、汤姆斯杯、亚运会、亚锦赛、全英赛、全运会及多座世界羽联超级系列赛冠军于一身的双圈全满贯选手，被誉为中国羽毛球一哥，21世纪初期世界羽毛球四大天王之一。"
    },
    {
      "name": "LZW",
      "value": "           李宗伟，1982年10月21日出生于马来西亚槟城，祖籍福建省泉州市南安县，前马来西亚羽毛球男子单打运动员，被誉为马来西亚羽球一哥，是世界羽毛球界四大天王之一，2008、2012、2016年奥运会羽毛球男单亚军。"
    },
    {
      "name": "TFK",
      "value": "            陶菲克·希达亚特（Taufik Hidayat），1981年出生于印度尼西亚万隆，前印度尼西亚羽毛球运动员。1999年，陶菲克赢得亚洲青年锦标赛冠军，同年陶菲克在全英羽毛球公开赛决赛中显示了不俗的才能，获得亚军。2004年雅典奥运会，陶菲克2-0战胜孙升模获得金牌。2005年世锦赛，陶菲克2-0战胜林丹，成为世界羽坛男单运动员中第一位集奥运会、亚运会、世锦赛、汤姆斯杯冠军于一身的大满贯球员。2009年1月30日，陶菲克正式宣布退出印尼国家队，以印尼选手的身份自费参加国际赛事。2013年6月，在印尼超级赛之后，陶菲克正式退役，告别世界羽坛"
    },
    {
      "name": "GD",
      "value": "            盖德，1976年12月14日出生于丹麦，丹麦职业羽毛球运动员。曾获1999年全英赛男单冠军，2001年世锦赛男单亚军等。盖德现由于年龄和伤病原因已经不再处于巅峰，但仍是一个很强的选手。"
    }
  ]
}
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

config.json配置

{
  "app": {
    "bundleName": "com.etc.mysignin",
    "vendor": "etc",
    "version": {
      "code": 1,
      "name": "1.0"
    },
    "apiVersion": {
      "compatible": 4,
      "target": 4
    }
  },
  "deviceConfig": {},
  "module": {
    "package": "com.etc.mysignin",
    "name": ".MyApplication",
    "deviceType": [
      "phone"
    ],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry"
    },
    "abilities": [
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "orientation": "unspecified",
        "name": "com.etc.mysignin.MainAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "羽坛F",
        "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
40
41
42
43
44
45
46
47
48

图片文件

具体文件此处就不发出来了，可以自行上网找到合适的图片（建议以.jpg 或 .png 后缀的文件），将其放入src\main\resources\base\media目录下，后续直接使用即可
如代码中所示，"$media:图片名字" ，即为设置图片的功能。

示例：

    ohos:background_element="$media:mu">		//$media:mu中所指的mu就是一个图片名（mu.jpg）
1

运行结果

登录界面

在这里插入图片描述

登录成功后的首页面

在这里插入图片描述
（设计感不行，简单百度了一张照片贴上去）

四个可选页面

（均包含有跑马灯效果）
在这里插入图片描述

在这里插入图片描述

另外两张图片就不一一展示了，需要的可以自行上网查找（直接搜索盖德或陶菲克）

收尾

鸿蒙的功能与安卓的开发很接近，熟悉安卓开发的能够更好地上手，此处选择了java进行开发，在前段界面的部署操作上会比较难以实现，效果也没那么好，如果可以的话，用js进行开发，效果会好很多。此处就先以java进行尝试开发，大致效果过于简陋，不过大致完成了相应的功能，有一些标签不太了解，使用起来可能有错误，希望多多指教。

就这样，秃头日志，以上为个人笔记，也作为经验分享，大家可以参考，也可以有问题提出，收工，下班！
在这里插入图片描述

以上文章解释权为博主所有，原创权为博主所有~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/265734