鸿蒙HarmonyOS的初次使用––制作一登录页面，实现跳转(DevEcoStudio)
Hormony的初次使用------用DevEcoStudio实现鸿蒙开发环境配置创建java项目运行模拟器代码部署java代码xml代码layout目录下的xml文件graphic目录下的xml文件string.json配置config.json配置图片文件运行结果登录界面登录成功后的首页面四个可选页面收尾环境配置创建java项目根据以下图片过程，可以创建java项目，开始设计属于你的phone
·
------用DevEcoStudio实现鸿蒙开发（制做登录页面，跑马灯，页面跳转，页面选择）
环境配置
创建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);
}
}
- 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);
}
}
- 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());
}
}
- MyApplication的代码（生成项目时自动生成）
package com.etc.mysignin;
import ohos.aafwk.ability.AbilityPackage;
public class MyApplication extends AbilityPackage {
@Override
public void onInitialize() {
super.onInitialize();
}
}
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>
- 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>
- 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>
- yt_LD.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: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>
- 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>
- 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>
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>
- 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>
- 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>
- 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>
- 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>
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年世锦赛男单亚军等。盖德现由于年龄和伤病原因已经不再处于巅峰，但仍是一个很强的选手。"
}
]
}
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"
}
]
}
}
图片文件
具体文件此处就不发出来了，可以自行上网找到合适的图片（建议以.jpg 或 .png 后缀的文件），将其放入src\main\resources\base\media目录下，后续直接使用即可
如代码中所示，"$media:图片名字" ，即为设置图片的功能。
示例：
ohos:background_element="$media:mu"> //$media:mu中所指的mu就是一个图片名（mu.jpg）
运行结果
登录界面
登录成功后的首页面
（设计感不行，简单百度了一张照片贴上去）
四个可选页面
（均包含有跑马灯效果）
另外两张图片就不一一展示了，需要的可以自行上网查找（直接搜索 盖德 或 陶菲克）
收尾
鸿蒙的功能与安卓的开发很接近，熟悉安卓开发的能够更好地上手，此处选择了java进行开发，在前段界面的部署操作上会比较难以实现，效果也没那么好，如果可以的话，用js进行开发，效果会好很多。此处就先以java进行尝试开发，大致效果过于简陋，不过大致完成了相应的功能，有一些标签不太了解，使用起来可能有错误，希望多多指教。
就这样，秃头日志，以上为个人笔记，也作为经验分享，大家可以参考，也可以有问题提出，收工，下班！
以上文章解释权为博主所有，原创权为博主所有~
鸿蒙生态一站式服务平台。
更多推荐
1w
14
1- 0
- 分享
所有评论(0)
您需要登录才能发言
加载更多
已为社区贡献1条内容
