两个案例五分钟轻松入门Harmony（鸿蒙）开发

• intarray.json
  
• integer.json
  
• pattern.json
  
• plural.json
  
• strarray.json
  
• string.json
  

|
| media | 示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，比方：icon.png |
| animation | 表示动画资源，采用XML文件格式。 | 文件名可自定义，比方：zoom_in.xml。 |
| layout | 表示布局资源，采用XML文件格式。 | 文件名可自定义，比方：home_layout.xml。 |
| graphic | 表示可绘制资源，采用XML文件格式。 | 文件名可自定义，比方：notifications_dark.xml。 |
| profile | 表示其他范例文件，以原始文件情势保存。 | 文件名可自定义。 |
限定词目次： 限定词目次可以由一个或多个表征应用场景或设备特性的限定词组合而成，包括移动国家码和移动网络码、语言、笔墨、国家或地区、横竖屏、设备范例、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。开发者在创建限定词目次时，需要把握限定词目次的定名要求以及与限定词目次与设备状态的匹配规则。 限定词目次的定名要求

• 限定词的组合次序：移动国家码_移动网络码-语言_笔墨_国家或地区-横竖屏-设备范例-深色模式-屏幕密度。开发者可以根据应用的使用场景和设备特性，选择其中的一类或几类限定词组成目次名称。
  
• 限定词的连接方式：语言、笔墨、国家或地区之间采用下划线（）连接，移动国家码和移动网络码之间也采用下划线（）连接，除此之外的其他限定词之间均采用中划线（-）连接。比方：zh_Hant_CN、zh_CN-car-ldpi。
  
• 限定词的取值范围：每类限定词的取值必须符合表2中的条件，否则，将无法匹配目次中的资源文件。
  

| 限定词范例 | 含义与取值说明 |
| — | — |
| 移动国家码和移动网络码 |
移动国家码（MCC）和移动网络码（MNC）的值取自设备注册的网络。MCC背面可以跟随MNC，使用下划线（_）连接，也可以单独使用。比方：mcc460表示中国，mcc460_mnc00表示中国_中国移动。
详细取值范围，请查阅ITU-T E.212（国际电联相干标准）。
|
| 语言 |
表示设备使用的语言范例，由2~3个小写字母组成。比方：zh表示中文，en表示英语，mai表示迈蒂利语。
详细取值范围，请查阅ISO 639（ISO订定的语言编码标准）。
|
| 笔墨 |
表示设备使用的笔墨范例，由1个大写字母（首字母）和3个小写字母组成。比方：Hans表示简体中文，Hant表示繁体中文。
详细取值范围，请查阅ISO 15924（ISO订定的笔墨编码标准）。
|
| 国家或地区 |
表示用户所在的国家或地区，由2~3个大写字母或者3个数字组成。比方：CN表示中国，GB表示英国。
详细取值范围，请查阅ISO 3166-1（ISO订定的国家和地区编码标准）。
|
| 横竖屏 |
表示设备的屏幕方向，取值如下：

• vertical：竖屏
  
• horizontal：横屏
  

|
| 设备范例 |
表示设备的范例，取值如下：

• phone：手机
  
• tablet：平板
  
• car：车机
  
• tv：智慧屏
  
• wearable：智能穿着
  

|
| 颜色模式 |
表示设备的颜色模式，取值如下：

• dark：深色模式
  
• light：淡色模式
  

|
| 屏幕密度 |
表示设备的屏幕密度（单位为dpi），取值如下：

• sdpi：表示小规模的屏幕密度（Small-scale Dots Per Inch），适用于dpi取值为(0, 120]的设备。
  
• mdpi：表示中规模的屏幕密度（Medium-scale Dots Per Inch），适用于dpi取值为(120, 160]的设备。
  
• ldpi：表示大规模的屏幕密度（Large-scale Dots Per Inch），适用于dpi取值为(160, 240]的设备。
  
• xldpi：表示特大规模的屏幕密度（Extra Large-scale Dots Per Inch），适用于dpi取值为(240, 320]的设备。
  
• xxldpi：表示超大规模的屏幕密度（Extra Extra Large-scale Dots Per Inch），适用于dpi取值为(320, 480]的设备。
  
• xxxldpi：表示超特大规模的屏幕密度（Extra Extra Extra Large-scale Dots Per Inch），适用于dpi取值为(480, 640]的设备。
  

|
限定词目次与设备状态的匹配规则

• 在为设备匹配对应的资源文件时，限定词目次匹配的优先级从高到低依次为：移动国家码和移动网络码 > 地区（可选组合：语言、语言_笔墨、语言_国家或地区、语言_笔墨_国家或地区）> 横竖屏 > 设备范例 > 颜色模式 > 屏幕密度。
  
• 如果限定词目次中包罗移动国家码和移动网络码、语言、笔墨、横竖屏、设备范例、颜色模式限定词，则对应限定词的取值必须与当前的设备状态完全同等，该目次才能够到场设备的资源匹配。比方，限定词目次“zh_CN-car-ldpi”不能到场“en_US”设备的资源匹配。
  

三、使用Java语言开发

---

打开编辑器DevEco Studio创建一个工程，选择File -> New -> New Project

在Choose your abilitu template 页面选择**Empty Ability(Java)，**然后点击Next

配置项目的相干信息，包括Project Name、Project Type、Package Name、Save Location、Device Type等信息，最后点击Next即可

在Project窗口中，点击entry -> src -> main -> resources -> base -> layout -> ability_main.xml文件，可以看到如下代码

（可选）如果需要引用String资源推荐在"string.json"文件中进行配置，在Project窗口中，点击entry -> src -> main -> resources -> base -> element -> string.json文件，新增button——Next按钮资源

页面中的内容包括一个文本和一个按钮，使用DependentLayout方式进行布局，通过Text和Button组件实现其中vp代表虚拟像素，fp代表字体像素，其中Button中的内容引用自string.json资源，这是HarmonyOS官方推荐的方式。留意如下内容修改的是ability_main.xml文件。
<?xml version="1.0" encoding="utf-8"?> <DependentLayout
xmlnshos=“http://schemas.huawei.com/res/ohos”
ohos:width=“match_parent”
ohos:height=“match_parent”>
<Text
ohos:id=“$+id:text”
ohos:width=“match_content”
ohos:height=“match_content”
ohos:text=“Hello World”
ohos:text_color=“#000000”
ohos:text_size=“32fp”
ohos:center_in_parent=“true”/>
<Button
ohos:id=“$+id:button”
ohos:width=“match_content”
ohos:height=“match_content”
ohos:text=“$string:button_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”/>
设置按钮的样式，通过entry -> src -> main -> resources -> base -> graphic目次下新增文件background_button.xml文件来实现

background_button.xml文件内容如下：
<?xml version="1.0" encoding="utf-8"?> <shape
xmlnshos=“http://schemas.huawei.com/res/ohos”
ohos:shape=“rectangle”>
<corners
ohos:radius=“100”/>
<solid
ohos:color=“#007DFF”/>
ability_main.xml文件中引入按钮的样式，应用方式通过
   ohos:background_element=“$graphic:background_button”
  // …
<Button
ohos:id=“$+id:button”
ohos:width=“match_content”
ohos:height=“match_content”
ohos:text=“$string:button_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”/>
// …
加载xml布局，打开entry -> src -> main -> java -> com -> liziba -> demo -> slice -> MainAbilitySlice,java文件，通过类的继承关系MainAbilitySlice **extends **AbilitySlice，可以看出MainAbilitySlice 是一个AbilitySlice的子类，而AbilitySlice主要用于承载单个页面的具体逻辑实现和界面UI，是应用显示、运行和跳转的最小单元。
package com.liziba.demo.slice;
import com.liziba.demo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
// 加载xml布局
super.setUIContent(ResourceTable.Layout_ability_main);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
开启远程调试

该页面需要先登录华为账户

登录后效果如下

运行项目
点击编辑器的右上角的三角形直接运行，或者点击小甲壳虫进入调试模式。

第一个页面的效果

创建第二个页面
上面的页面是通过xml方式来实现的，第二个页面使用Java代码来编写 在entry -> src -> main -> java -> com -> liziba -> demo -> slice目次下新增SecondAbilitySlice.java类 代码如下：
package com.liziba.demo.slice;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.DependentLayout;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
/**
* 第二个页面
*/
public class SecondAbilitySlice extends AbilitySlice {
@Override
protected void onStart(Intent intent) {
super.onStart(intent);
// 声明布局
DependentLayout myLayout = new DependentLayout(this);
// 设置布局宽高
myLayout.setWidth(DependentLayout.LayoutConfig.MATCH_PARENT);
myLayout.setHeight(DependentLayout.LayoutConfig.MATCH_PARENT);
// 设置布局配景为白色
ShapeElement background = new ShapeElement();
background.setRgbColor(new RgbColor(255, 255, 255));
myLayout.setBackground(background);
// 创建一个文本
Text text = new Text(this);
text.setText(“你好李子捌！”);
text.setWidth(DependentLayout.LayoutConfig.MATCH_PARENT);
text.setTextSize(100);
text.setTextColor(Color.BLACK);
// 设置文本的布局
DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig(DependentLayout.LayoutConfig.MATCH_CONTENT, DependentLayout.LayoutConfig.MATCH_CONTENT);
textConfig.addRule(DependentLayout.LayoutConfig.CENTER_IN_PARENT);
text.setLayoutConfig(textConfig);
myLayout.addComponent(text);
super.setUIContent(myLayout);
}
}
实现按钮跳转页面功能
打开MainAbilitySlice.java类，新增按钮点击后页面跳转功能
package com.liziba.demo.slice;
import com.liziba.demo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
// 加载xml布局
super.setUIContent(ResourceTable.Layout_ability_main);
// 这个Id_button，编译器会统一分配一个唯一id，对应ability_main.xml中定义的button
Button button = (Button) findComponentById(ResourceTable.Id_button);
// 按钮点击实现跳转
button.setClickedListener(listener -> present(new SecondAbilitySlice(), new Intent()));
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
关于其中的id不了解的可以查看如下这个类

重新运行项目，点击按钮实现页面跳转功能如下：

四、使用JS语言开发

---

上面部分相同的步调将会在这里面省略
在Choose your abilitu template 页面选择**Empty Ability(JS)，**然后点击Next

配置项目信息

编写一个包罗一个文本和一个按钮的页面
打开entry -> src -> main -> js -> default -> page.index -> index.hml文件，添加一个文本和一个按钮
       你好，李子捌
  
设置样式
打开entry -> src -> main -> js -> default -> page.index -> index.css文件，设置按钮和文本的样式
/* index.css */
.container {
flex-direction: column; /* 设置容器内的项目纵向排列 */
justify-content: center; /* 设置项目位于容器主轴的中心 */
align-items: center; /* 项目在交错轴居中 */
}
/* 对class="text"的组件设置样式 */
.text{
font-size: 32px;
}
/* 对class="button"的组件设置样式 */
.button {
width: 200px;
height: 40px;
background-color: #007dff;
font-size: 20px;
text-color: white;
margin-top: 10px;
}
预览第一个页面

创建第二个页面
打开entry -> src -> main -> js -> default -> page.index，右键New -> JS Page ​

JS Page Name 填入details，点击Next

将会看到工程出现如下文件，留意这里如果要本身手动创建也行，但是三个文件都需要，否则运行无法成功！

修改details.hml文件
     你好鸿蒙，我是李子捌！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。