网站优化网络公司,wordpress本地后台打开卡住,电脑建立网站平台,搭建个人博客网站鸿蒙开发入门教程
一、技术简介
鸿蒙操作系统#xff08;HarmonyOS#xff09;是面向万物互联时代的全场景分布式操作系统#xff0c;具备分布式软总线、分布式数据管理、分布式任务调度等核心能力#xff0c;能让设备间实现无缝连接与协同#xff0c;为用户提供统一、流…鸿蒙开发入门教程
一、技术简介
鸿蒙操作系统HarmonyOS是面向万物互联时代的全场景分布式操作系统具备分布式软总线、分布式数据管理、分布式任务调度等核心能力能让设备间实现无缝连接与协同为用户提供统一、流畅的交互体验。 开发语言方面ArkTS 是专门为鸿蒙开发设计的语言结合了 TypeScript 的类型系统与声明式编程范式提升了开发效率和代码的可维护性。值得一提的是功能写法也和前端VUE框架颇为相似相信在我国具有大基数的前端开发者会很容易上手吧
二、工具安装
下载 DevEco Studio 访问 华为开发者官网在官网找到 DevEco Studio 的下载链接依据自身操作系统Windows、Mac 或 Linux选择合适版本下载。安装 DevEco Studio 运行下载好的安装程序按照提示完成安装。安装过程中可按需选择安装路径和组件。配置 SDK 打开 DevEco Studio选择 “Tools” - “SDK Manager”在 “SDK Platforms” 中选择所需的鸿蒙 SDK 版本进行下载安装在 “SDK Tools” 中安装必要工具如 Build Tools、Platform - Tools 等。创建项目 打开 DevEco Studio点击 “File” - “New” - “New Project”选择基于 ArkTS 的项目模板如 “Empty Ability (ArkTS)”点击 “Next”配置项目信息项目名称、保存位置、包名等最后点击 “Finish” 完成项目创建。
三、核心单元介绍
Ability Ability 是鸿蒙应用的基本功能单元负责处理应用的各种能力和业务逻辑。分为 FAFeature Ability和 PAParticle Ability。 FAFeature Ability 用于实现具有用户界面的功能类似于 Android 中的 Activity。通常用于展示界面、与用户交互等。
// 在 pages 目录下创建 Index.ets 文件
Entry
Component
struct Index {build() {Column({ space: 50 }) {Text(This is a Feature Ability page.).fontSize(30).width(100%).textAlign(TextAlign.Center)}.width(100%)}
}PAParticle Ability
用于实现无用户界面的功能如后台服务、数据处理等类似于 Android 中的 Service。
// 在 service 目录下创建 MyService.ets 文件
Service
Component
struct MyService {onStart() {console.log(MyService started.)// 在这里可以执行后台任务如数据同步、定时任务等}onStop() {console.log(MyService stopped.)}
}2. Module
Module 是对 Ability 的进一步封装包含多个 Ability 以及相关的资源和配置信息便于对应用功能进行模块化管理。在 config.json 中可以对 Module 进行配置例如指定 Module 的名称、包含的 Ability 等。
{module: {name: entry,reqPermissions: [{name: ohos.permission.INTERNET,reason: Need internet access to fetch data,usedScene: {ability: [com.example.myapp.MainAbility],when: always}}],abilities: [{name: com.example.myapp.MainAbility,icon: $media:icon,label: $string:mainability_label,srcEntrance: pages/Index.ets,description: $string:mainability_description,type: page,launchType: standard},{name: com.example.myapp.MyService,srcEntrance: service/MyService.ets,description: $string:myservice_description,type: service}]}
}四、重要 UI 组件
Text 用于显示文本内容。
Entry
Component
struct Index {build() {Text(Hello, HarmonyOS!).fontSize(30).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)}
}2. Button
用于触发操作。
Entry
Component
struct Index {State clickCount: number 0build() {Column({ space: 50 }) {Text(Button clicked ${this.clickCount} times.).fontSize(20).width(100%).textAlign(TextAlign.Center)Button(Click me).onClick(() {this.clickCount}).width(50%).margin({ left: 25% })}.width(100%)}
}3. Image
用于显示图片。
Entry
Component
struct Index {build() {Image($r(app.media.sample_image)).width(200).height(200).objectFit(ImageFit.Contain).margin({ top: 100 }).width(100%).imageAlign(ImageAlign.Center)}
}4. Column 和 Row
用于布局组件Column 实现垂直布局Row 实现水平布局。
Entry
Component
struct Index {build() {Column({ space: 20 }) {Text(Vertical Item 1)Text(Vertical Item 2)Row({ space: 20 }) {Text(Horizontal Item 1)Text(Horizontal Item 2)}}.width(100%)}
}五、常用功能
1. 条件渲染
根据条件决定是否渲染组件。
Entry
Component
struct Index {State showText: boolean falsebuild() {Column({ space: 50 }) {Button(this.showText? Hide Text : Show Text).onClick(() {this.showText !this.showText}).width(50%).margin({ left: 25% })if (this.showText) {Text(This text is conditionally rendered.).fontSize(20).width(100%).textAlign(TextAlign.Center)}}.width(100%)}
}2. 列表渲染
使用 ForEach 组件渲染列表数据。
Entry
Component
struct Index {private fruits: string[] [Apple, Banana, Cherry]build() {Column({ space: 20 }) {ForEach(this.fruits, (fruit) {Text(fruit).fontSize(20).width(100%).textAlign(TextAlign.Center)}, (fruit) fruit)}.width(100%)}
}3. 页面导航
在不同页面间进行导航。
// 在 pages 目录下创建 SecondPage.ets 文件
Component
struct SecondPage {build() {Column({ space: 50 }) {Text(This is the second page.).fontSize(30).width(100%).textAlign(TextAlign.Center)Button(Go back to first page).onClick(() {router.back()}).width(50%).margin({ left: 25% })}.width(100%)}
}// 在 Index.ets 中添加导航按钮
Entry
Component
struct Index {build() {Column({ space: 50 }) {Text(This is the first page.).fontSize(30).width(100%).textAlign(TextAlign.Center)Button(Go to second page).onClick(() {router.pushUrl({ url: pages/SecondPage })}).width(50%).margin({ left: 25% })}.width(100%)}
}六、常用函数
1. onClick
用于绑定按钮等组件的点击事件。
Entry
Component
struct Index {State message: string Button not clickedbuild() {Button(Click me).onClick(() {this.message Button clicked!})Text(this.message).fontSize(20).width(100%).textAlign(TextAlign.Center)}
}2. onChange
用于绑定输入框等组件的值变化事件。
Entry
Component
struct Index {State inputValue: string build() {Column({ space: 20 }) {Input({ placeholder: Enter text }).onChange((value: string) {this.inputValue value})Text(You entered: ${this.inputValue}).fontSize(20).width(100%).textAlign(TextAlign.Center)}.width(100%)}
}3. router.pushUrl 和 router.back
用于页面导航router.pushUrl 用于跳转到指定页面router.back 用于返回上一页如前面页面导航示例所示。
