diff --git a/zh-cn/application-dev/Readme-CN.md b/zh-cn/application-dev/Readme-CN.md index 405f0971488d733c9989dbf8bab377616e3c1cfb..aa9b731e0cd6ba1f928db3b8d91753ffe441eec7 100644 --- a/zh-cn/application-dev/Readme-CN.md +++ b/zh-cn/application-dev/Readme-CN.md @@ -9,8 +9,6 @@ - 快速入门 - [开发准备](quick-start/start-overview.md) - [使用ArkTS语言开发（Stage模型）](quick-start/start-with-ets-stage.md) - - [使用ArkTS语言开发（FA模型）](quick-start/start-with-ets-fa.md) - - [使用JS语言开发（FA模型）](quick-start/start-with-js-fa.md) - 开发基础知识 - 应用程序包基础知识 - [应用程序包概述](quick-start/application-package-overview.md) diff --git a/zh-cn/application-dev/quick-start/Readme-CN.md b/zh-cn/application-dev/quick-start/Readme-CN.md index e85b6eb8fca9d8c5d758167ada0620715bdaaf57..41ed69bcd4cfa06e0a3c0ffbb6ce395ceb464d77 100755 --- a/zh-cn/application-dev/quick-start/Readme-CN.md +++ b/zh-cn/application-dev/quick-start/Readme-CN.md @@ -3,8 +3,6 @@ - 快速入门 - [开发准备](start-overview.md) - [使用ArkTS语言开发（Stage模型）](start-with-ets-stage.md) - - [使用ArkTS语言开发（FA模型）](start-with-ets-fa.md) - - [使用JS语言开发（FA模型）](start-with-js-fa.md) - 开发基础知识 - 应用程序包基础知识 - [应用程序包概述](application-package-overview.md) diff --git a/zh-cn/application-dev/quick-start/figures/changeToAPI10.png b/zh-cn/application-dev/quick-start/figures/changeToAPI10.png new file mode 100644 index 0000000000000000000000000000000000000000..32c7660ccf7dbd05c206b7753a2dfdb72cca5d0e Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/changeToAPI10.png differ diff --git a/zh-cn/application-dev/quick-start/figures/chooseStageModel.png b/zh-cn/application-dev/quick-start/figures/chooseStageModel.png index 3125c8ba0591ce0c53344f35fb780eb956601624..b7dd96b6b7c5d2afd241e0c6fd9ee91977692115 100644 Binary files a/zh-cn/application-dev/quick-start/figures/chooseStageModel.png and b/zh-cn/application-dev/quick-start/figures/chooseStageModel.png differ diff --git a/zh-cn/application-dev/quick-start/figures/createProject.png b/zh-cn/application-dev/quick-start/figures/createProject.png index 7a56a44e0e7f80671b86c521792352db625ccad7..6c884853a1afcb2dbb72f1e5f7914ab063908299 100644 Binary files a/zh-cn/application-dev/quick-start/figures/createProject.png and b/zh-cn/application-dev/quick-start/figures/createProject.png differ diff --git a/zh-cn/application-dev/quick-start/figures/deleteRuntimeOS.png b/zh-cn/application-dev/quick-start/figures/deleteRuntimeOS.png new file mode 100644 index 0000000000000000000000000000000000000000..8087b03be057d646ae6e3348abae73c1e840b781 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/deleteRuntimeOS.png differ diff --git a/zh-cn/application-dev/quick-start/figures/targetSdkVersion.png b/zh-cn/application-dev/quick-start/figures/targetSdkVersion.png new file mode 100644 index 0000000000000000000000000000000000000000..e3846adab2a4b644e09dd00c7e66c79db94cbb18 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/targetSdkVersion.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001609333677.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001609333677.png new file mode 100644 index 0000000000000000000000000000000000000000..88e2fede373b6b369375bc2d8e58b2dba0770da6 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001609333677.png differ diff --git a/zh-cn/application-dev/quick-start/start-overview.md b/zh-cn/application-dev/quick-start/start-overview.md index d3a3528883a02dbeb91d210de97606e0109455bc..43b273e56e147880b1ec4dcf5290bd56fa55b7f8 100644 --- a/zh-cn/application-dev/quick-start/start-overview.md +++ b/zh-cn/application-dev/quick-start/start-overview.md @@ -29,8 +29,9 @@ OpenHarmony提供了一套UI开发框架，即方舟开发框架（ArkUI框架 随着系统的演进发展，OpenHarmony先后提供了两种应用模型： -- **FA（Feature Ability）模型：** OpenHarmony API 7开始支持的模型，已经不再主推。FA模型开发可见[FA模型开发概述](../application-models/fa-model-development-overview.md)。 -- **Stage模型：** OpenHarmony API 9开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。Stage模型开发可见[Stage模型开发概述](../application-models/stage-model-development-overview.md)。 +- **Stage模型：** OpenHarmony API 9开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。Stage模型开发可见[Stage模型开发概述](../application-models/stage-model-development-overview.md)。**快速入门以此为例提供开发指导。** + +- **FA（Feature Ability）模型：** OpenHarmony API 7开始支持的模型，已经不再主推。FA模型开发可见[FA模型开发概述](../application-models/fa-model-development-overview.md)。**快速入门章节不再对此展开提供开发指导。** FA模型和Stage模型的整体架构和设计思想等更多区别，请见[应用模型解读](../application-models/application-model-description.md)。 @@ -39,8 +40,8 @@ FA模型和Stage模型的整体架构和设计思想等更多区别，请见[应 ## 工具准备 -1. 安装最新版[DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio)。 +1. 安装最新版[DevEco Studio](../../release-notes/OpenHarmony-v4.0-beta1.md#配套关系)。 2. 请参考[配置开发环境](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/environment_config-0000001052902427-V3)，完成**DevEco Studio**的安装和开发环境配置。 -完成上述操作及基本概念的理解后，可参照[使用ArkTS语言进行开发（Stage模型）](start-with-ets-stage.md)、[使用ArkTS语言开发（FA模型）](start-with-ets-fa.md)、[使用JS语言开发（FA模型）](../quick-start/start-with-js-fa.md)中的任一章节进行下一步体验和学习。 \ No newline at end of file +完成上述操作及基本概念的理解后，可参照[使用ArkTS语言进行开发（Stage模型）](start-with-ets-stage.md)中的任一章节进行下一步体验和学习。 diff --git a/zh-cn/application-dev/quick-start/start-with-ets-fa.md b/zh-cn/application-dev/quick-start/start-with-ets-fa.md deleted file mode 100644 index e04557d126081c36aced089576003df3e26b6002..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/quick-start/start-with-ets-fa.md +++ /dev/null @@ -1,299 +0,0 @@ -# 使用ArkTS语言开发（FA模型） - - -> **说明：** -> -> 请使用**DevEco Studio V3.0.0.601 Beta1**及更高版本。 -> -> 为确保运行效果，本文以使用**DevEco Studio 3.1 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio)获取下载链接。 - - -## 创建ArkTS工程 - -1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已经打开了一个工程，请在菜单栏选择**File** > **New** > **Create Project**来创建一个新工程。选择**Application**应用开发（本文以应用开发为例，**Atomic Service**对应为原子化服务开发），选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 - - ![createProject](figures/createProject.png) - -2. 进入配置工程界面，**Compile SDK** 选择“**8**”（**Compile SDK**选择“**9**”时注意同步选择**Model** 为“**FA**”，此处以选择“**8**”为例），**Language**选择“**ArkTS**”，其他参数保持默认设置即可。 - - ![chooseFAModel_ets](figures/chooseFAModel_ets.png) - - > **说明：** - > - > DevEco Studio V3.0 Beta3及更高版本支持使用ArkTS[低代码开发](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ide-low-code-overview-0000001480179573-V3)方式。 - > - > 低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。 - > - > 如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。 - -3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 -4. 工程创建完成后，在**entry > build-profile.json5**文件中，将targets中的runtimeOS改为“OpenHarmony”，然后点击右上角提示框的**Sync Now**以进行OpenHarmony应用开发。 - - -## ArkTS工程目录结构（FA模型） - -![zh-cn_image_0000001384652328](figures/zh-cn_image_0000001384652328.png) - -- **entry**：OpenHarmony工程模块，编译构建生成一个[HAP](../../glossary.md#hap)包。 - - **src > main > ets**：用于存放ArkTS源码。 - - **src > main > ets > MainAbility**：应用/服务的入口。 - - **src > main > ets > MainAbility > pages**：MainAbility包含的页面。 - - **src > main > ets > MainAbility > pages > index.ets**：pages列表中的第一个页面，即应用的首页入口。 - - **src > main > ets > MainAbility > app.ets**：承载Ability生命周期。 - - **src > main > resources**：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见[资源文件的分类](resource-categories-and-access.md#资源分类)。 - - **src > main > config.json**：模块配置文件。主要包含HAP的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见[应用配置文件（FA模型）](application-configuration-file-overview-fa.md)。 - - **build-profile.json5**：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。若需开发OpenHarmony应用，则需开发者自行修改为OpenHarmony。 - - **hvigorfile.ts**：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。 -- **build-profile.json5**：应用级配置信息，包括签名、产品配置等。 -- **hvigorfile.ts**：应用级编译构建任务脚本。 - - -## 构建第一个页面 - -1. 使用文本组件。 - - 工程同步完成后，在“**Project**”窗口，点击“**entry > src > main > ets > MainAbility > pages**”，打开“**index.ets**”文件，可以看到页面由Text组件组成。“**index.ets**”文件的示例如下： - - ```ts - // index.ets - @Entry - @Component - struct Index { - @State message: string = 'Hello World' - - build() { - Row() { - Column() { - Text(this.message) - .fontSize(50) - .fontWeight(FontWeight.Bold) - } - .width('100%') - } - .height('100%') - } - } - ``` - -2. 添加按钮。 - - 在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“**index.ets**”文件的示例如下： - - ```ts - // index.ets - @Entry - @Component - struct Index { - @State message: string = 'Hello World' - - build() { - Row() { - Column() { - Text(this.message) - .fontSize(50) - .fontWeight(FontWeight.Bold) - // 添加按钮，以响应用户点击 - Button() { - Text('Next') - .fontSize(30) - .fontWeight(FontWeight.Bold) - } - .type(ButtonType.Capsule) - .margin({ - top: 20 - }) - .backgroundColor('#0D9FFB') - .width('40%') - .height('5%') - } - .width('100%') - } - .height('100%') - } - } - ``` - -3. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示： - - ![zh-cn_image_0000001311334976](figures/zh-cn_image_0000001311334976.png) - - -## 构建第二个页面 - -1. 创建第二个页面。 - - - 新建第二个页面文件。在“**Project**”窗口，打开“**entry > src > main > ets > MainAbility**”，右键点击“**pages**”文件夹，选择“**New > ArkTS File**”，命名为“**second**”，点击“**Finish**”。可以看到文件目录结构如下： - ![zh-cn_image_0000001311334932](figures/zh-cn_image_0000001311334932.png) - - > **说明：** - > - > 开发者也可以在右键点击“**pages**”文件夹时，选择“**New > Page**”，则无需手动配置相关页面路由。 - - 配置第二个页面的路由。在config.json文件中的“module - js - pages”下配置第二个页面的路由“pages/second”。示例如下： - - ```json - { - "module": { - "js": [ - { - "pages": [ - "pages/index", - "pages/second" - ] - } - ] - } - } - ``` - -2. 添加文本及按钮。 - - 参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“**second.ets**”文件的示例如下： - - ```ts - // second.ets - @Entry - @Component - struct Second { - @State message: string = 'Hi there' - - build() { - Row() { - Column() { - Text(this.message) - .fontSize(50) - .fontWeight(FontWeight.Bold) - Button() { - Text('Back') - .fontSize(25) - .fontWeight(FontWeight.Bold) - } - .type(ButtonType.Capsule) - .margin({ - top: 20 - }) - .backgroundColor('#0D9FFB') - .width('40%') - .height('5%') - } - .width('100%') - } - .height('100%') - } - } - ``` - - -## 实现页面间的跳转 - -页面间的导航可以通过[页面路由router](../reference/apis/js-apis-router.md)来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。 - -1. 第一个页面跳转到第二个页面。 - - 在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“**index.ets**”文件的示例如下： - - ```ts - // index.ets - // 导入页面路由模块 - import router from '@ohos.router'; - - @Entry - @Component - struct Index { - @State message: string = 'Hello World' - - build() { - Row() { - Column() { - Text(this.message) - .fontSize(50) - .fontWeight(FontWeight.Bold) - // 添加按钮，以响应用户点击 - Button() { - Text('Next') - .fontSize(30) - .fontWeight(FontWeight.Bold) - } - .type(ButtonType.Capsule) - .margin({ - top: 20 - }) - .backgroundColor('#0D9FFB') - .width('40%') - .height('5%') - // 跳转按钮绑定onClick事件，点击时跳转到第二页 - .onClick(() => { - router.push({ url: 'pages/second' }) - // 若为API 9工程，则可使用以下接口 - // router.pushUrl({ url: 'pages/second' }) - - }) - } - .width('100%') - } - .height('100%') - } - } - ``` - -2. 第二个页面返回到第一个页面。 - - 在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。“**second.ets**”文件的示例如下： - - ```ts - // second.ets - // 导入页面路由模块 - import router from '@ohos.router'; - - @Entry - @Component - struct Second { - @State message: string = 'Hi there' - - build() { - Row() { - Column() { - Text(this.message) - .fontSize(50) - .fontWeight(FontWeight.Bold) - Button() { - Text('Back') - .fontSize(25) - .fontWeight(FontWeight.Bold) - } - .type(ButtonType.Capsule) - .margin({ - top: 20 - }) - .backgroundColor('#0D9FFB') - .width('40%') - .height('5%') - // 返回按钮绑定onClick事件，点击按钮时返回到第一页 - .onClick(() => { - router.back() - }) - } - .width('100%') - } - .height('100%') - } - } - ``` - -3. 打开index.ets文件，点击预览器中的![zh-cn_image_0000001311015192](figures/zh-cn_image_0000001311015192.png)按钮进行刷新。效果如下图所示： - - ![zh-cn_image_0000001364254729](figures/zh-cn_image_0000001364254729.png) - - -## 使用真机运行应用 - -1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 - -2. 点击**File** > **Project Structure...** > **Project** > **SigningConfigs** 界面勾选“**Automatically generate signature**”，等待自动签名完成即可，点击“**OK**”。如下图所示： - - ![signConfig](figures/signConfig.png) - -3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001364054485](figures/zh-cn_image_0000001364054485.png)按钮运行。效果如下图所示： - - ![zh-cn_image_0000001364254729](figures/zh-cn_image_0000001364254729.png) - -恭喜您已经使用ArkTS语言开发（FA模型）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。 diff --git a/zh-cn/application-dev/quick-start/start-with-ets-stage.md b/zh-cn/application-dev/quick-start/start-with-ets-stage.md index 4ebd11ba03a96828fd31457093a0cce1161708ba..004ec08a357cc6bf5b418243ba767cb1a86e25b3 100644 --- a/zh-cn/application-dev/quick-start/start-with-ets-stage.md +++ b/zh-cn/application-dev/quick-start/start-with-ets-stage.md @@ -1,51 +1,131 @@ # 使用ArkTS语言开发（Stage模型） -> **说明：** -> -> 请使用**DevEco Studio V3.0.0.900 Beta3**及更高版本。 -> -> 为确保运行效果，本文以使用**DevEco Studio 3.1 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio)获取下载链接。 - +> **说明：** +> +> 请使用**DevEco Studio V3.0.0.900 Beta3**及更高版本。 +> +> 为确保运行效果，本文以使用**DevEco Studio 4.0 Beta1**版本为例，点击[此处](../../release-notes/OpenHarmony-v4.0-beta1.md#配套关系)获取下载链接。 ## 创建ArkTS工程 -1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已经打开了一个工程，请在菜单栏选择**File** > **New** > **Create Project**来创建一个新工程。选择**Application**应用开发（本文以应用开发为例，**Atomic Service**对应为原子化服务开发），选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 +对于不同API版本，创建对应的OpenHarmony工程的步骤不同。主要分为API 9之后的工程创建、API 9及API之前的工程创建两种。 + +此处分别以创建API 10和创建API 9的OpenHarmony工程为例，给出具体的指导。 + +### 创建API 10的OpenHarmony工程 + +1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已经打开了一个工程，请在菜单栏选择**File** > **New** > **Create Project**来创建一个新工程。 + +2. 选择**Application**应用开发（本文以应用开发为例，Atomic Service对应为原子化服务开发），选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 ![createProject](figures/createProject.png) -2. 进入配置工程界面，**Compile SDK**选择“**9**”，**Model** 选择“**Stage**”，其他参数保持默认设置即可。 +3. 进入配置工程界面，**Compile SDK**选择“**3.1.0(API 9)**”，其他参数保持默认设置即可。 ![chooseStageModel](figures/chooseStageModel.png) > **说明：** - > - > 支持使用ArkTS[低代码开发](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ide-low-code-overview-0000001480179573-V3)方式。 - > + > 支持使用ArkTS低代码开发方式。 + > > 低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。 - > + > > 如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。 - -3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 -4. 工程创建完成后，在**entry > build-profile.json5**文件中，将targets中的runtimeOS改为“OpenHarmony”，然后点击右上角提示框的**Sync Now**以进行OpenHarmony应用开发。 +4. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 + +5. 工程创建完成后，在应用级**build-profile.json5**文件中，将**compileSdkVersion**和**compatibleSdkVersion**字段从**app**下迁移到当前选中的products中。当前生效的products可以通过点击编辑区域右上方![zh-cn_image_0000001609333677](figures/zh-cn_image_0000001609333677.png)图标进行查看。 + + ![changeToAPI10](figures/changeToAPI10.png) + +6. 请将**targetSdkVersion**从9改为10，并配置**runtimeOS**为“**OpenHarmony**”。 + + ![targetSdkVersion](figures/targetSdkVersion.png) + +7. 将其他各模块级别的build-profile.json5文件中targets字段下的runtimeOS配置删除。 + + ![deleteRuntimeOS](figures/deleteRuntimeOS.png) +8. 单击Sync Now完成同步。此时工程对应为API 10的OpenHarmony工程。 + +### 创建API 9的OpenHarmony工程 + +1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已经打开了一个工程，请在菜单栏选择**File** > **New** > **Create Project**来创建一个新工程。 + +2. 选择**Application**应用开发（本文以应用开发为例，Atomic Service对应为原子化服务开发），选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 + + ![createProject](figures/createProject.png) + +3. 进入配置工程界面，**Compile SDK**选择“**3.1.0(API 9)**”，其他参数保持默认设置即可。 + + ![chooseStageModel](figures/chooseStageModel.png) + + > **说明：** + > 支持使用ArkTS低代码开发方式。 + > + > 低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。 + > + > 如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。 -## ArkTS工程目录结构（Stage模型） +4. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 + +5. 在模块级**entry > build-profile.json5**文件中，将targets中的**runtimeOS**配置为“**OpenHarmony**”。 + +6. 单击Sync Now完成同步。此时工程对应为API 9的OpenHarmony工程。 + + +## ArkTS工程目录结构（Stage模型）（API 10） ![zh-cn_image_0000001364054489](figures/zh-cn_image_0000001364054489.png) -- **AppScope > app.json5**：应用的全局配置信息。 +- **AppScope > app.json5**：应用的全局配置信息。 + - **entry**：OpenHarmony工程模块，编译构建生成一个[HAP](../../glossary.md#hap)包。 - **src > main > ets**：用于存放ArkTS源码。 + - **src > main > ets > entryability**：应用/服务的入口。 + - **src > main > ets > pages**：应用/服务包含的页面。 + - **src > main > resources**：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见[资源文件的分类](resource-categories-and-access.md#资源分类)。 - - **src > main > module.json5**：模块配置文件。主要包含HAP的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见[module.json5配置文件](module-configuration-file.md)。 - - **build-profile.json5**：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。若需开发OpenHarmony应用，则需开发者自行修改为OpenHarmony。 + + - **src > main > module.json5**：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见[module.json5配置文件](module-configuration-file.md)。 + + - **build-profile.json5**：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。 + - **hvigorfile.ts**：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。 -- **oh_modules**：用于存放三方库依赖信息。关于原npm工程适配ohpm操作，请参考[历史工程手动迁移](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212)。 -- **build-profile.json5**：应用级配置信息，包括签名、产品配置等。 + +- **oh_modules**：用于存放三方库依赖信息。关于原npm工程适配ohpm操作，请参考[历史工程迁移](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212)。 + +- **build-profile.json5**：应用级配置信息，包括签名signingConfigs、产品配置products等。其中products中的runtimeOS可配置当前运行环境，默认为"HarmonyOS"，若需开发OpenHarmony应用，则需开发者自行修改为"OpenHarmony"。 + +- **hvigorfile.ts**：应用级编译构建任务脚本。 + +## ArkTS工程目录结构（Stage模型）（API 9） + +![zh-cn_image_0000001364054489](figures/zh-cn_image_0000001364054489.png) + +- **AppScope > app.json5**：应用的全局配置信息。 + +- **entry**：OpenHarmony工程模块，编译构建生成一个[HAP](../../glossary.md#hap)包。 + - **src > main > ets**：用于存放ArkTS源码。 + + - **src > main > ets > entryability**：应用/服务的入口。 + + - **src > main > ets > pages**：应用/服务包含的页面。 + + - **src > main > resources**：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见[资源文件的分类](resource-categories-and-access.md#资源分类)。 + + - **src > main > module.json5**：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见[module.json5配置文件](module-configuration-file.md)。 + + - **build-profile.json5**：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。其中targets中的runtimeOS可配置当前运行环境，默认为"HarmonyOS"，若需开发OpenHarmony应用，则需开发者自行修改为"OpenHarmony"。 + + - **hvigorfile.ts**：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。 + +- **oh_modules**：用于存放三方库依赖信息。关于原npm工程适配ohpm操作，请参考[历史工程迁移](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212)。 + +- **build-profile.json5**：应用级配置信息，包括签名signingConfigs、产品配置products等。 + - **hvigorfile.ts**：应用级编译构建任务脚本。 @@ -127,7 +207,7 @@ ![secondPage](figures/secondPage.png) - > **说明：** + > **说明：** > > 开发者也可以在右键点击“**pages**”文件夹时，选择“**New > Page**”，则无需手动配置相关页面路由。 - 配置第二个页面的路由。在“**Project**”窗口，打开“**entry > src > main > resources > base > profile**”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下： diff --git a/zh-cn/application-dev/quick-start/start-with-js-fa.md b/zh-cn/application-dev/quick-start/start-with-js-fa.md deleted file mode 100644 index 027047b98c7f9f57dde812613cff25a3601a5927..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/quick-start/start-with-js-fa.md +++ /dev/null @@ -1,237 +0,0 @@ -# 使用JS语言开发（FA模型） - - -> **说明：** -> -> 为确保运行效果，本文以使用**DevEco Studio 3.1 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download)获取下载链接。 - - -## 创建JS工程 - -1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已经打开了一个工程，请在菜单栏选择**File** > **New** > **Create Project**来创建一个新工程。选择**Application**应用开发（本文以应用开发为例，**Atomic Service**对应为原子化服务开发），选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 - - ![createProject](figures/createProject.png) - -2. 进入配置工程界面，**Compile SDK**选择“**8**”（**Compile SDK**选择“**9**”时注意同步选择 **Model** 为“**FA**”，此处以选择“**8**”为例），**Language**选择“**JS**”，其他参数保持默认设置即可。 - - ![chooseFAModel_js](figures/chooseFAModel_js.png) - - > **说明：** - > - > DevEco Studio V2.2 Beta1及更高版本支持使用JS[低代码开发](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ide-low-code-overview-0000001480179573-V3)方式。 - > - > 低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。 - > - > 如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。 - -3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 - -4. 工程创建完成后，在**entry > build-profile.json5**文件中，将targets中的runtimeOS改为“OpenHarmony”，然后点击右上角提示框的**Sync Now**以进行OpenHarmony应用开发。 - - -## JS工程目录结构 - -![zh-cn_image_0000001435376433](figures/zh-cn_image_0000001435376433.png) - -- **entry**：OpenHarmony工程模块，编译构建生成一个[HAP](../../glossary.md#hap)包。 - - **src > main > js**：用于存放js源码。 - - **src > main > js > MainAbility**：应用/服务的入口。 - - **src > main > js > MainAbility > i18n**：用于配置不同语言场景资源内容，比如应用文本词条、图片路径等资源。 - - **src > main > js > MainAbility > pages**：MainAbility包含的页面。 - - **src > main > js > MainAbility > app.js**：承载Ability生命周期。 - - - **src > main > resources**：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见[资源限定与访问](../ui/js-framework-resource-restriction.md)。 - - **src > main > config.json**：模块配置文件。主要包含HAP的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见[应用配置文件（FA模型）](application-configuration-file-overview-fa.md)。 - - **build-profile.json5**：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。若需开发OpenHarmony应用，则需开发者自行修改为OpenHarmony。 - - **hvigorfile.ts**：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。 - -- **build-profile.json5**：应用级配置信息，包括签名、产品配置等。 - -- **hvigorfile.ts**：应用级编译构建任务脚本。 - - -## 构建第一个页面 - -1. 使用文本组件。 - - 工程同步完成后，在“**Project**”窗口，点击“**entry > src > main > js > MainAbility > pages> index**”，打开“**index.hml**”文件，设置Text组件内容。“**index.hml**”文件的示例如下： - - ```html - -
- - Hello World - -
- ``` - -2. 添加按钮，并绑定onclick方法。 - - 在默认页面基础上，我们添加一个button类型的input组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“**index.hml**”文件的示例代码如下： - - ```html - -
- - Hello World - - - - -
- ``` - -3. 设置页面样式。 - - 在“**Project**”窗口，点击“**entry > src > main > js > MainAbility > pages> index**”，打开“**index.css**”文件，可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“**index.css**”文件的示例如下： - - ```css - /* index.css */ - .container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 100%; - height: 100%; - } - - .title { - font-size: 100px; - font-weight: bold; - text-align: center; - width: 100%; - margin: 10px; - } - - .btn { - font-size: 60px; - font-weight: bold; - text-align: center; - width: 40%; - height: 5%; - margin-top: 20px; - } - ``` - -4. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示： - - ![zh-cn_image_0000001311494592](figures/zh-cn_image_0000001311494592.png) - - -## 构建第二个页面 - -1. 创建第二个页面。 - - 在“**Project**”窗口，打开“**entry > src > main > js > MainAbility**”，右键点击“**pages**”文件夹，选择“**New > Page**”，命名为“**second**”，点击“**Finish**”，即完成第二个页面的创建。可以看到文件目录结构如下： - - ![zh-cn_image_0000001311334944](figures/zh-cn_image_0000001311334944.png) - -2. 添加文本及按钮。 - - 参照第一个页面，在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“**second.hml**”文件的示例如下： - - ```html - -
- - Hi there - - - - -
- ``` - -3. **设置页面样式。**“**second.css**”文件的示例如下： - - ```css - /* second.css */ - .container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 100%; - height: 100%; - } - - .title { - font-size: 100px; - font-weight: bold; - text-align: center; - width: 100%; - margin: 10px; - } - - .btn { - font-size: 60px; - font-weight: bold; - text-align: center; - width: 40%; - height: 5%; - margin-top: 20px; - } - ``` - - -## 实现页面间的跳转 - -页面间的导航可以通过[页面路由router](../reference/apis/js-apis-router.md)来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。 - -1. 第一个页面跳转到第二个页面。 - - 在第一个页面中，跳转按钮绑定onclick方法，点击按钮时跳转到第二页。“**index.js**”示例如下： - - ```js - // index.js - // 导入页面路由模块 - import router from '@ohos.router'; - - export default { - onclick: function () { - router.push({ - url: "pages/second/second" - }) - } - } - ``` - -2. 第二个页面返回到第一个页面。 - - 在第二个页面中，返回按钮绑定back方法，点击按钮时返回到第一页。“**second.js**”示例如下： - - ```js - // second.js - // 导入页面路由模块 - import router from '@ohos.router'; - - export default { - back: function () { - router.back() - } - } - ``` - -3. 打开index文件夹下的任意一个文件，点击预览器中的![zh-cn_image_0000001311015192](figures/zh-cn_image_0000001311015192.png)按钮进行刷新。效果如下图所示： - - ![zh-cn_image_0000001311175132](figures/zh-cn_image_0000001311175132.png) - - -## 使用真机运行应用 - -1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 - -2. 点击**File** > **Project Structure...** > **Project** > **Signing Configs**界面勾选“**Automatically generate signature**”，等待自动签名完成即可，点击“**OK**”。如下图所示： - - ![signConfig](figures/signConfig.png) - -3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001364054485](figures/zh-cn_image_0000001364054485.png)按钮运行。效果如下图所示： - - ![zh-cn_image_0000001311175132](figures/zh-cn_image_0000001311175132.png) - -恭喜您已经使用JS语言开发（FA模型）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。 diff --git a/zh-cn/application-dev/website.md b/zh-cn/application-dev/website.md index fe50393cfc6e8066e16301d05e85efaf5929b9f7..0c5cfc7b69835ddcb01d59961891bae5c9274bed 100644 --- a/zh-cn/application-dev/website.md +++ b/zh-cn/application-dev/website.md @@ -5,8 +5,6 @@ - 快速入门 - [开发准备](quick-start/start-overview.md) - [使用ArkTS语言开发（Stage模型）](quick-start/start-with-ets-stage.md) - - [使用ArkTS语言开发（FA模型）](quick-start/start-with-ets-fa.md) - - [使用JS语言开发（FA模型）](quick-start/start-with-js-fa.md) - 开发基础知识 - 应用程序包基础知识 - [应用程序包概述](quick-start/application-package-overview.md)