前端开发华为鸿蒙系统应用 OpenHarmony JS

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统 。现已开源,名为 OpenHarmony。

导读:一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统 。现已开源,名为 OpenHarmony。

2019 年 8 月 9 日,华为在 HDC 开发者大会上正式发布鸿蒙系统。

2020 年 9 月 10 日,华为在 HDC 开发者大会上如约发布鸿蒙 2.0,并面向应用开发者发布 Beta 版本。明年鸿蒙将全面支持华为手机。

值得一提的是,鸿蒙 HarmonyOS 正式开源,今年年底首先对国内开发者发布针对智能手机的 HarmonyOS beta 版本。

余承东强调,全球第三大移动应用生态正在破茧而出。「华为要构筑开放生态,将核心技术、软硬件能力全面开放给开发者和生态伙伴。」

据介绍,基于鸿蒙操作系统的 HiLink 智能硬件生态,目前已经有 800 家合作伙伴,其中 HiCar 已合作 150 余款车,2021 年计划预装超过 500 万台。HMS Core 已经发展到 5.0 版本,超过 9.6 万个应用集成 HMS Core,活跃用户 4.9 亿。

华为承受打压众所周知,但在大会上,余承东表示,即使遭受三轮打击,华为依然实现增长。今年上半年,其消费者业务销售收入 2558 亿元,消费者业务手机全球发货量达到 1.05 亿。

华为承受打压众所周知,但在大会上,余承东表示,即使遭受三轮打击,华为依然实现增长。今年上半年,其消费者业务销售收入 2558 亿元,消费者业务手机全球发货量达到 1.05 亿。


网络异常,图片无法展示
|

其实说了这么多,也只是一个噱头,未来的路还很长,我经常再 blink 里面看到有人投票说,华为鸿蒙操作系统将取代安卓操作系统,我先否定一下。发展好了最多也只是三足鼎立的局面,不可能取代,至于为什么?大家评论区吃瓜吧。

源码托管在国内知名开源平台码云上:https://gitee.com/openharmony

作为程序员,我也下载了源码,研究了两个晚上,顺带写了一个 hello world 程序。

官方介绍说是“轻量级 JS 核心开发框架”。

当我看完源码后发现它确实轻。其核心代码只有 5 个 js 文件。


runtime-core\src\core\index.jsruntime-core\src\observer\observer.jsruntime-core\src\observer\subject.jsruntime-core\src\observer\utils.jsruntime-core\src\profiler\index.js

复制代码


从名字可以看出来,这些代码实现了一个观察者模式。它实现了一个非常轻量级的 MVVM 模式(后端理解为 MVC 就好)。通过使用和 vue2 相似的属性劫持技术实现了响应式系统。

当我们开发的时候,通过 Toolkit 将开发者编写的 HML、CSS 和 JS 文件编译打包成 JS Bundle,然后再将 JS Bundle 解析运行成 C++ native UI 的 View 组件进行渲染。

“通过支持三方开发者使用声明式的 API 进行应用开发,以数据驱动视图变化,避免了大量的视图操作,大大降低了应用开发难度,提升开发者开发体验”。基本上就是一个小程序式的开发体验。

js runtime 选择了 JerryScript 是用于物联网的超轻量 JavaScript 引擎。它能够在内存少于 64 KB 的设备上执行 ECMAScript 5.1 源代码。这也是为什么在文档中说鸿蒙 JS 框架支持 ECMAScript 5.1 的原因。

SDK 中的那些包仅仅是做 loader 用的,大概是为了在 webpack 打包时解析 htm 组件用的,将 html 的 template 编译为 js 代码。


网络异常,图片无法展示
|


华为宣传的鸿蒙四大特性:

“分布式架构首次用于终端 OS,实现跨终端无缝协同体验;确定时延引擎和高性能 IPC,技术实现系统天生流畅;基于微内核架构重塑终端设备可信安全;通过统一 IDE 支撑一次开发,多端部署,实现跨终端生态共享”

“分布式架构、跨终端无缝协同体验”是说,华为搞了一个很妙的底层 OS(“分布式 OS 架构”和“分布式软总线技术”,公共通信平台、分布式数据管理、分布式能力调度和虚拟外设四大能力),把不同终端的特性都归纳好了,能容纳在统一的架构里。这样对开发者和消费者来说,不同的终端产品能在一个平台里统一开发使用了。为什么能这么做,是因为鸿蒙 OS 重新设计了整个架构,安卓和 iOS 办不到。这是从系统架构层面说事。

“确定时延引擎和高性能 IPC 技术实现系统天生流畅”是说,鸿蒙搞了很妙的进程调度算法,进程通信机制天然就好。进程就是不同程序的任务,一个手机上面几个 APP 同时跑,需要调度算法来分配系统时间轮换着运行。“确定时延”就是调度算法能保证,进程不会因 CPU 被其它进程占据而卡死,总能在规定时间内轮到自己顺利执行。因为架构是新的,所以应用响应时间能降低四分之一,安卓和 iOS 因为架构的原因办不到。IPC 就是进程间通信(Inter Process Communication),进程之间非常需要通信传递消息和数据来协同运作。因为微内核架构好,鸿蒙的 IPC 效率能提升 5 倍,安卓和 iOS 受系统架构限制办不到。这是对关心性能的用户宣传。

“基于微内核架构重塑终端设备可信安全”是说,鸿蒙系统更安全,因为内核代码少,出现漏洞的机会也就极少,不象安卓和 iOS 那样代码一堆容易找漏洞。苹果悬赏找到一个漏洞 100 万美元,是让人来攻击。鸿蒙对整个系统,设计了一套安全机制,只要按照这套机制做,安全性能就能极大提升。这套安全机制不是基于攻击测试的,而是基于数学模型算法的,能形式化证明理论上就是安全的,比传统安全验证方式要高一个档次。这对关心系统安全的用户很有吸引力。

“通过统一 IDE 支撑一次开发,多端部署,实现跨终端生态共享”,是呼应第一个特性。第一个特性是说,鸿蒙从系统架构上,让跨终端统一开发成为可能。统一 IDE 是说,华为开发工具也准备好了,这个以方舟编译器为核心的工具包非常牛,可视化编程,以后还几种语言混着开发都能统一编译,直接出高效机器码。总之意思就是开发方便高效了,比现在安卓和 iOS 的开发工具效率更高。这是对程序员开发者喊话。

从这些鸿蒙的“特性”可以看出,鸿蒙真的是面向未来的下一代操作系统,有非常多的优势。鸿蒙不是安卓或者 iOS 在手机上的替代品,而是跨平台的新系统。起码在立意上,鸿蒙真不是对标安卓或者 iOS,而是对标谷歌的 Fuchsia(也是微内核的)。通过鸿蒙的四大特性,也可以了解为什么谷歌要搞 Fuchsia,因为安卓架构的技术潜力有限,要搞下一代操作系统只能重新搞全新生态系统。


网络异常,图片无法展示
|

概述

以前一个前端开发人员,能开发网页、能开发安卓系统和 IOS 系统,就可以说是一个合格的前端程序员了。但是鸿蒙的出现,也逼着你需要再掌握一门新系统的开发。如果你已经是一名前端,幸运的是不需要作太多的改变,就可以顺利的开发鸿蒙系统 。

简介

OpenHarmony 中文意思「开放、和谐」,代表了中华民族的包容和谦和,是咱们中国在移动端底层操作系统领域迈出的巨大一步,从此,在全世界我们可以说:“中国,也有自己的移动端底层操作系统了!”

官方描述:https://sale.vmall.com/hwharmony.html?cid=134661

OpenHarmony 技术架构

整体遵从分层设计,从下向上依次为:内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 组件”逐级展开,在多设备部署场景下,支持根据实际需求裁剪某些非必要的组件,前端领域的发力点核心在于应用层「拓展应用、三方应用」构建服务。以后我们个人开发者或者企业开发者都将不断在应用层「拓展应用、三方应用」这个版块中完善鸿蒙生态。


网络异常,图片无法展示
|

应用层介绍

应用层包括「系统应用」和「第三方非系统应用」。应用由一个或多个 FA(Feature Ability)或 PA(Particle Ability)组成。其中,FA 有 UI 界面,提供与用户交互的能力;而 PA 无 UI 界面,提供后台运行任务的能力以及统一的数据访问抽象。基于 FA/PA 开发的应用,能够实现特定的业务功能,支持跨设备调度与分发,为用户提供一致、高效的应用体验。显然,我们前端开发小伙伴学习的核心点就在于对 FA 中 UI 层面的开发工作。

UI 部分(FA)既支持纯 JavaScript 开发,也支持纯 Java 开发,还可以 Java 跟 JavaScript 混合开发。FA 支持使用 Java 和 JavaScript 两种方式开发 UI 界面。如果使用 Java,则跟 Android 一样,使用 xml 定义布局或者 Java 代码定义布局,每个页面都是一个 PageAbility,使用 Java 编写业务代码,不同的页面之间传递数据依然使用 intent。

而这里如果使用 JavaScript UI 框架的话,那么写法跟 「Vue + 小程序」 应用开发基本一模一样,同样支持 data、props、computed、watch 和 functions(methods),也能创建自定义的组件,这样 web 前端工程师就很容易转型成为鸿蒙 UI 开发工程师,不得不说华为在已有概念上做的整合,还是相当厉害的。

尝试搭建一个开发环境及输出你好,鸿蒙!

官方概述:https://developer.huawei.com/consumer/cn/deveco_studio

DevEco Studio 2.1 Release 开发工具下载:https://developer.harmonyos.com/cn/develop/deveco-studio#download

支持 windows 及 mac 操作系统,我用的是 windows,下载的是上一个。

网络异常,图片无法展示
|

HUAWEI DevEco Studio 1.0 是开发 EMUI 应用的集成开发环境(IDE),旨在帮助开发者快捷、方便、高效地使用华为 EMUI 开放能力。如需开发 HarmonyOS 应用,请下载 HUAWEI DevEco Studio 2.0。


网络异常,图片无法展示
|

此项目依赖 node.js 开发环境,非前端的小伙伴可以下载一下 node: https://nodejs.org/en/

至于 IDEA:https://developer.harmonyos.com/cn/develop/deveco-studio

应用体验

第一步:启动应用后,提示是否创建启动程序脚本,方便后续模板选择。

  • 第二步:使用华为云 npm 包管理工具。
  • 第三步:创建 or 导入项目。
  • 第四步:选择项目类型及模板。

为了满足应用在多设备上运行的开发需求,DevEco Studio 2.1 Release 在原有单设备工程模板的基础上,新增了 11 个跨设备工程模板。开发者可根据工程向导,依次挑选模板和设备类型,轻松创建跨设备工程,自动生成示例代码和相关资源。

  • 第五步:创建工程项目。
  • 第六步:查阅并关闭开发简易提示。
  • 第七步:项目自动下载对应的依赖及文件,这一步直接点击运行则会有错误提示。
  • 第八步:在 DevEco Studio 菜单栏,点击 Tools > SDK Manager 配置对应的 SDK 版本。
  • 第九步:点击右上角 sign in 登陆华为账号,请输入已实名认证的华为帐号的用户名和密码进行登录,在网页中登陆成功后,完成授权。
  • 第十步:进入到 src/main/js/default/pages/index 页面,打开 view -> Tool Windows -> Previewer 进行预览。
  • 第十一步:进入 Tools -> Devices Manager 看到模拟器管理页面,这一步必须要实名认证的华为账号进行登录后,即可选择对应的设备,然后启动设备。
  • 第十二步:启动设备后,再次点击 绿色运行按钮,即可在仿真设备上运行该项目。
开发目录介绍

JS FA 应用的 JS 模块 (entry/src/main/js/module) 的开发目录结构如下:


网络异常,图片无法展示
|

鸿蒙组件介绍

组件(Component)是构建页面的核心,每个组件通过对数据和方法的简单封装,实现独立的可视、可交互功能单元。组件之间相互独立,随取随用,也可以在需求相同的地方重复使用。

官方组件介绍:https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-common-method-0000001051151142


JS UI 框架基础能力
  • 声明式编程
  • JS UI 框架采用类 HTML 和 CSS 声明式编程语言作为页面布局和页面样式的开发语言,页面业务逻辑则支持 ECMAScript 规范的 JavaScript 语言。JS UI 框架提供的声明式编程,可以让开发者避免编写 UI 状态切换的代码,视图配置信息更加直观。
  • 跨设备
  • 开发框架架构上支持 UI 跨设备显示能力,运行时自动映射到不同设备类型,开发者无感知,降低开发者多设备适配成本。
  • 高性能
  • 开发框架包含了许多核心的控件,如列表、图片和各类容器组件等,针对声明式语法进行了渲染流程的优化。
JS UI 框架整体架构
  • 应用层 Application
  • 应用层表示开发者使用 JS UI 框架开发的FA应用,这里的 FA 应用特指 JS FA 应用。
  • 前端框架层 Framework
  • 前端框架层主要完成前端页面解析,以及提供 MVVM(Model-View-ViewModel)开发模式、页面路由机制和自定义组件等能力。
  • 引擎层 Engine
  • 引擎层主要提供动画解析、DOM(Document Object Model)树构建、布局计算、渲染命令构建与绘制、事件管理等能力。
  • 平台适配层 Porting Layer
  • 适配层主要完成对平台层进行抽象,提供抽象接口,可以对接到系统平台。比如:事件对接、渲染管线对接和系统生命周期对接等。


网络异常,图片无法展示
|

前端框架层 Framework API 概述

1.基本功能

应用上下文、日志打印、页面路由、弹窗、应用配置、定时器

  • 2.网络访问
    上传下载、数据请求
  • 3.文件数据
    数据存储、文件存储
  • 4.分布式能力
    分布式拉起、分布式迁移、分布式 API 在 FA 生命周期中的位置
  • 5.系统能力
    通知消息、振动、传感器、地理位置、网络状态、设备信息、屏幕亮度、电量信息、应用管理、媒体查询、国际化

使用 storage 实现数据存储(是不是感觉代码和 vue 及小程序结构很像?)

import storage from '@system.storage';export default {    data: {    // 待办事件列表        todoList    },    onInit() {        storage.get({            key: 'todo',            success: data => {                console.log('获取Storage成功' + data);                //this.todoList = JSON.parse(data)            }        });    },    setStorage() {        storage.set({            key: 'todoList',            value: JSON.stringify(this.todoList)        });    },    remove(index) {        this.todoList.splice(index, 1);        this.setStorage();    },    addTodo() {        this.todoList.push({            info: '键盘输入',            status: false        })        this.setStorage();    },    checkStatus(index) {        this.todoList[index].status = !this.todoList[index].status;        this.setStorage();    }}

复制代码

更多开发者资料请参考:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/codelabs-0000001141821381

好啦,本期内容就分享到这里,前端的小伙伴可以顺手下载一个 IDEA 体验一下,真的很简单,支持华为鸿蒙全生态底层操作系统的诞生!!!

目录
相关文章
|
11天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
27天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
44 3
|
26天前
|
JavaScript 前端开发 物联网
「Mac畅玩鸿蒙与硬件1」鸿蒙开发环境配置篇1 - 认识鸿蒙系统与开发工具
本篇将介绍鸿蒙操作系统(HarmonyOS)的基本概念以及在 Mac 环境下进行鸿蒙开发所需的工具。通过了解鸿蒙系统和开发工具的特点,为后续的学习和实践奠定基础。
75 1
「Mac畅玩鸿蒙与硬件1」鸿蒙开发环境配置篇1 - 认识鸿蒙系统与开发工具
|
9天前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
|
11天前
|
前端开发
结合具体案例分析Gitflow分支策略在大型前端项目中的应用优势
通过这个具体案例可以看出,Gitflow 分支策略在大型前端项目中能够提供有条不紊的开发环境,保障项目的稳定性和持续发展。
|
22天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
22天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
29 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
28天前
|
Rust 前端开发 JavaScript
前端性能革命:WebAssembly在高性能计算中的应用探索
【10月更文挑战第26天】随着Web应用功能的日益复杂,传统JavaScript解释执行模式逐渐成为性能瓶颈。WebAssembly(Wasm)应运而生,作为一种二进制代码格式,支持C/C++、Rust等语言编写的代码在浏览器中高效运行。Wasm不仅提升了应用的执行速度,还具备跨平台兼容性和安全性,显著改善了Web应用的响应速度和用户体验。
40 4
|
27天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
40 1
|
27天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
46 2