Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 32027154 编写于 作者: S swx1239486
浏览文件
操作

一多规避openharmony字样 

Signed-off-by: Nswx1239486 <songqinqin4@huawei.com>
上级 cb10bcd1
隐藏空白更改
内联 并排
Showing with 41 addition and 42 deletion
zh-cn/application-dev/key-features/multi-device-app-dev/case.md
浏览文件 @ 32027154
# 案例应用
本章从OpenHarmony预置的系统应用中，选择短信应用作为典型的案例，从页面开发和工程结构的角度，介绍"一多"的具体实践。OpenHarmony的产品形态在不断丰富中，当前主要有默认设备和平板两种产品形态，本章的具体实践也将围绕这两种产品形态展开。
本章从系统预置的应用中，选择短信应用作为典型的案例，从页面开发和工程结构的角度，介绍"一多"的具体实践。系统的产品形态在不断丰富中，当前主要有默认设备和平板两种产品形态，本章的具体实践也将围绕这两种产品形态展开。
## 概览
[短信](https://gitee.com/openharmony/applications_mms/tree/master)是OpenHarmony中预置的系统应用，主要包含信息查看、发送短信、接收短信、短信送达报告、删除短信等功能。在不同类型设备上，短信应用的功能完全相同，故短信应用适合使用[部署模型A](introduction.md#部署模型)（即：不同类型的设备上安装运行相同的HAP或HAP组合）。
[短信](https://gitee.com/openharmony/applications_mms/tree/master)是系统中预置的应用，主要包含信息查看、发送短信、接收短信、短信送达报告、删除短信等功能。在不同类型设备上，短信应用的功能完全相同，故短信应用适合使用[部署模型A](introduction.md#部署模型)（即：不同类型的设备上安装运行相同的HAP或HAP组合）。
本案例中，在会话详情页面利用[方舟开发框架](introduction.md#方舟开发框架)提供的“一多”能力，用一套代码同时适配默认设备和平板。
......@@ -262,13 +262,13 @@
| 默认设备 | 平板 |
| -------- | -------- |
| ![message_bubble_basic_default](figures/message_bubble_basic_default.png) | ![message_bubble_basic_tablet](figures/message_bubble_basic_tablet.png) |
| ![message_bubble_basic_default](figures/pic/message_bubble_basic_default.png) | ![message_bubble_basic_tablet](figures/pic/message_bubble_basic_tablet.png) |
```
@Component
struct MessageBubble {
private content: string = "OpenHarmony"
private content: string = "Introduction"
build() {
Column() {
......@@ -294,15 +294,14 @@ struct MessageBubble {
| 默认设备 | 平板 |
| -------- | -------- |
| ![message_bubble_radius_default](figures/message_bubble_radius_default.png) | ![message_bubble_radius_tablet](figures/message_bubble_radius_tablet.png) |
| ![message_bubble_radius_default](figures/pic/message_bubble_radius_default.png) | ![message_bubble_radius_tablet](figures/pic/message_bubble_radius_tablet.png) |
```
@Component
struct MessageBubble {
private content: string = "OpenHarmony"
private time: string = "今天 上午 10:35"
private content: string = "Introduction"
build() {
Column() {
Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) {
......@@ -332,13 +331,13 @@ struct MessageBubble {
| 默认设备 | 平板 |
| -------- | -------- |
| ![message_bubble_recv_default](figures/message_bubble_recv_default.png) | ![message_bubble_recv_tablet](figures/message_bubble_recv_tablet.png) |
| ![message_bubble_recv_default](figures/pic/message_bubble_recv_default.png) | ![message_bubble_recv_tablet](figures/pic/message_bubble_recv_tablet.png) |
```
@Component
struct MessageBubble {
private content: string = "OpenHarmony"
private content: string = "Introduction"
private time: string = "上午 10:35"
build() {
......@@ -368,7 +367,7 @@ struct MessageBubble {
.fontSize(10)
.lineHeight(13)
.fontColor("#99182431")
}.width('100%').margin({ left: 12, right: 0 })
}.width('100%').margin({ left: 12, right: 24 })
}
.margin({left: 24, right: 24 })
.backgroundColor('#87CEFA') // 消息背景色，仅用于开发和测试
......@@ -380,15 +379,15 @@ struct MessageBubble {
| 默认设备 | 平板 |
| -------- | -------- |
| ![message_bubble_send_default](figures/message_bubble_send_default.png) | ![message_bubble_send_tablet](figures/message_bubble_send_tablet.png) |
| ![message_bubble_send_default](figures/pic/message_bubble_send_default.png) | ![message_bubble_send_tablet](figures/pic/message_bubble_send_tablet.png) |
```
@Component
struct MessageBubble {
private isReceived:boolean = false // 通过标志位，判断是发送or接收场景，进而使用不同的样式
private content:string = "OpenHarmony"
private time:string = "今天 10:00"
private isReceived:boolean = true// 通过标志位，判断是发送or接收场景，进而使用不同的样式
private content:string = "Introduction"
private time:string = "今天 10:35"
build() {
Column() {
......@@ -550,7 +549,7 @@ struct Conversation {
content: item.content,
time: item.time
})
})
}})
}
.listDirection(Axis.Vertical)
.edgeEffect(EdgeEffect.Spring)
......
zh-cn/application-dev/key-features/multi-device-app-dev/ide-using.md
浏览文件 @ 32027154
......@@ -5,14 +5,14 @@ DevEco Studio的基本使用，请参考[DevEco Studio使用指南](../../quick-
> **说明：**
> 本章的内容基于[DevEco Studio 3.0 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony)版本进行介绍，如您使用DevEco Studio其它版本，可能存在文档与产品功能界面、操作不一致的情况，请以实际功能界面为准。
> 本章的内容基于[DevEco Studio 3.1.1 Release](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony)版本进行介绍，如您使用DevEco Studio其它版本，可能存在文档与产品功能界面、操作不一致的情况，请以实际功能界面为准。
## 工程创建
参考[创建OpenHarmony工程](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-create-new-project-0000001263280423)，先创建出最基本的项目工程。可以看到DevEco Studio创建出的默认工程，仅包含一个的entry类型的模块。
参考[创建系统工程](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/create_new_project-0000001053342414-V3?catalogVersion=V3)，先创建出最基本的项目工程。可以看到DevEco Studio创建出的默认工程，仅包含一个的entry类型的模块。
![zh-cn_image_0000001267274204](figures/zh-cn_image_0000001267274204.jpg)
![zh-cn_image_0000001267274204](figures/pic/zh-cn_image_0000001267274204.png)
如果直接使用如下所示的平级目录进行模块管理，工程逻辑结构较混乱且模块间的依赖关系不够清晰，不利于开发及后期维护。
......@@ -51,14 +51,14 @@ DevEco Studio的基本使用，请参考[DevEco Studio使用指南](../../quick-
## 新建Module
参考[开发OpenHarmony npm包](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-development-npm-package-0000001222578434)，新建三个npm模块，分别命名为common、feature1、feature2。参考[添加/删除Module](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-adding-deleting-module-0000001218760594)，新建一个entry类型的模块，假设命名为“wearable”（仅仅为了说明某一类产品）。示例如下：
参考[开发系统 npm包](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/creating_har_api8-0000001494155892-V3?catalogVersion=V3)，新建三个npm模块，分别命名为common、feature1、feature2。参考[添加/删除Module](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/add_new_module-0000001053223741-V3?catalogVersion=V3)，新建一个entry类型的模块，假设命名为“wearable”（仅仅为了说明某一类产品）。示例如下：
![zh-cn_image_0000001315434285](figures/zh-cn_image_0000001315434285.png)
![zh-cn_image_0000001315434285](figures/pic/zh-cn_image_0000001315434285.png)
> **说明：**
> - 在一个工程中同一个设备类型只支持一个Entry类型的模块。
>
> - 当前的DevEco Studio（3.0 Beta3版本）在创建工程时，设备类型仅能选择default和tablet，默认该模块已经选择了entry类型，那么在创建wearable这个模块，只能选择feature类型。
> - 当前的DevEco Studio（3.1.1 Release）在创建工程时，设备类型仅能选择phone和tablet，默认该模块已经选择了entry类型，那么在创建wearable这个模块，只能选择feature类型。
>
> - 在下一个小节，我们将介绍如何修改Module的配置，包括Module的类型以及其支持的设备类型等。
......@@ -70,7 +70,7 @@ DevEco Studio的基本使用，请参考[DevEco Studio使用指南](../../quick-
修改创建工程时默认的entry模块名称。在该模块上点击鼠标右键，依次选择”Refactor -&gt; Rename”，将名称修改为default。
![zh-cn_image_0000001315914185](figures/zh-cn_image_0000001315914185.jpg)
![zh-cn_image_0000001315914185](figures/pic/zh-cn_image_0000001315914185.png)
### 修改Module类型及其设备类型
......@@ -80,12 +80,12 @@ DevEco Studio的基本使用，请参考[DevEco Studio使用指南](../../quick-
- 将default模块的deviceTypes配置为["default", "tablet"]，同时将其type字段配置为entry。
即default模块编译出的HAP在默认设备和平板上安装和运行。
![zh-cn_image_0000001267914116](figures/zh-cn_image_0000001267914116.png)
![zh-cn_image_0000001267914116](figures/pic/zh-cn_image_0000001267914116.png)
- 将wearable模块的deviceTypes配置为["wearable"]，同时将其type字段配置为entry。
即wearable模块编译出的HAP仅在智能穿戴设备上安装和运行。
![zh-cn_image_0000001267514192](figures/zh-cn_image_0000001267514192.png)
![zh-cn_image_0000001267514192](figures/pic/zh-cn_image_0000001267514192.png)
## 调整目录结构
......@@ -94,33 +94,33 @@ DevEco Studio的基本使用，请参考[DevEco Studio使用指南](../../quick-
在工程根目录（MyApplication）上点击鼠标右键，依次选择“New -&gt; Directory”新建子目录。创建product和features两个子目录。
![zh-cn_image_0000001266874320](figures/zh-cn_image_0000001266874320.png)
![zh-cn_image_0000001266874320](figures/pic/zh-cn_image_0000001266874320.png)
用鼠标左键将default目录拖拽到新建的product目录中，在IDE弹出的确认窗口中，点击“Refactor”即可。
![zh-cn_image_0000001315714137](figures/zh-cn_image_0000001315714137.jpg)
![zh-cn_image_0000001315714137](figures/pic/zh-cn_image_0000001315714137.png)
按照同样的步骤，将wearable目录放到product目录中，将feature1和feature2放到features目录中。
![zh-cn_image_0000001316914105](figures/zh-cn_image_0000001316914105.png)
![zh-cn_image_0000001316914105](figures/pic/zh-cn_image_0000001316914105.png)
## 修改依赖关系
回顾之前小节中关于“工程结构”的介绍，我们推荐在common目录中存放基础公共代码，features目录中存放相对独立的功能模块代码，product目录中存放完全独立的产品代码。这样在product目录中依赖features和common中的公共代码来实现功能，可以最大程度实现代码复用。
配置依赖关系可以通过修改模块中的package.json文件。如下图所示，通过修改default模块中的package.json文件，使其可以使用common、feature1和feature2模块中的代码。更多详情参考[配置OpenHarmony npm包依赖](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-development-npm-package-0000001252769386#section89674298391)。
配置依赖关系可以通过修改模块中的oh-package.json文件。如下图所示，通过修改default模块中的oh-package.json文件，使其可以使用common、feature1和feature2模块中的代码。更多详情参考[配置系统 npm包依赖](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/creating_har_api9-0000001518082393-V3?catalogVersion=V3)。
![zh-cn_image_0000001267274208](figures/zh-cn_image_0000001267274208.png)
![zh-cn_image_0000001267274208](figures/pic/zh-cn_image_0000001267274208.png)
同样的，修改feature1和feature2模块中的package.json文件，使其可以使用common模块中的代码。
同样的，修改feature1和feature2模块中的oh-package.json文件，使其可以使用common模块中的代码。
修改package.json文件后，一定要点击右上角的“Sync Now”，否则改动不会生效！
修改oh-package.json文件后，一定要点击右上角的“Sync Now”，否则改动不会生效！
## 引用npm包中的代码
在[开发OpenHarmony npm包](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-development-npm-package-0000001252769386)中，仅介绍了如何使用npm包中的页面和资源，本小节以例子的形式补充介绍如何使用npm包中的类和函数。
在[开发HarmonyOS npm包](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/creating_har_api8-0000001494155892-V3?catalogVersion=V3)中，仅介绍了如何使用npm包中的页面和资源，本小节以例子的形式补充介绍如何使用npm包中的类和函数。
示例如下：
......@@ -131,16 +131,16 @@ DevEco Studio的基本使用，请参考[DevEco Studio使用指南](../../quick-
- 在default模块中，使用common模块新增的ComplexNumber类和Add函数。
1. 在”common/src/main/ets”目录中，按照需要新增文件和自定义类和函数。
![zh-cn_image_0000001315434289](figures/zh-cn_image_0000001315434289.png)
![zh-cn_image_0000001315434289](figures/pic/zh-cn_image_0000001315434289.png)
2. 在”common/index.ets”文件中，申明需要export的类、函数的名称及在当前模块中的位置，否则其它模块无法使用。
![zh-cn_image_0000001315914189](figures/zh-cn_image_0000001315914189.png)
![zh-cn_image_0000001315914189](figures/pic/zh-cn_image_0000001315914189.png)
3. 在default模块中import和使用这些类和函数。注意提前在default模块的package.json文件中配置对common模块的依赖关系。
![zh-cn_image_0000001267914120](figures/zh-cn_image_0000001267914120.png)
3. 在default模块中import和使用这些类和函数。注意提前在default模块的oh-package.json文件中配置对common模块的依赖关系。
![zh-cn_image_0000001267914120](figures/pic/zh-cn_image_0000001267914120.png)
> **说明：**
> 如果需要将npm包发布供其他开发者使用，当前npm包可发布到npm官方中心仓和OpenHarmony npm专用仓，具体可参考[发布OpenHarmony npm包](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-development-npm-package-0000001222578434#section663116411397)。
> 如果需要将HarmonyOS npm包发布供其他开发者使用，当前npm包可发布到npm官方中心仓和HarmonyOS npm专用仓，具体可参考[发布HarmonyOS npm包](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/creating_har_api8-0000001494155892-V3?catalogVersion=V3)。
## 总结
......
zh-cn/application-dev/key-features/multi-device-app-dev/resource-usage.md
浏览文件 @ 32027154
......@@ -118,11 +118,11 @@ struct Index {
在开发过程中，分层参数的用法与资源限定词基本一致。开发者可以通过"$r('sys.type.resource_id')"的形式引用系统资源。sys代表是系统资源；type代表资源类型，值可以取color、float、string和media；resource_id代表资源id。
可以查看本文[应用UX设计中关于资源的介绍](design-resources.md)，获取OpenHarmony支持的系统资源ID及其在不同配置下的取值。
可以查看本文[应用UX设计中关于资源的介绍](design-resources.md)，获取系统支持的资源ID及其在不同配置下的取值。
> **说明：**
> - 仅声明式开发范式支持使用分层参数，类Web开发范式不支持。
>
> - 系统资源可以保证不同团队开发出的应用有较为一致的视觉风格。对于系统预置应用，强烈建议使用系统资源；对于三方应用，可以根据需要选择使用系统资源或自定义应用资源。
>
> - 可以查看[OpenHarmony/resources代码仓](https://gitee.com/openharmony/resources/tree/master/systemres/main/resources)了解系统预置资源的实现，这里的目录结构与工程中的resources目录类似，也是通过资源限定词匹配不同的设备或设备状态。
> - 可以查看[resources代码仓](https://gitee.com/openharmony/resources/tree/master/systemres/main/resources)了解系统预置资源的实现，这里的目录结构与工程中的resources目录类似，也是通过资源限定词匹配不同的设备或设备状态。
zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md
浏览文件 @ 32027154
......@@ -7,7 +7,7 @@
响应式布局是指页面内的元素可以根据特定的特征（如窗口宽度、屏幕方向等）自动变化以适应外部容器变化的布局能力。响应式布局中最常使用的特征是窗口宽度，可以将窗口宽度划分为不同的范围（下文中称为断点）。当窗口宽度从一个断点变化到另一个断点时，改变页面布局（如将页面内容从单列排布调整为双列排布甚至三列排布等）以获得更好的显示效果。
当前OpenHarmony提供了如下三种响应式布局能力，后文中我们将依次展开介绍。
当前系统提供了如下三种响应式布局能力，后文中我们将依次展开介绍。
| 响应式布局能力 | 简介 |
......@@ -36,7 +36,7 @@
>
> - 可以根据实际需要在lg断点后面新增xl、xxl等断点，但注意新增断点会同时增加UX设计师及应用开发者的工作量，除非必要否则不建议盲目新增断点。
OpenHarmony提供了多种方法，判断应用当前处于何种断点，进而可以调整应用的布局。常见的监听断点变化的方法如下所示：
系统提供了多种方法，判断应用当前处于何种断点，进而可以调整应用的布局。常见的监听断点变化的方法如下所示：
- 获取窗口对象并监听窗口尺寸变化
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或