华为HarmonyOS鸿蒙应用开发初体验

简介: HarmonyOS鸿蒙系统出来好几年了,开发鸿蒙应用和咱平时的前端开发到底有什么差别呢,下面就从一个前端开发的视角带领大家体验一下HarmonyOS开发。

HarmonyOS鸿蒙系统出来好几年了,开发鸿蒙应用和咱平时的前端开发到底有什么差别呢,下面就从一个前端开发的视角带领大家体验一下HarmonyOS开发。

开发环境

直接下载安装好官方开发工具 DevEco Studio,这个长得和 vscode 很像,logo 晃眼一看还以为是 vscode 的弟弟。里面有集成开发环境,整体界面、菜单和 Java 的 IntelliJ IDEA 很像。

安装好开发工具后还需要安装 nodejs,而且版本要求在 v14.19.1 - v17.0.0 之间(不包括17.0.0),还有 ohpm(类似前端里常用的 npm,用来管理安装第三方包)、HarmonyOS SDK。
1.png

Hello World

直接按照官方文档新建一个空项目,操作步骤和界面和 Android Studio 类似,一些内置的模板、安装模拟器这些也都差不多,毕竟都是做app开发的,都是这些东西。

官方的模拟器还是挺精致的,边框都是金光闪闪的,开机动画也很高级,比 Android Studio 的高档。
2.png

ArkTS 开发语言

官方支持用 Java、ArkTS、JS 和 C/C++ 开发,不过 Java 最新版本已经不支持了,主推的是 ArkTS,这个是在 TypeScript 基础上扩展的,所以如果 TypeScript 玩得溜也没啥难度。适配的设备主要是手机 Phone 和平板 Tablet,其他还有 TV、Wearable、Car。

构建UI界面的方式和 Flutter 很像,可能习惯了 web 里的 html、css、js 分离的写法后很不适应,就跟在 vue 里直接写 render 函数去渲染组件一样,逻辑、结构、样式都在一块,一层套一层。

预览既可以通过上方的 devices 设备管理里安装模拟器来预览,也可以点击开发工具右侧的 Previewer 来预览页面效果,Previewer 可以实时预览当前操作的页面,调试更加方便。
3.png

项目结构

整个项目结构跟 Java 项目类似,module.json5 里配置项目信息(比如入口文件 srcEntry),pages 目录下添加页面文件,resources\base\profile\main_pages.json 文件里定义页面路径配置信息。

新建页面直接在 pages 目录下右键新建一个 Page,会生成默认页面代码,然后在 main_pages.json 里配置路径,@Entry 是页面入口组件,普通组件只用加 @Component,构建UI的语法和 Flutter 类似,也和 react 的类组件很像,样式大部分都跟 css 一样,只不过换个写法,注意样式设置单个 margin、padding 时要传一个对象分别去设置:margin({ top: 5 })、padding({ left: 5 }),点击事件可以直接用 onClick 绑定:
4.png

应用程序框架

生命周期:

  • UIAbility 实例生命周期:onCreate、(onWindowStageCreate)onForeground、onBackground、(onWindowStageDestroy)onDestroy
  • 页面生命周期,被 @Entry 修饰:onPageShow、onPageHide、onBackPress
  • 组件生命周期,被 @Component 修饰:aboutToAppear、aboutToDisappear

一些公共配置或者静态资源可以放在 resources/base 目录下,页面通过 $r('app.xx.xx')就能获取到,比如全局颜色定义、图片...注意只要涉及到网络数据的,都需要在 module.json5 文件中添加 ohos.permission.INTERNET 权限,比如网络图片、http 请求、web组件加载网络页面这些。

开发中要打印调试信息可以用 console.info('xx'),对标前端常用的 console.log。

路由

页面跳转需要用到 router,参数可以放到 params 中,页面接收参数需要用到 router.getParams() 方法,返回上一页 router.back():

import router from '@ohos/router'

router.pushUrl({
   
   
    url: 'pages/index',
    params: {
   
   }
})

网络请求

发送请求需要用到 @ohos.net.http 包,直接 http.createHttp() 就能创建出一个 http 对象,然后就可以用来发送 http 请求了。

import http from '@ohos.net.http'
let httpRequest = http.createHttp()

let promise = httpRequest.request('https://EXAMPLE_URL', {
   
   
    method: http.RequestMethod.POST,
    extraData: {
   
    // post 参数
        "param1": "value1",
        "param2": "value2"
    }
})

promise.then((data) => {
   
   
    if (data.responseCode === http.ResponseCode.OK) {
   
   
        console.info('Result:' + data.result)
    }
}).catch((err) => {
   
   
    console.info('error:' + JSON.stringify(err))
})

模块化

模块化用 import 导入,export、export default 导出,和咱平时前端开发一样:

// 导入组件
import CustomComponent from './components/CustomComponent'

// 导出组件
@Component
export default struct CustomComponent {
   
   
    build() {
   
   
        Text('我是一个自定义组件')
    }
}

依赖管理

最新的 API version 9 版本包管理工具需要用 ohpm,跟 npm 类似,依赖配置文件 oh-package.json5、oh-package-lock.json5 也跟前端常用的 package.json 一样,安装需要的第三方库跟前端一样:ohpm install xxx,安装好的依赖在 oh_modules 目录下,HarmonyOS 官方推荐的一些第三方库:
5.png

官方有提供很多学习课程,可以在下方的文档里查看,HarmonyOS应用开发者基础认证这个课程学习完,考过了还会给你发一个认证证书,都是比较基础的内容,一天就能学习完:
6.png

文档

目录
相关文章
|
2天前
|
数据管理 API 调度
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
HarmonyOS Next 是华为新一代操作系统,专注于分布式技术的深度应用与生态融合。本文通过技术特点、应用场景及实战案例,全面解析其核心技术架构与开发流程。重点介绍分布式软总线2.0、数据管理、任务调度等升级特性,并提供基于 ArkTS 的原生开发支持。通过开发跨设备协同音乐播放应用,展示分布式能力的实际应用,涵盖项目配置、主界面设计、分布式服务实现及部署调试步骤。此外,深入分析分布式数据同步原理、任务调度优化及常见问题解决方案,帮助开发者掌握 HarmonyOS Next 的核心技术和实战技巧。
111 76
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
|
2天前
|
开发框架 人工智能 安全
鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
HarmonyOS NEXT的发布对华为及整个行业都产生了深远的影响。它不仅展示了华为的技术实力,还敏锐地把握了市场需求。同时,吸引了更多的开发者和合作伙伴加入鸿蒙生态体系,共同推动鸿蒙生态的繁荣发展。
165 19
鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
|
2天前
|
物联网 调度 vr&ar
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析:分布式能力与跨设备协作实战
鸿蒙技术分享:HarmonyOS Next 深度解析 随着万物互联时代的到来,华为发布的 HarmonyOS Next 在技术架构和生态体验上实现了重大升级。本文从技术架构、生态优势和开发实践三方面深入探讨其特点,并通过跨设备笔记应用实战案例,展示其强大的分布式能力和多设备协作功能。核心亮点包括新一代微内核架构、统一开发语言 ArkTS 和多模态交互支持。开发者可借助 DevEco Studio 4.0 快速上手,体验高效、灵活的开发过程。 239个字符
136 13
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析:分布式能力与跨设备协作实战
|
1天前
|
JSON 缓存 前端开发
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP(附带源码)
本项目基于HarmonyOS NEXT 5.0开发了一款影院应用程序,主要实现了电影和影院信息的展示功能。应用包括首页、电影列表、影院列表等模块。首页包含轮播图与正在热映及即将上映的电影切换显示;电影列表模块通过API获取电影数据并以网格形式展示,用户可以查看电影详情;影院列表则允许用户选择城市后查看对应影院信息,并支持城市选择弹窗。此外,项目中还集成了Axios用于网络请求,并进行了二次封装以简化接口调用流程,同时添加了请求和响应拦截器来处理通用逻辑。整体代码结构清晰,使用了组件化开发方式,便于维护和扩展。 该简介概括了提供的内容,但请注意实际开发中还需考虑UI优化、性能提升等方面的工作。
30 11
|
1天前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
24 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
|
1天前
|
安全 数据安全/隐私保护 UED
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
### HarmonyOS 5.0(Next)应用开发实战:使用ArkTS构建开箱即用的登录页面 HarmonyOS 5.0(Next)融合了美学与科技,引入“光感美学”设计理念和多设备深度协同功能。本文通过 ArkTS 构建一个简单的登录页面,展示了模块化导入、状态管理、方法封装、声明式UI构建及事件处理等最佳实践。代码实现了一个包含用户名和密码输入框及登录按钮的界面,支持错误提示和页面跳转。
30 14
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
|
1天前
|
人工智能 安全 数据安全/隐私保护
HarmonyOS应用开发实战:基于ArkTS的开箱即用登录页面实现【样式方式实现①】【HarmonyOS 5.0(Next)】
本文介绍了基于HarmonyOS 5.0(Next)和ArkTS实现的开箱即用登录页面。HarmonyOS 5.0是华为于2024年10月22日发布的第三代移动操作系统,具备原生智能、互联、安全及流畅特性。文章详细解析了使用ArkTS开发登录页面的代码,涵盖组件定义、界面布局、事件处理、样式设置及异步操作等内容,展示了清晰的组件结构、响应式设计与模块化编程的优势。通过这段代码,开发者可以快速上手并构建高效、美观的应用界面。
|
27天前
|
JavaScript 安全 前端开发
【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)
【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)
291 4
|
4天前
|
索引
鸿蒙开发:ForEach中为什么键值生成函数很重要
在列表组件使用的时候,如List、Grid、WaterFlow等,循环渲染时都会使用到ForEach或者LazyForEach,当然了,也有单独使用的场景,如下,一个很简单的列表组件使用,这种使用方式,在官方的很多案例中也多次出现,相信在实际的开发中多多少少也会存在。
鸿蒙开发:ForEach中为什么键值生成函数很重要
|
27天前
|
存储 数据安全/隐私保护
鸿蒙开发:自定义一个动态输入框
在鸿蒙开发中,如何实现这一效果呢,最重要的解决两个问题,第一个问题是,如何在上一个输入框输入完之后,焦点切换至下一个输入框中,第二个问题是,如何禁止已经输入的输入框的焦点,两个问题解决完之后,其他的就很是简单了。
48 13
鸿蒙开发:自定义一个动态输入框