【HarmonyOS 应用开发笔记】HarmonyOS 基本概念 基础组件介绍

鸣涧

【HarmonyOS 应用开发笔记】HarmonyOS 基本概念 基础组件介绍HarmonyOS 常用基本概念

HarmonyOS的用户应用程序包以APP Pack（Application Package）形式发布，它是由一个或多个HAP组成

1:Android与HarmonyOS相关对比

application ---------------------> entry （主模块）

Library ----------------------> feature （动态模块）

AndroidManifest----------------->config.json

2: HarmonyOS 配置文件
app：应用的主要信息
bundleName：唯一标识类似Android的applicationId
vendor:作者（厂商）
version:版本号标识

deviceConfig：包含在具体设备上的应用配置信息
例如:配置网络允许方式http  cleartextTraffic

module：包含HAP包的配置信息
package：HAP的包结构名称，在应用内应保证唯一性
name：HAP 启动类的名称  类似Android的application配置
mainAbility：程序启动入口
deviceType：所支持的设备类型

distro：应用的描述信息
deliveryWithInstall：标识当前HAP时候随应用安装
moduleName： 当前HAP的名称
moduleType： 当前HAP的类型
installationFree： 是否免安装（原子化服务）

abilities：所有Ability的配置地方  类似Activity
skilles:   表示Ability能够接收的Intent的特征 类似Android中的Action
entities:  表示能够接收的Intent的Ability的类别（如视频、桌面应用等），可以包含一个或多个entity
actions:   表示能够接收的Intent的action值
orientation： PageAbility 的方向
visible： 是否能允许其他应用调用
name： Ability路径名称
description： Ability 的描述
label： 安装在手机上显示的应用名称
type：区分是FA还是PA的
launchType：启动模式



3：Ability(Activity) 与AbilitySlice（Fragment）

Ability： 是一个容器 可以放置 AbilitySlice

Ability是应用所具备能力的抽象，也是应用程序的重要组成部分。一个应用可以具备多种能力（即可以包含多个Ability）。HarmonyOS支持应用以Ability为单位进行部署。

AbilitySlice: 是一个具体页面的展示

Ability分为FA（Feature Ability）和PA（Particle Ability）两种类型，每种类型为开发者提供了不同的模板，以便实现不同的业务功能。其中，FA支持Page Ability模板，以提供与用户交互的能力。一个Page Ability可以含有一个或多个页面（即Page），Page Ability与Page的关系如下图所示：

快速入门提供了一个含有两个页面的Page Ability实例。更多Ability的开发内容及指导，请参见Ability开发（JS）。

4: UI框架

HarmonyOS提供了一套UI开发框架，即方舟开发框架（ArkUI框架）。方舟开发框架可为开发者提供应用UI开发所必需的能力，比如多种组件、布局计算、动画能力、UI交互、绘制等。

方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于JS扩展的类Web开发范式（简称“类Web开发范式”）和基于TS扩展的声明式开发范式（简称“声明式开发范式”）。以下是两种开发范式的简单对比。

开发范式名称	语言生态	UI更新方式	适用场景	适用人群
类Web开发范式	JS语言	数据驱动更新	界面较为简单的程序应用和卡片	Web前端开发人员
声明式开发范式	扩展的TS语言（eTS）	数据驱动更新	复杂度较大、团队合作度较高的程序	移动系统应用开发人员、系统应用开发人员

更多UI框架的开发内容及指导，请参见方舟开发框架（ArkUI框架）。

HarmonyOS 常用组件


5: 基本组件


5.1 Text
<Text
    ohos:id="$+id:changePageTxt"
    ohos:width="100vp"
    ohos:height="100vp"
    ohos:text="TextTextText"
    ohos:text_size="28fp"
    ohos:text_color="#0000FF"
    ohos:italic="true"
    ohos:text_weight="700"
    ohos:text_font="sans-serif"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="15vp"
    ohos:left_padding="15vp"
    ohos:text_alignment="center"
    ohos:multiple_lines="false"
    ohos:max_text_lines="1"
    ohos:background_element="$graphic:background_text"/>

单位： vp  
字体大小单位： fp
solid：填充色
rectangle：矩形
padding: 内边距   （内容和边距）
margin：外边距
text_color： 字体颜色  #00ff00
text_size: 字体大小
background_element：背景颜色
italic：是否斜体

text_weight: 字重

text_font: 字体风格

1. // 跑马灯效果
2. text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
3. // 始终处于自动滚动状态
4. text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
5. // 启动跑马灯效果
6. text.startAutoScrolling();
solid：填空



5.2 Button

<Button
    ohos:id="$+id:button"
    ohos:width="50vp"
    ohos:height="50vp"
    ohos:text_size="27fp"
    ohos:background_element="$graphic:circle_button_element"
    ohos:text="+"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="15vp"
    ohos:left_padding="15vp"
/>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlnshos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">
    <solid
        ohos:color="#007CFD"/>
</shape>
hint：用于输入的提示aligment:  用于容器（DirectionalLayout）  控制  所有  子元素的位置layout_alignment： 用于控件本身 控制自己在 父容器的位置容器特点： 容器中可以 放置控件         容器中可以放置 容器


5.3 TextField

1. <TextField
   
2.     ohos:padding="10vp"
   
3.     ohos:background_element="$graphic:input_button"
   
4.     ohos:height="match_content"
   
5.     ohos:hint="请输入用户名"
   
6.     ohos:text_size="18fp"
   
7.     ohos:basement="#cccccc"
   
8.     ohos:text_color="#000000"
   
9.     ohos:width="match_content"></TextField>
   
10. <?xml version="1.0" encoding="utf-8"?>
    
11. <shape
    
12.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    
13.     ohos:shape="rectangle"
    
14.     >
    
15.     <corners ohos:radius="10vp"></corners>
    
16.     <stroke ohos:color="$ohos:color:id_color_badge"
    
17.             ohos:width="2"
    
18.         ></stroke>
    
19. </shape>

复制代码

5.4 事件监听

addTextObserver   实时监听输入过程
setFocusChangedListener   焦点事件
    HiLogLabel logLabel = new HiLogLabel(HiLog.LOG_APP, 0, ThirdPageSlice.class.getName());

5.5 Image

1. <blockquote><Image

复制代码

scale_mode: 缩放模式

zoom_center: 表示原图按照比例缩放到与Image最窄边一致，并居中显示。

stretch: 表示将原图缩放到与Image大小一致。

center:表示不缩放，按Image大小显示原图中间部分。

inside:表示将原图按比例缩放到与Image相同或更小的尺寸，并居中显示。


6: 常用布局

一个界面：布局+载体

布局文件： layout xxxx.layout.xml

布局文件的载体：Slice 类

绑定： 在onStart 方法中进行 通过 setUIContent 进行绑定

页面的切换： present（）；

shape：形状solid：填充色height：高度（必须设置）stroke：添加边框    ohos:width： 边框线的大小6.1 DirectionalLayout

布局：

线性布局

DirectionalLayout的排列方向（orientation）分为水平（horizontal）或者垂直（vertical）方向。使用orientation设置布局内组件的排列方式，默认为垂直排列。

权重：weight

match_content： 包裹内容
match_parent:  匹配父容器 有大多 我就占多大

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <DirectionalLayout
   
3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
   
4.     ohos:height="match_parent"
   
5.     ohos:width="match_parent"
   
6. >
   
7.     <Text
   
8.         ohos:height="match_parent"
   
9.         ohos:width="match_content"
   
10.         ></Text>
    
11. 
    
12. </DirectionalLayout>

复制代码

alignment: 所有子控件的对齐方式
weight：权重（占比）
layout_alignment：定义当前控件 在父亲容器中的位置

DirectionalLayout中的子控件使用layout_alignment控制自身在布局中的对齐方式