HarmonyOS 快速入门

你猜猜吧
166 阅读6分钟

一：简介

什么是鸿蒙

  • 鸿蒙(HarmonyOS)是一款由华为开发的,面向全场景的分布式操作系统。其开源项目为OpenHarmony

网站

储备知识

  • 熟悉前端技术栈(HTML、CSS、JS)
  • 鸿蒙开发不是浏览器环境,里面的关键字,但是仿web端的(例如div是鸿蒙自己封装的,不是Web端的div)
  • 熟悉微信小程序(页面结构、API、配置方式是参考微信小程序的)
  • 熟悉Vue(鸿蒙里的数据绑定,自定义组件,全局变量等是参考vue2的语法)

二：系统架构

JS UI 框架架构

  • 应用层：应用层表示开发者使用 JS UI 框架开发的 FA 应用
  • 前端框架层：完成前端页面解析,提供MVVM开发模式、页面路由和自定义组件等能力
  • 引擎层:完成动画解析、DOM树构建、布局计算、渲染命令构建与绘制、事件管理等
  • 适配层：完成对平台的对接。比如：事件对接、渲染管线对接和系统生命周期对接等
  • developer.harmonyos.com/cn/docs/doc…

三：搭建开发环境

DevEco Studio

四：新建项目

五：目录结构

文件组织

资源文件的分类和使用

六：配置文件config.json

config内包含三个配置

七：生命周期

应用生命周期(app.js)

  • onCreate:应用启动时调用
  • onShow:当应用处于前台时触发
  • onHide:当应用处于后台时触发
  • onDestroy:应用销毁时调用

页面生命周期(page.js)

  • onlnit:页面初始化完成时调用，只调用一次
  • onReady:页面创建完成时触发，只调用一次
  • onShow:页面显示时调用
  • onHide:页面消失时调用
  • onDestroy:页面销毁时调用

页面A的生命周期接口的调用顺序

  • 打开页面A：onInit() -> onReady() -> onShow()
  • 在页面A打开页面B：onHide()
  • 从页面B返回页面A：onShow()
  • 退出页面A：onBackPress() -> onHide() -> onDestroy()
  • 页面隐藏到后台运行：onInactive() -> onHide()
  • 页面从后台运行恢复到前台：onShow() -> onActive()

组件生命周期

  • onInit 组件创建
  • onAttached 组件挂载
  • onShow Page显示
  • onHide Page隐藏

八：路由与导航

路由

  • 先创建页面
  • 然后在config.json -> module -> js -> pages 中声明路由

导航(只有函数式导航，没有标签导航)

  • import router from ' @ohos.router'
  • @ohos.router (页面路由)-UI界面-ArkTS接口参考-ArkTS API参考-HarmonyOS应用开发
  • router.push 跳转到应用内的指定页面
  • router.replace 用应用内的某个页面替换当前页面，并销毁被替换的页面
  • router.back 返回上一页面或指定的页面
  • router.clear 清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面
  • router.getLength 获取当前在页面栈内的页面数量
  • RouterState 页面状态信息 (index,name,page)
  • router.getState 获取当前页面的状态信息
  • router.enableAlertBeforeBackPage 开启页面返回询问对话框
  • EnableAlertOptions 页面返回询问对话框选项
  • router.disableAlertBeforeBackPage 禁用页面返回询问对话框
  • router.getParams 获取发起跳转的页面往当前页传入的参数
  • RouterOptions 路由跳转选项

九：js语法

  • JS语法参考-语法-框架说明-兼容JS的类Web开发范式-UI开发-开发-HarmonyOS应用开发
  • 支持ES 6 语法（但是不支持最新的ES语法）
  • 能够使用js的原因是下面3个框架的实现，1、JS UI 框架：类 Web 范式编程的 UI 界面展示，2、JS 应用开发框架：轻量级的 MVVM 实现 （仿 vue2），3、JS 原生模块 （NAPI）:实现 js 与 c/c++代码相互访问（可以使用js调用底层代码）
  • 鸿蒙js是参考Vue2封装的
  • $def 使用this.$app.$def获取在app.js中暴露的对象 (全局数据或者方法)
  • 数据绑定(页面数据模型) data | public 类型是数据或者对象，private 数据只能由当前页面修改
  • 数据修改 this.$set('key',value)，this.$delete('key')
  • 获取DOM元素 $refs，$element
// $def
this.$app.$def

data | public 类型是数据或者对象
private 数据只能由当前页面修改

this.\$set('key',value)
this.\$delete('key')

// $refs
const t = this.$refs.target // 获取ref属性为 target 的元素
<p ref="target">$refs</p>

// $element
const t = this.$element('target') // 获取id属性为 target 的元素
<p id="target">$element</p>

十：html语法

十一：css语法

十二：多语言支持

十三：组件信息

十四：自定义组件

// 自定义事件
// 父组件
<tag xxx="value" @child-event="bindParentMethod"></tag>
myMethod(){ 
    this.$emit('childEvent',{value:'111'})
}
// 子组件
<tag onClick="myMethod"></tag>
myMethod(){ 
    this.$emit('childEvent',{value:'111'}) 
}

// 声明插槽

// 匿名插槽
// 父组件 
<tag><text>111</text></tag>
// 子组件
<slot></slot>

// 具名插槽
// 父组件 
<tag><text slot="slotname">111</text></tag>
// 子组件 
<slot name="slotname"></slot>

十五：接口-网络

十六：文件数据

avatar
文章
阅读
粉丝