华为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

文档

目录
相关文章
|
7天前
|
人工智能 搜索推荐 数据挖掘
原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
原生鸿蒙版小艺APP成功接入DeepSeek-R1,为HarmonyOS用户带来更智能高效的交互体验。通过此次升级,用户在编程、学习和工作中的问题可迅速获得专业解答。同时,此举为HarmonyOS应用开发者提供了新的技术参考,激发了更多创新应用场景的开发,助力打造差异化竞争优势,推动HarmonyOS生态繁荣发展。
128 68
原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
|
2月前
|
自然语言处理 JavaScript Java
《鸿蒙HarmonyOS应用开发从入门到精通(第2版)》学习笔记——HarmonyOS架构介绍
HarmonyOS采用分层架构设计,从下至上分为内核层、系统服务层、框架层和应用层。内核层支持多内核设计与硬件驱动;系统服务层提供核心能力和服务;框架层支持多语言开发;应用层包括系统及第三方应用,支持跨设备调度,确保一致的用户体验。
170 81
|
2月前
|
安全 数据安全/隐私保护 Android开发
HarmonyOS 5.0 Next实战应用开发—‘我的家乡’【HarmonyOS Next华为公司完全自研的操作系统】
HarmonyOS NEXT是华为自研的鸿蒙操作系统的重要版本更新,标志着鸿蒙系统首次完全脱离Linux内核及安卓开放源代码项目(AOSP),仅支持鸿蒙内核和鸿蒙系统的应用。该版本引入了“和谐美学”设计理念,通过先进的物理渲染引擎还原真实世界的光影色彩,为用户带来沉浸式体验。应用图标设计融合国画理念,采用留白和实时模糊技术展现中式美学。 HarmonyOS NEXT强化了设备间的协同能力,支持无缝切换任务,如在手机、平板或电脑间继续阅读文章或编辑文件。系统注重数据安全和隐私保护,提供数据加密和隐私权限管理功能。此外,它利用分布式技术实现跨设备资源共
146 15
HarmonyOS 5.0 Next实战应用开发—‘我的家乡’【HarmonyOS Next华为公司完全自研的操作系统】
|
27天前
|
人工智能 自然语言处理 计算机视觉
华为鸿蒙自己家的“AI”编辑器插件用起来到底怎么样?
编辑器AI插件如Codegeex、通义灵码等已问世,但通用性较强而不专精。华为推出的CodeGenie专为鸿蒙开发设计,集成在DevEco 5.0.0以上版本中,提供代码补全、生成等功能,尤其擅长处理鸿蒙相关问题,极大降低了鸿蒙开发的门槛。安装后需重启,支持自然语言生成代码,提升了开发效率。
56 13
|
2月前
|
API 开发者 UED
自学记录鸿蒙API 13:PreviewKit从文件预览到应用开发
通过学习API 13,我深入研究了**PreviewKit(文件预览服务)**。该模块支持快速预览多种文件类型(文本、图片、视频、音频、PDF等),为文件管理类应用提供系统级支持。本文分享了从搭建开发环境到实现单文件和多文件预览的全过程,并介绍了如何构建一个实用的文件预览助手应用。通过实践,不仅掌握了技术细节,还提升了个人开发能力。希望这些经验能为其他开发者带来启发与帮助。
61 10
自学记录鸿蒙API 13:PreviewKit从文件预览到应用开发
|
1月前
|
数据安全/隐私保护 开发者 计算机视觉
《鸿蒙 HarmonyOS 应用开发从入门到精通(第 2 版)》学习笔记 ——HarmonyOS 环境搭建之注册华为开发者联盟帐号
要进行HarmonyOS应用开发,首先需要注册华为开发者联盟帐号并完成实名认证。注册时可选择成为个人或企业开发者,两者享有不同权益。个人开发者需准备手机号/邮箱、身份证扫描件及银行卡号等资料,通过审核后即可享受应用市场、主题、商品管理等多项服务。具体步骤包括访问华为开发者官网(https://developer.huawei.com/consumer/cn/),选择注册方式并按指引操作。实名认证需填写个人信息并签署相关协议,等待1-3个工作日的审核结果。
82 16
|
1月前
|
人工智能 安全 JavaScript
《鸿蒙HarmonyOS应用开发从入门到精通(第2版)》学习笔记——HarmonyOS纯血鸿蒙新特性
HarmonyOS 3.1引入了Stage模型,增强ArkTS语言、应用程序框架、Web、ArkUI等子系统能力。新增功能包括Ability框架的Stage开发模型、ArkUI组件能力提升、应用包管理接口、公共基础类库支持Buffer读写、Web服务文档预览及编辑、图形图像编解码支持等。从API 9开始,Stage模型成为主要开发模型,支持更灵活的应用生命周期管理和窗口调度,提供更好的组件与窗口弱耦合体验。此外,HarmonyOS NEXT开发者预览版实现了全面自研,被称为“纯血鸿蒙”,具备自主可控、高度弹性、更强的安全性和隐私保护特性。
105 21
|
2月前
|
编解码 人工智能 开发框架
《鸿蒙HarmonyOS应用开发从入门到精通(第2版)》学习笔记——HarmonyOS技术理念
HarmonyOS在万物智联时代提出了三大技术理念:一次开发,多端部署;可分可合,自由流转;统一生态,原生智能。通过多端开发环境、多端开发能力和多端分发机制,HarmonyOS显著降低了开发成本,提升了开发效率。开发者只需一套工程即可实现多设备应用的高效开发与部署。元服务作为轻量化程序实体,支持跨设备无缝流转,提供便捷服务。同时,HarmonyOS内置强大的AI能力,助力开发者快速实现应用智能化。
110 16
|
2天前
鸿蒙开发:了解@Builder装饰器
@Builder装饰是鸿蒙UI开发中,非常重要的一个装饰器,在实际的开发中,合理且正确的使用,能够让我们的代码更加的简洁,有两点需要注意,一是,是用私有还是全局,取决于当前的组件的复用机制,如果多个页面都使用了,建议以全局为主;二是传参的动态更新,有更新就使用引用参数传递,没有更新按值传递即可。
49 28
|
1月前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
109 47
Harmony OS开发-ArkTS语言速成二

热门文章

最新文章