diff --git a/zh-cn/application-dev/quick-start/figures/01.png b/zh-cn/application-dev/quick-start/figures/01.png index cb9ddd68fc3ee2e6e15700a6a7a5d9e6ff1f4cc7..8342856ec6643e20a941187852e6aef3ead11010 100644 Binary files a/zh-cn/application-dev/quick-start/figures/01.png and b/zh-cn/application-dev/quick-start/figures/01.png differ diff --git a/zh-cn/application-dev/quick-start/figures/02.png b/zh-cn/application-dev/quick-start/figures/02.png index 4fd0a6d3e60c0a22a9b69ea9f46fe62050d37a7e..19dd76ca232282b19883dde63075c5d155e7db70 100644 Binary files a/zh-cn/application-dev/quick-start/figures/02.png and b/zh-cn/application-dev/quick-start/figures/02.png differ diff --git a/zh-cn/application-dev/quick-start/figures/04.png b/zh-cn/application-dev/quick-start/figures/04.png index 2d66f7513893e83e4e897ed63319316d9f5bd40e..cf23d17c7ee8552e30a5b234c97862b51981dcf8 100644 Binary files a/zh-cn/application-dev/quick-start/figures/04.png and b/zh-cn/application-dev/quick-start/figures/04.png differ diff --git a/zh-cn/application-dev/quick-start/figures/06.png b/zh-cn/application-dev/quick-start/figures/06.png index 37b63e9f1ee245f7403667b03ab89ada0479572f..80dd6531d40c59ecebb13a095cd0642db38302fe 100644 Binary files a/zh-cn/application-dev/quick-start/figures/06.png and b/zh-cn/application-dev/quick-start/figures/06.png differ diff --git a/zh-cn/application-dev/quick-start/figures/07.png b/zh-cn/application-dev/quick-start/figures/07.png index 1a232454b8485269d473611b126489c87d2f82d9..0f34d01d824ae1780c73cade9a39fff5f4b9b84e 100644 Binary files a/zh-cn/application-dev/quick-start/figures/07.png and b/zh-cn/application-dev/quick-start/figures/07.png differ diff --git a/zh-cn/application-dev/quick-start/figures/09.png b/zh-cn/application-dev/quick-start/figures/09.png index ac6dbbab11846274c42bfdd61f7bd5dfe0ace99f..2c08d85c610336a71b06407800603ed5c101606d 100644 Binary files a/zh-cn/application-dev/quick-start/figures/09.png and b/zh-cn/application-dev/quick-start/figures/09.png differ diff --git a/zh-cn/application-dev/quick-start/figures/@state.png b/zh-cn/application-dev/quick-start/figures/@state.png deleted file mode 100644 index 7c59f21eddc408bb9d13ef82420674fd094e5a7d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/@state.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311175120.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311175120.png deleted file mode 100644 index 12978dc861aaa1f826404d9c6838bb8628381615..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311175120.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311175132.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311175132.png index 2f401b2f8aa84e89bdef25bcf615ff1a621ab6d6..5eb654b04cbb85cda6e910949cd6312db6e1f969 100644 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311175132.png and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311175132.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311334944.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311334944.png index 9ce82237297b06c04113d0368d7145661de0d997..9f98b8a28700b08b1bbed0c7a42bdb827fd64667 100644 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311334944.png and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311334944.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311334972.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311334972.png deleted file mode 100644 index 6499d0b2de7ee290b958059d13d9d19995e0e511..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311334972.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311334976.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311334976.png index 7891c03e8fab1eaaf6159964fc338e0be9bb080a..fbbde9923a131d3ab69257b28cfe33ca2a1040cf 100644 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311334976.png and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311334976.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311494580.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311494580.png deleted file mode 100644 index 6c1ea01d448434e7cfd94e174474e72b57d3b4cc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311494580.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311494592.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311494592.png index a88a2ec512c0fa4f374d1e9ac03a27c717aeab58..a8fac2a024e51aeb0439463dab83f2763fa3fa76 100644 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311494592.png and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311494592.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311494604.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311494604.png deleted file mode 100644 index 6c1ea01d448434e7cfd94e174474e72b57d3b4cc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001311494604.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001363934577.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001363934577.png deleted file mode 100644 index 6499d0b2de7ee290b958059d13d9d19995e0e511..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001363934577.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001363934589.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001363934589.png deleted file mode 100644 index 2f401b2f8aa84e89bdef25bcf615ff1a621ab6d6..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001363934589.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364054489.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364054489.png index a69b0c6f3b047e5961b05b40b663ce972a90b459..bcc45efdddb87a39201661c5f6d3ccbce9bfd3e6 100644 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364054489.png and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364054489.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364173989.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364173989.png deleted file mode 100644 index f4b6f516a8340914c41600ef24012dd3699648b6..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364173989.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364174013.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364174013.png deleted file mode 100644 index 12978dc861aaa1f826404d9c6838bb8628381615..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364174013.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364254729.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364254729.png index 7fba7aab32a92752b341af024ef97e5acfe3d73d..164371727ee8a351e2c42f4b3ecab9175e088e7c 100644 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364254729.png and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364254729.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364254741.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364254741.png deleted file mode 100644 index fbbde9923a131d3ab69257b28cfe33ca2a1040cf..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364254741.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364254773.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364254773.png deleted file mode 100644 index 6499d0b2de7ee290b958059d13d9d19995e0e511..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001364254773.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001384652328.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001384652328.png new file mode 100644 index 0000000000000000000000000000000000000000..e1ece174d44626d95ded4be698531937bde650a3 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001384652328.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001435376433.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001435376433.png new file mode 100644 index 0000000000000000000000000000000000000000..45a608777708de9a4e8fbe6148974b489aa0388d Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001435376433.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 8b3da7d45a8f15236dcd3ed13f3fecceff8589f4..bd60ac1f216078584fa45713809cf6783153c006 100644 --- a/zh-cn/application-dev/quick-start/start-overview.md +++ b/zh-cn/application-dev/quick-start/start-overview.md @@ -2,10 +2,8 @@ 本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用(如下图所示),快速了解工程目录的主要文件,熟悉OpenHarmony应用开发流程。 - ![zh-cn_image_0000001364254729](figures/zh-cn_image_0000001364254729.png) - 在开始之前,您需要了解有关OpenHarmony应用的一些基本概念:UI框架的简单说明、Ability的基本概念。 @@ -45,7 +43,7 @@ FA模型和Stage模型的工程目录结构存在差异,Stage模型只支持 ## 工具准备 -1. 安装最新版[DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio#download)。 +1. 安装最新版[DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio)。 2. 请参考[配置OpenHarmony SDK](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443),完成**DevEco Studio**的安装和开发环境配置。 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 index 8508a182044fa156f6253aa4f08168c32ec694ef..50eaa616808ba88a28ff12d8379bfdf318bd8b04 100644 --- a/zh-cn/application-dev/quick-start/start-with-ets-fa.md +++ b/zh-cn/application-dev/quick-start/start-with-ets-fa.md @@ -2,18 +2,19 @@ > **说明:** -> 请使用**DevEco Studio V3.0.0.601 Beta1**及更高版本。 -> -> 为确保运行效果,本文以使用**DevEco Studio V3.0.0.993**版本为例,点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download)获取下载链接。 +> +> 请使用**DevEco Studio V3.0.0.601 Beta1**及更高版本。 +> +> 为确保运行效果,本文以使用**DevEco Studio V3.1.0.100**版本为例,点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio)获取下载链接。 -## 创建eTS工程 +## 创建ArkTS工程 1. 若首次打开**DevEco Studio**,请点击**Create Project**创建工程。如果已经打开了一个工程,请在菜单栏选择**File** > **New** > **Create Project**来创建一个新工程。选择**OpenHarmony**模板库,选择模板“**Empty Ability**”,点击**Next**进行下一步配置。 ![01](figures/01.png) -2. 进入配置工程界面,**Compile SDK** 选择“**8**”(**Compile SDK**选择“**9**”时注意同步选择**Model** 为“**FA**”,此处以选择“**8**”为例),**Language**选择“**eTS**”,其他参数保持默认设置即可。 +2. 进入配置工程界面,**Compile SDK** 选择“**8**”(**Compile SDK**选择“**9**”时注意同步选择**Model** 为“**FA**”,此处以选择“**8**”为例),**Language**选择“**ArkTS**”,其他参数保持默认设置即可。 ![02](figures/02.png) @@ -27,7 +28,9 @@ 3. 点击**Finish**,工具会自动生成示例代码和相关资源,等待工程创建完成。 -## eTS工程目录结构 +## ArkTS工程目录结构(FA模型) + +![zh-cn_image_0000001384652328](figures/zh-cn_image_0000001384652328.png) - **entry**:OpenHarmony工程模块,编译构建生成一个[HAP](../../glossary.md#hap)包。 - **src > main > ets**:用于存放ets源码。 @@ -38,11 +41,11 @@ - **src > main > resources**:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。关于资源文件,详见[资源文件的分类](resource-categories-and-access.md#资源分类)。 - **src > main > config.json**:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见[应用包结构配置文件的说明(FA模型)](package-structure.md)。 - **build-profile.json5**:当前的模块信息 、编译信息配置项,包括buildOption、targets配置等。 - - **hvigorfile.js**:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。 + - **hvigorfile.ts**:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。 - **build-profile.json5**:应用级配置信息,包括签名、产品配置等。 -- **hvigorfile.js**:应用级编译构建任务脚本。 +- **hvigorfile.ts**:应用级编译构建任务脚本。 ## 构建第一个页面 @@ -112,15 +115,13 @@ 3. 在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示: - ![zh-cn_image_0000001364254741](figures/zh-cn_image_0000001364254741.png) + ![zh-cn_image_0000001311334976](figures/zh-cn_image_0000001311334976.png) ## 构建第二个页面 1. 创建第二个页面。 - - - 新建第二个页面文件。在“**Project**”窗口,打开“**entry > src > main > ets > MainAbility**”,右键点击“**pages**”文件夹,选择“**New > eTS File**”,命名为“**second**”,点击“**Finish**”。可以看到文件目录结构如下: - + - 新建第二个页面文件。在“**Project**”窗口,打开“**entry > src > main > ets > MainAbility**”,右键点击“**pages**”文件夹,选择“**New > ArkTS File**”,命名为“**second**”,点击“**Finish**”。可以看到文件目录结构如下: ![zh-cn_image_0000001311334932](figures/zh-cn_image_0000001311334932.png) > **说明:** @@ -273,21 +274,21 @@ } ``` -3. 打开index.ets文件,点击预览器中的![zh-cn_image_0000001311175120](figures/zh-cn_image_0000001311175120.png)按钮进行刷新。效果如下图所示: +3. 打开index.ets文件,点击预览器中的![zh-cn_image_0000001311015192](figures/zh-cn_image_0000001311015192.png)按钮进行刷新。效果如下图所示: - ![zh-cn_image_0000001364173989](figures/zh-cn_image_0000001364173989.png) + ![zh-cn_image_0000001364254729](figures/zh-cn_image_0000001364254729.png) ## 使用真机运行应用 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 -2. 点击**File**> **Project Structure...** > **Project**>**SigningConfigs** 界面勾选“**Automatically generate signature**”,等待自动签名完成即可,点击“**OK**”。如下图所示: +2. 点击**File** > **Project Structure...** > **Project** > **SigningConfigs** 界面勾选“**Automatically generate signature**”,等待自动签名完成即可,点击“**OK**”。如下图所示: ![06](figures/06.png) -3. 在编辑窗口右上角的工具栏,点击![zh-cn_image_0000001311494580](figures/zh-cn_image_0000001311494580.png)按钮运行。效果如下图所示: +3. 在编辑窗口右上角的工具栏,点击![zh-cn_image_0000001364054485](figures/zh-cn_image_0000001364054485.png)按钮运行。效果如下图所示: - ![zh-cn_image_0000001363934577](figures/zh-cn_image_0000001363934577.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 2db4732dc202fe9f23bb8b07008869607809a8ec..ca767f4c3b900af77e99698aa898b4ef8cdc23f3 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 @@ -2,12 +2,13 @@ > **说明:** +> > 请使用**DevEco Studio V3.0.0.900 Beta3**及更高版本。 > -> 为确保运行效果,本文以使用**DevEco Studio V3.0.0.993**版本为例,点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download)获取下载链接。 +> 为确保运行效果,本文以使用**DevEco Studio V3.1.0.100**版本为例,点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio)获取下载链接。 -## 创建eTS工程 +## 创建ArkTS工程 1. 若首次打开**DevEco Studio**,请点击**Create Project**创建工程。如果已经打开了一个工程,请在菜单栏选择**File** > **New** > **Create Project**来创建一个新工程。选择**OpenHarmony**模板库,选择模板“**Empty Ability**”,点击**Next**进行下一步配置。 @@ -28,36 +29,32 @@ 3. 点击**Finish**,工具会自动生成示例代码和相关资源,等待工程创建完成。 -## eTS工程目录结构 +## ArkTS工程目录结构(Stage模型) ![zh-cn_image_0000001364054489](figures/zh-cn_image_0000001364054489.png) -- **AppScope > app.json5**:应用的全局配置信息。 - - **entry**:OpenHarmony工程模块,编译构建生成一个[HAP](../../glossary.md#hap)包。 - **src > main > ets**:用于存放ets源码。 - - **src > main > ets > Application > AbilityStage.ts**:实现AbilityStage接口。 - - **src > main > ets > MainAbility**:应用/服务的入口。 - - **src > main > ets > MainAbility > MainAbility.ts**:承载Ability生命周期。 - - **src > main > ets > pages**:MainAbility包含的页面。 + - **src > main > ets > entryability**:应用/服务的入口。 + - **src > main > ets > pages**:应用/服务包含的页面。 - **src > main > resources**:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。关于资源文件,详见[资源文件的分类](resource-categories-and-access.md#资源分类)。 - **src > main > module.json5**:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见[应用包结构配置文件的说明(Stage模型)](stage-structure.md)。 - **build-profile.json5**:当前的模块信息 、编译信息配置项,包括buildOption、targets配置等。 - - **hvigorfile.js**:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。 + - **hvigorfile.ts**:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。 - **build-profile.json5**:应用级配置信息,包括签名、产品配置等。 -- **hvigorfile.js**:应用级编译构建任务脚本。 +- **hvigorfile.ts**:应用级编译构建任务脚本。 ## 构建第一个页面 1. 使用文本组件。 - 工程同步完成后,在“**Project**”窗口,点击“**entry > src > main > ets > pages**”,打开“**index.ets**”文件,可以看到页面由Text组件组成。“**index.ets**”文件的示例如下: + 工程同步完成后,在“**Project**”窗口,点击“**entry > src > main > ets > pages**”,打开“**Index.ets**”文件,可以看到页面由Text组件组成。“**Index.ets**”文件的示例如下: ```ts - // index.ets + // Index.ets @Entry @Component struct Index { @@ -79,10 +76,10 @@ 2. 添加按钮。 - 在默认页面基础上,我们添加一个Button组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“**index.ets**”文件的示例如下: + 在默认页面基础上,我们添加一个Button组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“**Index.ets**”文件的示例如下: ```ts - // index.ets + // Index.ets @Entry @Component struct Index { @@ -123,30 +120,28 @@ ## 构建第二个页面 1. 创建第二个页面。 - - - 新建第二个页面文件。在“**Project**”窗口,打开“**entry > src > main > ets**”,右键点击“**pages**”文件夹,选择“**New > eTS File**”,命名为“**second**”,点击“**Finish**”。可以看到文件目录结构如下: - + - 新建第二个页面文件。在“**Project**”窗口,打开“**entry > src > main > ets **”,右键点击“**pages**”文件夹,选择“**New > ArkTS File**”,命名为“**Second**”,点击“**Finish**”。可以看到文件目录结构如下: ![09](figures/09.png) > **说明:** > 开发者也可以在右键点击“**pages**”文件夹时,选择“**New > Page**”,则无需手动配置相关页面路由。 - - 配置第二个页面的路由。在“**Project**”窗口,打开“**entry > src > main > resources > base > profile**”,在main_pages.json文件中的“src”下配置第二个页面的路由“pages/second”。示例如下: + - 配置第二个页面的路由。在“**Project**”窗口,打开“**entry > src > main > resources > base > profile**”,在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下: ```json { "src": [ - "pages/index", - "pages/second" + "pages/Index", + "pages/Second" ] } ``` 2. 添加文本及按钮。 - 参照第一个页面,在第二个页面添加Text组件、Button组件等,并设置其样式。“**second.ets**”文件的示例如下: + 参照第一个页面,在第二个页面添加Text组件、Button组件等,并设置其样式。“**Second.ets**”文件的示例如下: ```ts - // second.ets + // Second.ets @Entry @Component struct Second { @@ -185,10 +180,10 @@ 1. 第一个页面跳转到第二个页面。 - 在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。“**index.ets**”文件的示例如下: + 在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。“**Index.ets**”文件的示例如下: ```ts - // index.ets + // Index.ets // 导入页面路由模块 import router from '@ohos.router'; @@ -218,7 +213,7 @@ .height('5%') // 跳转按钮绑定onClick事件,点击时跳转到第二页 .onClick(() => { - router.push({ url: 'pages/second' }) + router.push({ url: 'pages/Second' }) }) } .width('100%') @@ -230,10 +225,10 @@ 2. 第二个页面返回到第一个页面。 - 在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。“**second.ets**”文件的示例如下: + 在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。“**Second.ets**”文件的示例如下: ```ts - // second.ets + // Second.ets // 导入页面路由模块 import router from '@ohos.router'; @@ -272,21 +267,21 @@ } ``` -3. 打开index.ets文件,点击预览器中的![zh-cn_image_0000001311015192](figures/zh-cn_image_0000001311015192.png)按钮进行刷新。效果如下图所示: +3. 打开Index.ets文件,点击预览器中的![zh-cn_image_0000001311015192](figures/zh-cn_image_0000001311015192.png)按钮进行刷新。效果如下图所示: - ![zh-cn_image_0000001364254773](figures/zh-cn_image_0000001364254773.png) + ![zh-cn_image_0000001364254729](figures/zh-cn_image_0000001364254729.png) ## 使用真机运行应用 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 -2. 点击**File**> **Project Structure...** > **Project**>**SigningConfigs**界面勾选“**Automatically generate signature**”,等待自动签名完成即可,点击“**OK**”。如下图所示: +2. 点击**File** > **Project Structure...** > **Project** > **SigningConfigs**界面勾选“**Automatically generate signature**”,等待自动签名完成即可,点击“**OK**”。如下图所示: ![06](figures/06.png) 3. 在编辑窗口右上角的工具栏,点击![zh-cn_image_0000001364054485](figures/zh-cn_image_0000001364054485.png)按钮运行。效果如下图所示: - ![zh-cn_image_0000001311334972](figures/zh-cn_image_0000001311334972.png) + ![zh-cn_image_0000001364254729](figures/zh-cn_image_0000001364254729.png) 恭喜您已经使用ArkTS语言开发(Stage模型)完成了第一个OpenHarmony应用,快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。 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 index 5ff342becee7da2850a374270c9d2f0e875615f1..4a64d8e796d4a3325333858e77c95c5748a3ef53 100644 --- a/zh-cn/application-dev/quick-start/start-with-js-fa.md +++ b/zh-cn/application-dev/quick-start/start-with-js-fa.md @@ -2,6 +2,7 @@ > **说明:** +> > 为确保运行效果,本文以使用**DevEco Studio V3.0.0.993**版本为例,点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download)获取下载链接。 @@ -27,6 +28,8 @@ ## 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**:应用/服务的入口。 @@ -37,11 +40,11 @@ - **src > main > resources**:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。关于资源文件,详见[资源限定与访问](../ui/js-framework-resource-restriction.md)。 - **src > main > config.json**:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见[应用包结构配置文件的说明(FA模型)](package-structure.md)。 - **build-profile.json5**:当前的模块信息 、编译信息配置项,包括buildOption、targets配置等。 - - **hvigorfile.js**:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。 + - **hvigorfile.ts**:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。 - **build-profile.json5**:应用级配置信息,包括签名、产品配置等。 -- **hvigorfile.js**:应用级编译构建任务脚本。 +- **hvigorfile.ts**:应用级编译构建任务脚本。 ## 构建第一个页面 @@ -211,7 +214,7 @@ } ``` -3. 打开index文件夹下的任意一个文件,点击预览器中的![zh-cn_image_0000001364174013](figures/zh-cn_image_0000001364174013.png)按钮进行刷新。效果如下图所示: +3. 打开index文件夹下的任意一个文件,点击预览器中的![zh-cn_image_0000001311015192](figures/zh-cn_image_0000001311015192.png)按钮进行刷新。效果如下图所示: ![zh-cn_image_0000001311175132](figures/zh-cn_image_0000001311175132.png) @@ -220,17 +223,18 @@ 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 -2. 点击**File**> **Project Structure...** > **Project**>**Signing Configs**界面勾选“**Automatically generate signature**”,等待自动签名完成即可,点击“**OK**”。如下图所示: +2. 点击**File** > **Project Structure...** > **Project** > **Signing Configs**界面勾选“**Automatically generate signature**”,等待自动签名完成即可,点击“**OK**”。如下图所示: ![06](figures/06.png) -3. 在编辑窗口右上角的工具栏,点击![zh-cn_image_0000001311494604](figures/zh-cn_image_0000001311494604.png)按钮运行。效果如下图所示: +3. 在编辑窗口右上角的工具栏,点击![zh-cn_image_0000001364054485](figures/zh-cn_image_0000001364054485.png)按钮运行。效果如下图所示: - ![zh-cn_image_0000001363934589](figures/zh-cn_image_0000001363934589.png) + ![zh-cn_image_0000001311175132](figures/zh-cn_image_0000001311175132.png) 恭喜您已经使用JS语言开发(FA模型)完成了第一个OpenHarmony应用,快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。 ## 相关实例 针对使用JS语言开发(FA模型),有以下相关实例可供参考: + - [`JsHelloWorld`:你好世界(JS)(API8)](https://gitee.com/openharmony/applications_app_samples/tree/master/common/JsHelloWorld)