harmony 鸿蒙构建第一个ArkTS应用（Stage模型）

  • 2022-08-09
  • 浏览 (3981)

构建第一个ArkTS应用（Stage模型）

说明：

为确保运行效果，本文以使用DevEco Studio 4.0 Beta2版本为例，点击此处获取下载链接。

创建ArkTS工程

对于不同API版本，创建对应的OpenHarmony工程的步骤不同。主要分为API 9之后的工程创建、API 9及API 9之前的工程创建两种。

此处分别以创建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

  1. 进入配置工程界面，Compile SDK选择“3.1.0(API 9)”，其他参数保持默认设置即可。

其中Node用来配置当前工程运行的Node.js版本，可选择使用已有的Node.js或下载新的Node.js版本。

chooseStageModel

说明： 支持使用ArkTS低代码开发方式。

低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。

如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。

  1. 点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

  2. 工程创建完成后，在应用级build-profile.json5（与entry同目录级别）文件中，将compileSdkVersion和compatibleSdkVersion字段从app下迁移到当前选中的products中。当前生效的products可以通过点击编辑区域右上方zh-cn_image_0000001609333677图标进行查看。

changeToAPI10

  1. 请将targetSdkVersion从9改为10，并配置runtimeOS为“OpenHarmony”。

targetSdkVersion

  1. 在模块级entry > build-profile.json5文件中，将targets字段下的runtimeOS配置删除。

deleteRuntimeOS

  1. 单击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

  1. 进入配置工程界面，Compile SDK选择“3.1.0(API 9)”，其他参数保持默认设置即可。

其中Node用来配置当前工程运行的Node.js版本，可选择使用已有的Node.js或下载新的Node.js版本。

chooseStageModel

说明： 支持使用ArkTS低代码开发方式。

低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。

如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。

  1. 点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

  2. 在模块级entry > build-profile.json5文件中，将targets中的runtimeOS配置为“OpenHarmony”。

  3. 单击Sync Now完成同步。此时工程对应为API 9的OpenHarmony工程。

ArkTS工程目录结构（Stage模型）（API 10）

project

  • AppScope > app.json5：应用的全局配置信息。

  • entry：OpenHarmony工程模块，编译构建生成一个HAP包。

    • src > main > ets：用于存放ArkTS源码。

    • src > main > ets > entryability：应用/服务的入口。

    • src > main > ets > pages：应用/服务包含的页面。

    • src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源文件的分类。

    • src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。

    • build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。

    • hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。

  • oh_modules：用于存放三方库依赖信息。关于原npm工程适配ohpm操作，请参考历史工程迁移。

  • build-profile.json5：应用级配置信息，包括签名signingConfigs、产品配置products等。其中products中的runtimeOS可配置当前运行环境，默认为”HarmonyOS”，若需开发OpenHarmony应用，则需开发者自行修改为”OpenHarmony”。

  • hvigorfile.ts：应用级编译构建任务脚本。

ArkTS工程目录结构（Stage模型）（API 9）

project

  • AppScope > app.json5：应用的全局配置信息。

  • entry：OpenHarmony工程模块，编译构建生成一个HAP包。

    • src > main > ets：用于存放ArkTS源码。

    • src > main > ets > entryability：应用/服务的入口。

    • src > main > ets > pages：应用/服务包含的页面。

    • src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源文件的分类。

    • src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。

    • build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。其中targets中的runtimeOS可配置当前运行环境，默认为”HarmonyOS”，若需开发OpenHarmony应用，则需开发者自行修改为”OpenHarmony”。

    • hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。

  • oh_modules：用于存放三方库依赖信息。关于原npm工程适配ohpm操作，请参考历史工程迁移。

  • build-profile.json5：应用级配置信息，包括签名signingConfigs、产品配置products等。

  • hvigorfile.ts：应用级编译构建任务脚本。

构建第一个页面

  1. 使用文本组件。

工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由Text组件组成。“Index.ets”文件的示例如下：

   // 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%')
     }
   }
  1. 添加按钮。

在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“Index.ets”文件的示例如下：

   // 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%')
     }
   }
  1. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：

zh-cn_image_0000001311334976

构建第二个页面

  1. 创建第二个页面。

    • 新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets”，右键点击“pages”文件夹，选择“New > ArkTS File”，命名为“Second”，点击“Finish”。可以看到文件目录结构如下：

    secondPage

    说明：

    开发者也可以在右键点击“pages”文件夹时，选择“New > Page”，则无需手动配置相关页面路由。 - 配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：

      {
    "src": [
      "pages/Index",
      "pages/Second"
    ]
  }

  2. 添加文本及按钮。

参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“Second.ets”文件的示例如下：

   // 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来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。

  1. 第一个页面跳转到第二个页面。

在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“Index.ets”文件的示例如下：

   // Index.ets
   // 导入页面路由模块
   import router from '@ohos.router';
   import { BusinessError } from '@ohos.base';
   
   @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(() => {
             console.info(`Succeeded in clicking the 'Next' button.`)
            // 跳转到第二页
              router.pushUrl({ url: 'pages/Second' }).then(() => {
                console.info('Succeeded in jumping to the second page.')
              }).catch((err: BusinessError) => {
                console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)
              })
           })
         }
         .width('100%')
       }
       .height('100%')
     }
   }
  1. 第二个页面返回到第一个页面。

在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。“Second.ets”文件的示例如下：

   // Second.ets
   // 导入页面路由模块
   import router from '@ohos.router';
   import { BusinessError } from '@ohos.base';
   
   @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(() => {
             console.info(`Succeeded in clicking the 'Back' button.`)
             try {
               // 返回第一页
               router.back()
               console.info('Succeeded in returning to the first page.')
             } catch (err) {
                let code = (err as BusinessError).code;
                let message = (err as BusinessError).message;
               console.error(`Failed to return to the first page.Code is ${code}, message is ${message}`)
             }
           })
         }
         .width('100%')
       }
       .height('100%')
     }
   }
  1. 打开Index.ets文件，点击预览器中的zh-cn_image_0000001311015192按钮进行刷新。效果如下图所示：

zh-cn_image_0000001364254729

使用真机运行应用

  1. 将搭载OpenHarmony标准系统的开发板与电脑连接。

  2. 点击File > Project Structure… > Project > SigningConfigs界面勾选“Automatically generate signature”，等待自动签名完成即可，点击“OK”。如下图所示：

signConfig

  1. 在编辑窗口右上角的工具栏，点击zh-cn_image_0000001364054485按钮运行。效果如下图所示：

zh-cn_image_0000001364254729

恭喜您已经使用ArkTS语言开发（Stage模型）完成了第一个OpenHarmony应用，快来探索更多的OpenHarmony功能吧。

你可能感兴趣的鸿蒙文章

harmony 鸿蒙入门

harmony 鸿蒙app.json5配置文件

harmony 鸿蒙app对象内部结构

harmony 鸿蒙应用配置文件概述（FA模型）

harmony 鸿蒙应用配置文件概述（Stage模型）

harmony 鸿蒙应用程序包安装和卸载流程

harmony 鸿蒙应用程序包概述

harmony 鸿蒙FA模型应用程序包结构

harmony 鸿蒙Stage模型应用程序包结构

harmony 鸿蒙应用程序包更新流程

3  赞
  • 所属分类： 后端技术
  • 本文标签： 软件 鸿蒙
  • 版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/9ad047483ab44defbeb09f333024f2ca
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录