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

id="article_content" class="article_content clearfix"> id="content_views" class="markdown_views prism-atom-one-dark">

  • 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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

页面中的内容包括一个文本和一个按钮，使用DependentLayout方式进行布局，通过Text和Button组件实现其中vp代表虚拟像素，fp代表字体像素，其中Button中的内容引用自string.json资源，这是HarmonyOS官方推荐的方式。注意如下内容修改的是ability_main.xml文件。

xmlns:ohos=“http://schemas.huawei.com/res/ohos”

ohos:width=“match_parent”

ohos:height=“match_parent”>

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

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文件来实现

image.png

background_button.xml文件内容如下：

xmlns:ohos=“http://schemas.huawei.com/res/ohos”

ohos:shape=“rectangle”>

ohos:radius=“100”/>

ohos:color=“#007DFF”/>

ability_main.xml文件中引入按钮的样式，应用方式通过

ohos:background_element=“$graphic:background_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);

}

}

开启远程调试

image.png 该页面需要先登录华为账户 image.png 登录后效果如下 image.png

运行项目

点击编辑器的右上角的三角形直接运行，或者点击小甲壳虫进入调试模式。 image.png 第一个页面的效果 image.png

创建第二个页面

上面的页面是通过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不了解的可以查看如下这个类 image.png 重新运行项目，点击按钮实现页面跳转功能如下： image.pngimage.png

四、使用JS语言开发

上面部分相同的步骤将会在这里面省略

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

image.png 配置项目信息 image.png

编写一个包含一个文本和一个按钮的页面

打开entry -> src -> main -> js -> default -> page.index -> index.hml文件，添加一个文本和一个按钮

class="container">

你好，李子捌

设置样式

打开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;

}

预览第一个页面

image.png

创建第二个页面

打开entry -> src -> main -> js -> default -> page.index，右键New -> JS Page ​

image.png JS Page Name 填入details，点击Next image.png 将会看到工程出现如下文件，注意这里如果要自己手动创建也行，但是三个文件都需要，否则运行无法成功！

image.png

修改details.hml文件

class="container">

你好鸿蒙，我是李子捌！

data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/2501_90433588/article/details/145435939","extend1":"pc","ab":"new"}">>
注：本文转载自blog.csdn.net的程序猿_IOx的文章"https://blog.csdn.net/2501_90433588/article/details/145435939"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！