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

鸿蒙的特点

1. 鸿蒙 => 超级小程序

• 鸿蒙利用反对应用 java 开发，也反对应用 js 开发；
• 应用 js 开发反对调用零碎级的 API，例如摄像头、话筒、WI-FI 等。
• 鸿蒙本人封装了 hml、css、js 的

2. 鸿蒙 => 可剪裁零碎（微内核）

• 反对内存为：128KB-128MB-4GB

3. 模改通信协议

• 对立了 IOT 互联互通的规范语言

鸿蒙是不是安卓套壳？

1. 安卓零碎

2. 鸿蒙零碎

所以说鸿蒙尽管套上了安卓 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/ace_ace_engine

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

2. JS 利用开发框架：实现了轻量级的 MVVM(相似 vue2)，包含双向绑定；也能够应用 es6 的局部语法等；具体参考：https://gitee.com/openharmony/ace_engine_lite/tree/master

• JS Data binding：JS 数据绑定框架应用 JavaScript 语言提供一套根底的数据绑定能力。
• JS runtime：JS 运行时用以反对 JS 代码的解析和执行。（JS 解析引擎为：JerryScript，轻量级的引擎；不是 V8）
• JS framework：JS 框架局部应用 C ++ 语言提供 JS API 和组件的框架机制。

3. JS 原生 (NAPI)： 实现 js 与 c /c++ 代码相互拜访，例如：数据存储 storage 就是应用 c ++ 实现，而后提供 api 给 js 应用。

• NativeEngine：JS 引擎形象层，对立 JS 引擎在 NAPI 层的接口行为。（引擎为：QuickJS）
• ModuleManager：治理模块，用于模块加载、模块信息缓存。
• ScopeManager：治理 NativeValue 的生命周期。
• ReferenceManager：治理 NativeReference 的生命周期。

鸿蒙利用开发

1. 利用开发在线体验：https://playground.harmonyos.com/#/cn/onlineDemo
2. 利用开发工具下载 （DevEco Device Tool，须要下载 2.0）：https://device.harmonyos.com/cn/ide#download_release
3. 前端开发鸿蒙利用的文件构造，也有 js、css、hml； 然而这些文件的执行都不是浏览器环境，只是类 web 端的语法；目前只实现了一些基本功能。

• hml 是鸿蒙本人开发的标签；
• js 反对局部 es6 的语法，但不反对最新的残缺的 es6+ 语法。
• css 也和浏览器端的有些不同，具体参考官网文档。

例如：目前 console.log()只能打印字符串，不能打印对象。

4. JS Api 应用，例如：

• @system.fetch => @system 外面有很多的 api，是通过 ts 实现的。
• 具体参考：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791

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. 创立我的项目时，能够抉择一些简略页面模板

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

鸿蒙的官网文档：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/document-outline-0000001064589184

特地鸣谢：拉勾教育前端高薪训练营