鸿蒙系统开发

小天
• 阅读 384

有用的网站

鸿蒙官网:https://www.harmonyos.com/
鸿蒙系统开发者:https://developer.harmonyos.com/
华为开发者:https://developer.huawei.com/
在线体验:https://playground.harmonyos.com/
Gitee:https://gitee.com/openharmony
JS API:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-apis-overview-0000001056361791>

开发环境搭建 (DevEco Studio)

安装模拟器

  • 安装菜单
    • Tools -> Device Manager
  • 注册华为开发者

模拟器(Simulator)与预览器(Previewer)的区别:

  1. 预览器支持热更新,模拟器不支持热更新
    2.预览器中不能直接返回接口数据,模拟器可以返回接口数据

汉化菜单

  • 点选菜单 File -> Settings,
  • 然后点选 Plugins -> Marketplate,
  • 然后搜索 Chinese,
  • 然后选择 Chinese(Simplified)Language Pack / 中文语言包。
  • 然后点击 install 执行安装
  • 安装完成后重启 IDE

JS UI 框架

详情查看:https://developer.harmonyos.com/cn/documentation

目录结构

配置文件(config.json)

生命周期

应用生命周期

  • onCreate:应用启动时调用
  • onDestroy:应用销毁时调用

⻚面生命周期

路由与导航

详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-apis-basic-features-routes-0000000000611824>

声明路由

在 config.json 中声明路由

{
  // ...
  "module": {
    "js": [
      {
        "pages": [
          "pages/index/index",
          "pages/news/news",
          "pages/profile/index",
        ],
        "name": "default",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": true
        }
      }
    ]
  }
}

在 pages 目录下声明对应的三个文件

声明导航

引入 router

import router from '@system.router';

声明导航方法

export default {
    // ...

    launch: function(){
        router.push({
            uri:'pages/details/details',
        });
    }
}

JS语法

详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-framework-syntax-js-0000000000611432>
支持 ES 6 语法(但不支持最新的 ES 语法)
鸿蒙 JS 是参考 Vue 2 封装的

JS应用

$def

  • 在⻚面中,通过 this. a p p . app. app.def,获取在 app.js 中暴露的对象

数据绑定

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

数据修改

  • this.$set(‘key’, value);
  • this.$delete(‘key’);

获取 DOM 元素

  • $refs

    // index.hml

    内容

// index.js const t = this.$refs.target; // 获取 ref 属性为 target 的 DOM 元素

  • $element

    // index.hml

    内容

// index.js const t = this.$element("target"); // 获取 id 属性为 target 的 DOM 元素

// 获取根组件对象 const t = this.$element();

JS架构

JS UI 框架

JS 应用开发框架

JS 原生模块(NAPI)

HML语法

详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-framework-syntax-hml-0000000000611413>

CSS语法

详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-framework-syntax-css-0000000000611425>

多语言支持

详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-framework-multiple-languages-0000000000625923>

  • i18n 目录下存放语言包
    语言-地区.json(zh-CN.json)

  • $t() 获取对应的内容

  • 切换系统语言时(模拟器或真机中),可以看到效果

组件

![在这里插入图片描述](https://img- blog.csdnimg.cn/055cfde368e74102ba8239d0beafad90.png?x-oss- process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAY2hyaXN0aWFuLWRvbmc=,size_20,color_FFFFFF,t_70,g_se,x_16)
基础组件

button
提供按钮组件,包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。

详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-components-basic-button-0000000000621726>

容器组件

div

详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-service-widget-container-div-0000001106548606>

通用组件

详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-service-widget-common-attributes-0000001161259599>

自定义组件

详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-service-widget-custom-basic-usage-0000001115938360>

基本用法
自定义组件通过element引入到宿主⻚面

<element name='comp' src='../../common/component/comp.hml'></element>
<div>
    <comp prop1='xxxx'@child1="bindParentVmMethod"></comp>
</div>

插槽

匿名插槽
父组件:内容
子组件:

具名插槽
父组件:内容
子组件:

基本功能

详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-apis-basic-features-app-context-0000000000611801>

网络功能

详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc- references/js-apis-network-data-request-0000000000626077>

![在这里插入图片描述](https://img- blog.csdnimg.cn/4c99d7d7fea647b8ac8aad9df0f630e6.png?x-oss- process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAY2hyaXN0aWFuLWRvbmc=,size_12,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img- blog.csdnimg.cn/96e2f6afb7bf4d408336f0a2321c7abc.png?x-oss- process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAY2hyaXN0aWFuLWRvbmc=,size_20,color_FFFFFF,t_70,g_se,x_16)

系统功能

通知消息

地理位置

网络状态

设备信息

屏幕亮度

数据存储

官方Demo

鸿蒙提供的一些具体应用实例。有代码,有文字介绍,有效果演示

详情查看:https://developer.harmonyos.com/cn/documentation/codelabs/

JS 购物应用

详情查看:<https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/JS- COMPONENTS>

JS 计步器卡片

详情查看:<https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/Step- Card>

分布式新闻分享

详情查看:<https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS- NewsClient>

分布式亲自教育

详情查看:<https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS- EducationSystem>

点赞
收藏
评论区
推荐文章
Stella981 Stella981
3年前
HarmonyOS 鸿蒙入门教程之01 基础环境和开发工具 (教程含源码)
HarmonyOS鸿蒙入门教程之01基础环境和开发工具鸿蒙系统是什么HarmonyOS是一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统。在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的
Stella981 Stella981
3年前
HarmonyOS 2.0 手机版使用初体验 ——手机开发者 (Beta版)
12月16日上午10点,华为在北京举办华为开发者日暨HarmonyOS2.0手机开发者Beta版发布活动。华为此次宣布面向手机开发者开放完整的HarmonyOS2.0系统能力、丰富的API(应用开发接口),以及强大的开发工具DevEcoStudio等技术装备,开发者可访问华为开发者联盟官网,申请获取HarmonyOS2.0手机开发者Beta版升级。
京东云开发者 京东云开发者
10个月前
使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队
纯血鸿蒙即将到来在今年8月的「2023年华为开发者大会(HDC.Together)」上,华为正式官宣「鸿蒙Next」,这个更新的版本将移除所有的AOSP代码,彻底与Android切割,使其成为一个完全自主研发的操作系统,这将去掉40%左右多余的代码,使系统
京东云开发者 京东云开发者
9个月前
使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南
随着鸿蒙系统的不断完善,许多应用厂商都希望将自己的应用移植到鸿蒙平台上。最近,Taro发布了v4.0.0beta.x版本,支持使用Taro快速开发鸿蒙原生应用,也可将现有的小程序转换为鸿蒙原生应用。在《使用Taro开发鸿蒙原生应用》系列文章中,我们已经介绍
小天 小天
7个月前
HarmonyOS(鸿蒙系统)物联网开发教程——环境搭建
HarmonyOS(鸿蒙系统)物联网开发教程——环境搭建前言华为的鸿蒙系统在2019年正式发布,2020年升级到2.0版本并且正式对所有开发者开源,那个时候我就已经简单评测过这个开源系统了,只是一直没有发布相关的博客,然后最近有粉丝私信我希望我出一下鸿蒙相
小天
小天
Lv1
男 · Meta · 软件工程师
兴趣是最好的老师。
文章
7
粉丝
7
获赞
11