鸿蒙系统:如何使用前端技术/JS开发鸿蒙应用?

拖泥羊

鸿蒙的特点

1. 鸿蒙 => 超级小程序

  • 鸿蒙应用支持使用java开发,也支持使用js开发;
  • 使用js开发支持调用系统级的API,例如摄像头、话筒、WI-FI等。
  • 鸿蒙自己封装了hml、css、js的

2. 鸿蒙 => 可剪裁系统(微内核)

  • 支持内存为:128KB-128MB-4GB

3. 模改通信协议

  • 统一了IOT互联互通的标准语言

鸿蒙是不是安卓套壳?

1. 安卓系统

image.png

2. 鸿蒙系统

image.png

所以说鸿蒙虽然套上了安卓runtime,但不是简单的套壳,而是新增了很多自己的功能以及鸿蒙的runtime。而且在应用开发层面也定义了自己的sdk(特别是js sdk),在未来鸿蒙的生态成熟之后就可以完全干掉安卓runtime。

学习鸿蒙开发需要哪些知识?

  1. 前端技术栈:HTML\CSS\JS,类WEB范式编程;鸿蒙系统没有内置浏览器环境,但是为了降低学习成本;鸿蒙封装了自己的hml标签、js、css等,它们和WEB端语法类似(这些功能已经很厉害了!)。
  2. 熟悉微信小程序:包括页面结构、API、配置方式等和小程序类似。
  3. 熟悉Vue2.0:鸿蒙自己实现了类似于VUE2.0D MVVM模式(观察者、数据劫持)
  4. 安卓开发经验:因为它首先要兼容安卓系统。

鸿蒙的系统架构

1. 应用层

  • 鸿蒙应用由一个或多个FA(Feature Ability)或者PA(Particle Ability)组成,支持按需下载和加载
  • FA是由UI界面的功能点,提供与用户交互的能力;类似于微前端。
  • PA没有UI界面的功能点,提供后台运行任务的能力;类似于微服务。

2. 框架层

  • 提供了java/C/C++/JS等用户程序框架和Ability框架
  • 两种UI框架(Java UI框架、JS UI框架)

3. 服务层

  • 鸿蒙系统的核心能力

4. 内核层

  • 多内核设计,微内核架构

鸿蒙的三类功能点(能力)

1. FA支持Page Ability:

  • Page Ability是FA唯一支持的模板,用于提供与用户交互的能力。一个Page实例可以包含一组相关页面,每个页面用一个AbilitySlice实例表示。

2. PA支持Service Ability和Data Ability:

  • Service Ability:用于提供后台运行任务的能力。
  • Data Ability:用于对外部提供统一的数据访问抽象。

鸿蒙的前端架构

鸿蒙JS UI = VUE2.0 + 小程序;

1. JS UI框架:类web范式编程的UI界面展示,使用hml标签编写UI;详细参考:https://gitee.com/openharmony...

  • Application 应用层
  • Framework 前端框架层
  • Engine 引擎层
  • Porting Layer 适配层

image.png

2. JS 应用开发框架:实现了轻量级的MVVM(类似vue2),包括双向绑定;也可以使用es6的部分语法等;详细参考:https://gitee.com/openharmony...

  • JS Data binding:JS数据绑定框架使用JavaScript语言提供一套基础的数据绑定能力。
  • JS runtime:JS运行时用以支持JS代码的解析和执行。(JS解析引擎为:JerryScript,轻量级的引擎;不是V8)
  • JS framework:JS框架部分使用C++语言提供JS API和组件的框架机制。

image.png

image.png

3. JS 原生(NAPI):实现js与c/c++代码互相访问,例如:数据存储storage就是使用c++实现,然后提供api给js使用。

  • NativeEngine:JS引擎抽象层,统一JS引擎在NAPI层的接口行为。(引擎为:QuickJS)
  • ModuleManager:管理模块,用于模块加载、模块信息缓存。
  • ScopeManager:管理NativeValue的生命周期。
  • ReferenceManager:管理NativeReference的生命周期。

image.png

鸿蒙应用开发

1. 应用开发在线体验:https://playground.harmonyos....
2. 应用开发工具下载(DevEco Device Tool,需要下载2.0):https://device.harmonyos.com/...
3. 前端开发鸿蒙应用的文件结构,也有js、css、hml;但是这些文件的执行都不是浏览器环境,只是类web端的语法;目前只实现了一些基本功能。

  • hml是鸿蒙自己开发的标签;
  • js支持部分es6的语法,但不支持最新的完整的es6+语法。
  • css也和浏览器端的有些不同,具体参考官方文档。
例如:目前console.log()只能打印字符串,不能打印对象。

image.png

4. JS Api使用,例如:

import fetch from '@system.fetch'

export default {
  data: {
    responseData: 'NA',
    url: "test_url",
  },
  fetch: function () {
    var that = this;
    fetch.fetch({
      url: that.url,
      success: function(response) {
        console.info("fetch success");
        that.responseData = JSON.stringify(response);
      },
      fail: function() {
        console.info("fetch fail");
      }
    });
  }
}

开发环境搭建

1. 创建项目时,可以选择一些简单页面模板

image.png

2. 创建好项目后的入口,app.js,其中config.json为配置文件

image.png

鸿蒙的官方文档:

https://developer.harmonyos.c...

特别鸣谢:拉勾教育前端高薪训练营

阅读 5.2k

33 声望
3 粉丝
0 条评论
33 声望
3 粉丝
文章目录
宣传栏