10分钟学会鸿蒙ArkTs原生应用开发，极佳入门教程！ 点击公众关注号，“技术干货”及时达！「上一篇文章」： 鸿蒙入门极速版：超简洁保姆级教程！纯干货，快收藏！（https://juejin.cn/post/7393606971927478287） 「欢迎关注本专栏」：鸿蒙开发实践-基础入门（https://juejin.cn/column/7392535991972266035） 简介大家好，我是石小石！在上一节教程中，我们使用类「js的web开发范式」实现了一个模拟表盘的效果： 本教程，我们将使用「鸿蒙原生ArkTs语言」实现一个记事本功能开发，帮助大家迅速上手、入门鸿蒙应用开发。 通过本教程您将学习到以下知识点： ?快速构建项目应用了解鸿蒙项目框架学会使用ArkUI组件实现页面布局学会使用路由实现页面跳转学会使用函数实现记事本的增删....... ?知识回顾HarmonyOS SDKHarmonyOS SDK是一个开放能力合集，提供应用框架、应用服务、系统、媒体、AI、图形在内的六大领域丰富完备的能力。 简单来说，借助它我们可以实现「元服务开发」、「鸿蒙原生应用开发」！ 鸿蒙原生应用开发通俗的来水，鸿蒙的原生应用包含手机、Pad、TV、车载智慧屏和穿戴设备。理论上，开发一个应用，在这些不同的终端都是可以运行的。 要开发原生应用，我们还需要知道三个基础的东西： 「DevEco Studio」简单来说，就是像IDEA的代码编译器 「ArkTs」ArkTS是鸿蒙生态的应用开发语言，它在保持TypeScript（「前端狂喜，哈哈哈」）基本语法风格的基础上，进一步通过规范强化静态检查和分析..... ArkTs由 「Ark和」 TypeScript两个单词组成。Ark 英[ɑ?k] ，译文方舟。所以，我们可以叫ArkTs为方舟编程语言。 「ArkUI」ArkUI是一套构建分布式应用界面的声明式UI开发框架。简单来说，「ArkUI是基于ArkTS的声明式的UI开发范式，」 是ArkTS语言的一个具体应用或扩展，用于构建用户界面。ArkTs和ArkUI前端同学可以简单理解为js和element UI的关系。 构建第一个应用官方api：文档中心（https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/arkui-js-comp-V5） 前言Arkts的基本语法与前端得「Typescript」风格非常相似，本文默认大家掌握基本的Typescript语法，因此，不会对Arkts的基本语法过多阐述。「下一文章，我们将详细介绍Arkts语言特性」。 工程创建点击「Create Project」创建工程选择「Application」应用（tomic Service为元服务开发）注意，后面有很多模板，模板上的图标代表这个应用可以在哪些终端运行 ?注：mac软件默认是英文，可以设置为中文：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-software-install-0000001558013317-V5 ?项目预览要预览默认的项目，我们点击右侧的【预览器】按钮即可。 工程目录结构我们采用默认模板创建的项目，它的项目结构如下 ├──.hvigor#存放编译构建相关的临时文件或配置 ├──.idea#IDE（如IntelliJIDEA）的配置目录 ├──AppScope │└──entry#HarmonyOS工程模块，编译构建生成一个HAP包 │├──src ││├──main │││└──ets │││├──entryability#应用/服务的入口 ││││└──[ArkTS源码文件] │││└──entrybackupability#应用提供扩展的备份恢复能力 │││└──[ArkTS源码文件] ││├──pages#应用/服务包含的页面 │││└──Index.ets#页面源码文件 ││└──resources#存放应用/服务所用到的资源文件 ││└──mock ││└──ohosTest ││├──test │││└──.gitignore ││├──build-profile.json5#模块信息、编译信息配置项 ││├──hvigorfile.ts#模块级编译构建任务脚本 ││├──obfuscation-rules.txt#混淆规则文件 ││└──oh-package.json5#描述包名、版本、入口文件和依赖项等信息 │└──module.json5#模块配置文件 ├──.gitignore#Git忽略文件配置 ├──build-profile.json5#工程级配置信息 ├──hvigorfile.ts#工程级编译构建任务脚本 ├──obfuscation-rules.txt#混淆规则文件 ├──oh-package.json5#描述全局配置，如依赖覆盖、依赖关系重写和参数化配置 └──oh_modules#存放三方库依赖信息 ├──.gitignore ├──build-profile.json5#三方库编译信息配置 ├──hvigorfile.ts#三方库编译构建任务脚本 ├──local.properties#本地属性配置（如SDK路径） └──oh-package-lock.json5#锁定依赖版本，确保项目依赖的一致性 对于我们初学者，它的目录可以简化如下 ├──AppScope │└──entry#HarmonyOS工程模块，编译构建生成一个HAP包 │├──src ││├──main#应用/服务的入口 ││├──pages#应用/服务包含的页面（写页面逻辑的地方） │││└──Index.ets#页面源码文件 ││└──resources#存放应用/服务所用到的资源文件 │└──module.json5#模块配置文件 我们只需要关注在pages下进行多页面开发，在module.json5中进行页面配置即可。 代码简析在正式开发前，我们先简单学习一下默认模板的代码，熟悉一下Artks的UI范式语法 @Entry @Component structIndex{ @Statemessage:string='HelloWorld'; build(){ RelativeContainer(){ Text(this.message) .id('HelloWorld') .fontSize(50) .fontWeight(FontWeight.Bold) .alignRules({ center:{anchor:'__container__',align:VerticalAlign.Center}, middle:{anchor:'__container__',align:HorizontalAlign.Center} }) } .height('100%') .width('100%') } } 默认的代码很少，效果也很简单，但是对于只写js和不写样式的后端来说可能都有些陌生。 没关系，我们看一个代码结构图 ?装饰器： 对后端来说装饰器在简单不过了，对于前端来说，我们可以理解为它用于装饰类、结构、方法以及变量，并赋予他们特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Index。系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。系统组件、属性方法、事件方法具体使用可参考基于ArkTS的声明式开发范式。?构建第一个页面页面简述我们的第一个页面很简单，就是一个按钮，点击可以进行跳转。所以我们只需要实现两个核心功能 完成页面布局，添加按钮给按钮添加点击跳转事件在开发第一个页面前，我们先删除默认的模板代码，让框架更加清晰 @Entry @Component structIndex{ build(){ } } 页面布局我们的按钮应该显示页面正中间，我们可以借助ArkUI的Row容器组件进行页面的布局 @Entry @Component structIndex{ build(){ Row(){ //子组件写在这里.... }.width('100%').height('100%').backgroundColor('#1677ff').alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center) } } width、height、backgroundColor、alignItems等等这些属性对前端来说应该是非常熟悉的。上述代码中，我们使用alignItems的VerticalAlign.Cente属性和justifyContent的FlexAlign.Center保证按钮能垂直居中展示在页面。 现在，我们参考ArkUI的button组件，给页面添加一个按钮。 注意，我们在Button内部使用了Text组件，用于展示文字。 看起来，按钮样式有点丑，我们给Button组件美化一下，加点样式 @Entry @Component structIndex{ build(){ Row(){ //添加按钮组件 Button(){ //文本组件 Text('你好，鸿蒙') .fontSize(22) .fontColor('#fff') .fontWeight(FontWeight.Bold) } //按钮组件的类型（默认是50%圆角的） .type(ButtonType.Normal) //按钮的圆角级别 .borderRadius('10%') .margin({ top:20 }) //按钮的背景色 .backgroundColor('#ff9c6e') .width('40%') .height('5%') } .width('100%') .height('100%') .backgroundColor('#d4380d') .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Center) } } 现在看起来，样式好看很多 实现页面间的跳转页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。 路由的概念和vue、react的路由十分接近，因此，前端只需要了解写法即可 假设我们第二个页面的路由是pages/Second，那我们只需给代码添加如下的点击事件 //导入页面路由模块 import{router}from'@kit.ArkUI'; @Entry @Component structIndex{ build(){ Row(){ //添加按钮组件 Button(){ //文本组件 Text('你好，鸿蒙') .fontSize(22) .fontColor('#fff') .fontWeight(FontWeight.Bold) } //跳转按钮绑定onClick事件，点击时跳转到第二页 .onClick(()={ //跳转到第二页 router.pushUrl({url:'pages/Second'}) }) } .width('100%') .height('100%') .backgroundColor('#d4380d') .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Center) } } OK，现在我们去实现第二个页面。 构建第二个页面创建第二个页面新在“「Project」”窗口，右键点击“「pages」”文件夹，选择“「New ArkTS File」”，命名为“「Second」”，点击「回车键」。 创建好后，我们给第二个页面先简单写个内容 //Second.ets @Entry @Component structSecond{ @Statemessage:string='这是第二个页面' build(){ Row(){ Column(){ Text(this.message) } .width('100%') } .height('100%') } } 配置第二个页面的路由在“「entry src main resources base profile」”路径下，我们可以在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。 { "src":[ "pages/Index", "pages/Second" ] } 路由配置好后，我们就可以试一试页面的跳转功能了。 页面简述根据我们的需求 页面应该有一个输入框、一个添加按钮、一个同于展示数据的列表。 输入框我们可以使用ArkUI的TextInput组件，添加按钮使用Button组件、列表使用List及ListItem组件 页面基本布局实现按照需求，我们先实现基本的页面布局及样式的编写 //pages/NotesPage.ets @Entry @Component structNotesPage{ //保存事项的数组 @Statenotes:string[]=['事项1','事项2','事项3']; //保存新事项的输入内容 @StatenewNote:string=''; build(){ Column(){ //应用名 Text('石小石的记事本') .fontSize(24) .fontColor('#003eb3') .margin({top:20,bottom:20 //文本输入 TextInput({ //text绑定到newNote状态，用于存储输入内容。 text:this.newNote, placeholder:'添加新的事项', }).width('80%').margin({bottom:10}).padding(10).fontSize(16).borderColor('#ccc').borderWidth(1).borderRadius(5) //添加按钮 Button('添加').width('80%').padding(10).fontSize(16).backgroundColor('#007AFF').fontColor('#FFF').borderRadius(5) //渲染列表 List(){ ForEach(this.notes,(item:string,index:number)={ ListItem(){ Row(){ Text(item).fontColor('#001d66') Button('删除').fontSize(14).height(18).backgroundColor('#ff4d4f').type(ButtonType.Normal).borderRadius('15%').padding({left:10,right:10}) }.width("100%").justifyContent(FlexAlign.SpaceBetween).backgroundColor('#bae0ff').margin({bottom:5}).padding(5) } }) }.width('80%').margin({top:20}) }.width('100%').backgroundColor('#e6f4ff').height("100%") } } 样式效果 上述代码中，我们使用notes定义了一个初始化列表，使用List组件 和 ForEach方法 用于渲染事项列表。 forEach的渲染方法可以参考官方文档：ForEach：循环渲染（https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-foreach-V5） 实现添加功能实现添加功能，核心有两点： input输入框监听输入的值覆给newNote点击button将输入框的值newNote添加到notes同属性的写法一样，按钮的点击事件可以直接采用链式调用写在Button组件后面，像这样 Button('添加') .onClick(()=this.addNote()) .width('80%').padding(10).fontSize(16) TextInput组件的text属性就是事实输入的值，因此，添加功能的实现如下： //pages/NotesPage.ets @Entry @Component structNotesPage{ @Statenotes:string[]=['事项1','事项2','事项3']; @StatenewNote:string=''; //添加事项 addNote(){ if(this.newNote.trim()!==''){ this.notes.push(this.newNote) this.newNote='' } } build(){ Column(){ //... TextInput({ text:this.newNote, placeholder:'添加新的事项', }).onChange((value:string)={ this.newNote=value }).width('80%').margin({bottom:10}).padding(10).fontSize(16).borderColor('#ccc').borderWidth(1).borderRadius(5) Button('添加') .onClick(()=this.addNote()) .width('80%').padding(10).fontSize(16).backgroundColor('#007AFF').fontColor('#FFF').borderRadius(5) //... }.width('100%').backgroundColor('#e6f4ff').height("100%") } } 可以看出，添加事项的方法addNote和前端js的写法几乎是没有任何差别的！ 删除功能和添加功能类似，我们很容易写出删除功能的代码逻辑 //pages/NotesPage.ets @Entry @Component structNotesPage{ @Statenotes:string[]= @StatenewNote:string=''; //.... deleteNote(index:number){ this.notes.splice(index,1); } build(){ Column(){ //.... List(){ //循环遍历 ForEach(this.notes,(item:string,index:number)={ ListItem(){ Row(){ Text(item).fontColor('#001d66') //删除按钮 Button('删除') .onClick(()=this.deleteNote(index)) }.width("100%") } }) }.width('80%').margin({top:20}) }.width('100%').backgroundColor('#e6f4ff').height("100%") } } 完整代码及效果演示初始页//导入页面路由模块 import{router}from'@kit.ArkUI'; @Entry @Component structIndex{ @Statemessage:string='HelloWorld'; build(){ Row(){ //添加按钮组件 Button(){ //文本组件 Text('你好，鸿蒙') .fontSize(22) .fontColor('#fff') .fontWeight(FontWeight.Bold) } //按钮组件的类型（默认是50%圆角的） .type(ButtonType.Normal) //按钮的圆角级别 .borderRadius('10%') .margin({ top:20 }) //按钮的背景色 .backgroundColor('#ff9c6e') .width('40%') .height('5%') //跳转按钮绑定onClick事件，点击时跳转到第二页 .onClick(()={ router.pushUrl({url:'pages/Second'}) }) } .width('100%') .height('100%') .backgroundColor('#d4380d') .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Center) } } 记事本页//pages/NotesPage.ets @Entry @Component structNotesPage{ @Statenotes:string[]=['事项1','事项2','事项3']; @StatenewNote:string=''; addNote(){ if(this.newNote.trim()!==''){ this.notes.push(this.newNote) this.newNote='' } } deleteNote(index:number){ this.notes.splice(index,1); } build(){ Column(){ Text('石小石的记事本') .fontSize(24) .fontColor('#003eb3') .margin({top:20,bottom:20 TextInput({ text:this.newNote, placeholder:'添加新的事项', }).onChange((value:string)={ this.newNote=value }).width('80%').margin({bottom:10}).padding(10).fontSize(16).borderColor('#ccc').borderWidth(1).borderRadius(5) Button('添加') .onClick(()=this.addNote()) .width('80%').padding(10).fontSize(16).backgroundColor('#007AFF').fontColor('#FFF').borderRadius(5) List(){ ForEach(this.notes,(item:string,index:number)={ ListItem(){ Row(){ Text(item).fontColor('#001d66') Button('删除') .onClick(()=this.deleteNote(index)) .fontSize(14).height(18).backgroundColor('#ff4d4f').type(ButtonType.Normal).borderRadius('15%').padding({left:10,right:10}) }.width("100%").justifyContent(FlexAlign.SpaceBetween).backgroundColor('#bae0ff').margin({bottom:5}).padding(5) } }) }.width('80%').margin({top:20}) }.width('100%').backgroundColor('#e6f4ff').height("100%") } } 总结本教程借助「原生ArkTS结合ArkUI组件」实现了一个简单的欢迎页及记事本页。现在，我们在梳理一下文中用到的一些知识点 代码结构ArkUI组件借助ArkUI组件，我们可以快速实现页面布局，添加按钮等输入框。组件的基础用法如下 //Row布组件 Row(){ //按钮组件 Button(){ //文本组件 Text('你好，鸿蒙') .fontSize(22) .fontColor('#fff') .fontWeight(FontWeight.Bold) } } .width('100%')//Row组件的样式 .height('100%') .backgroundColor('#d4380d') .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Center) 具体的参数可参考ArkUI文档。 路由跳转在main_pages.json文件中的“src”下配置路由“pages/Second”。 { "src":[ "pages/Index", "pages/Second" ] } 代码中实现点击跳转 Button(){ //... }.onClick(()={ router.pushUrl({url:'pages/Second'}) }) Arkts基本语法语法同Typescript 添加、删除事件 @Statenotes:string[]= @StatenewNote:string=''; addNote(){ if(this.newNote.trim()!==''){ this.notes.push(this.newNote) this.newNote='' } } deleteNote(index:number){ this.notes.splice(index,1); } //.... Button('添加').onClick(()=this.addNote()) Row(){ Text(item).fontColor('#001d66') Button('删除') .onClick(()=this.deleteNote(index)) } OK，本节教程到这里就结束了！欢迎大家关注本专栏：鸿蒙开发实践-基础入门（https://juejin.cn/column/7392535991972266035），下次更新不迷路哈！ 点击公众关注号，“技术干货”及时达！ 阅读原文