两个案例五分钟轻松入门Harmony(鸿蒙)开发(1),面试加分项表格

  • 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文件。

<?xml version="1.0" encoding="utf-8"?>

<DependentLayout

xmlns:ohos=“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文件来实现

image.png

background_button.xml文件内容如下:

<?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=“#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);

}

}

开启远程调试

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文件,添加一个文本和一个按钮

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数HarmonyOS鸿蒙开发工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上HarmonyOS鸿蒙开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新

如果你觉得这些内容对你有帮助,可以添加VX:vip204888 (备注鸿蒙获取)
img

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

24年HarmonyOS鸿蒙开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。**
[外链图片转存中…(img-1qsyF1X5-1712738605699)]
[外链图片转存中…(img-sesXMCx7-1712738605700)]
[外链图片转存中…(img-160OL35k-1712738605700)]

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上HarmonyOS鸿蒙开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新

如果你觉得这些内容对你有帮助,可以添加VX:vip204888 (备注鸿蒙获取)
[外链图片转存中…(img-lq54al9Q-1712738605700)]

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值