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

文档

目录
相关文章
|
16天前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
54 3
|
1月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
8天前
|
缓存 前端开发 API
鸿蒙应用开发:下载功能
鸿蒙应用开发:下载功能
25 1
|
15天前
|
存储 开发工具 开发者
紧跟科技潮流,揭秘鸿蒙应用开发新世界:打造全场景智慧生活,你准备好迎接这场技术革命了吗?
【10月更文挑战第20天】随着华为鸿蒙系统的发布,一个全新的操作系统生态正在形成。本文将探讨基于鸿蒙系统的应用软件开发,介绍其跨设备特性、开发工具链及框架,并通过示例代码展示开发流程,帮助开发者更好地理解和利用这一平台。
32 4
|
14天前
|
存储 数据管理 调度
HarmonyOS架构理解:揭开鸿蒙系统的神秘面纱
【10月更文挑战第21天】华为的鸿蒙系统(HarmonyOS)以其独特的分布式架构备受关注。该架构包括分布式软总线、分布式数据管理和分布式任务调度。分布式软总线实现设备间的无缝连接;分布式数据管理支持跨设备数据共享;分布式任务调度则实现跨设备任务协同。这些特性为开发者提供了强大的工具,助力智能设备的未来发展。
55 1
|
16天前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
37 1
|
20天前
|
数据可视化 JavaScript API
HarmonyOS NEXT原生重榜发布-安利一款鸿蒙可视化代码生成器
鸿蒙低代码可视化开发平台是基于华为鸿蒙操作系统构建的创新开发环境,旨在通过简化开发流程、降低技术门槛,加速应用从设计到上线的全过程。它融合了低代码开发的核心理念与鸿蒙系统的技术优势,为开发者提供了一条高效、便捷的应用开发之路。
44 2
|
29天前
|
存储 移动开发 关系型数据库
HarmonyOS 鸿蒙面试第一弹
HarmonyOS 鸿蒙面试第一弹
|
4月前
|
存储 开发框架 安全
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段一
HarmonyOS NEXT星河版的应用开发标志着华为分布式操作系统的全新篇章,它聚焦于打造原生精致、易用、流畅、安全、智能和互联的极致体验。开发者可以利用其先进的API和工具集,如DevEco Studio,构建高性能、跨设备无缝协同的应用程序,从而充分利用HarmonyOS的分布式能力,为用户带来一致且丰富的多场景数字生活体验。随着“学习强国”、岚图汽车、中国电信等知名企业和应用的加入,鸿蒙生态正迅速扩展,引领着原生应用开发的新趋势。
186 3
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段一
|
4月前
|
域名解析 网络协议 调度
阿里云移动研发平台EMAS支持纯血鸿蒙HarmonyOS NEXT
阿里云移动研发平台EMAS作为面向应用全生命周期提供一站式的应用研发管理服务产品,其核心产品包括云构建,HTTPDNS 和移动推送正式推出了针对纯血鸿蒙的SDK版本,将为广大开发者在鸿蒙生态中构建高效、稳定、可靠的企业级应用提供强有力的支持。如有疑问,请进入钉钉群(群号35248489)进行相关咨询。

热门文章

最新文章