距离鸿蒙 OS 2.0 发布已经过去一些日子了，由于公司项目的事情比较多，一直没有怎么去关注，这位国产的HarmonyOS，闲暇之余，我看了下这个HarmonyOS，感觉还不错，支持java和JavaScript开发，对于做作为前端开发人员，也顺便了解下！
HarmonyOS 是什么？
在官网上是这样说的： HarmonyOS是一款“面向未来”、面向全场景（移动办公、运动健康、社交通信、媒体娱乐等）的分布式操作系统。在传统的单设备系统能力的基础上，HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持多种终端设备。
- 对消费者而言，HarmonyOS能够将生活场景中的各类终端进行能力整合，形成一个“超级虚拟终端”，可以实现不同的终端设备之间的快速连接、能力互助、资源共享，匹配合适的设备、提供流畅的全场景体验。
- 对应用开发者而言，HarmonyOS采用了多种分布式技术，使得应用程序的开发实现与不同终端设备的形态差异无关，降低了开发难度和成本。这能够让开发者聚焦上层业务逻辑，更加便捷、高效地开发应用。
- 对设备开发者而言，HarmonyOS采用了组件化的设计方案，可以根据设备的资源能力和业务特征进行灵活裁剪，满足不同形态的终端设备对于操作系统的要求。
HarmonyOS 特点
- 分布式软总线
分布式软总线是多种终端设备的统一基座，为设备之间的互联互通提供了统一的分布式通信能力，能够快速发现并连接设备，高效地分发任务和传输数据。
- 分布式设备虚拟化
分布式设备虚拟化平台可以实现不同设备的资源融合、设备管理、数据处理，多种设备共同形成一个超级虚拟终端。针对不同类型的任务，为用户匹配并选择能力合适的执行硬件，让业务连续地在不同设备间流转，充分发挥不同设备的资源优势。
- 分布式数据管理
分布式数据管理基于分布式软总线的能力，实现应用程序数据和用户数据的分布式管理。用户数据不再与单一物理设备绑定，业务逻辑与数据存储分离，应用跨设备运行时数据无缝衔接，为打造一致、流畅的用户体验创造了基础条件。
- 分布式任务调度
分布式任务调度基于分布式软总线、分布式数据管理、分布式Profile等技术特性，构建统一的分布式服务管理（发现、同步、注册、调用）机制，支持对跨设备的应用进行远程启动、远程调用、远程连接以及迁移等操作，能够根据不同设备的能力、位置、业务运行状态、资源使用情况，以及用户的习惯和意图，选择合适的设备运行分布式任务。
- 一次开发，多端部署
HarmonyOS提供了用户程序框架、Ability框架以及UI框架，支持应用开发过程中多终端的业务逻辑和界面逻辑进行复用，能够实现应用的一次开发、多端部署，提升了跨设备应用的开发效率。一次开发、多端部署。
- 统一OS，弹性部署
HarmonyOS通过组件化和小型化等设计方法，支持多种终端设备按需弹性部署，能够适配不同类别的硬件资源和功能需求。支撑通过编译链关系去自动生成组件化的依赖关系，形成组件树依赖图，支撑产品系统的便捷开发，降低硬件设备的开发门槛。
- 支持各组件的选择（组件可有可无）：根据硬件的形态和需求，可以选择所需的组件。
- 支持组件内功能集的配置（组件可大可小）：根据硬件的资源情况和功能需求，可以选择配置组件中的功能集。例如，选择配置图形框架组件中的部分控件。
- 支持组件间依赖的关联（平台可大可小）：根据编译链关系，可以自动生成组件化的依赖关系。例如，选择图形框架组件，将会自动选择依赖的图形引擎组件等。
但我看完这些的时候，感觉前端估计要占用安卓的市场啦！估计一部分安卓开发人员是不是要面临着危机；看到“一次开发，多端部署”这个时候感觉用html 开发一个页面，通过各种外壳包起来形成多端的应用，就像DCloud一样。其实我在想，到时候java 开发一个应用，这个功能和JavaScript 开发应用一样，在市场上会不会面临2个，到时候会不会出现各种五花八门的应用，增加市场的管理能力呢？哈哈，这不是我们考虑的问题啦！！来看看怎么来用JavaScript写第一个HarmonyOS 的应用。
环境搭建
-
操作系统 支持 Windows10 64,至于Windows7是否支持，有win7的同学可以试下， mac系统支持，linux 不支持
-
nodejs 安装 [JavaScript 开发用到的]，我的是v12.8.3
因为我的电脑本来就有java的环境，jdk1.8和gradle6.7，可以不装，DevEco Studio 2.0 Beta1里有，我装这些因为我已配好变量，大部分jar包和缓存都变更目录，防止系统盘吃紧的出现。
IDE DevEco Studio 2.0 Beta1 安装
跟普通软件一样，一步一步的走就行啦
首次启动配置，可以不配置，我这边为了更好的方便管理，所以我这边做了配置,这个ide 感觉跟idea 差不多。
创建项目
- 选择设备：一共有 TV,Wearable,lite Wearable三种选择；我这边选择的第一个TV,模板选的第四个 list Feature Ability(js)
- TV设备下一共有支持6种模板 java 开发 三种， js 开发三种,每个有啥不一样，通过每个模板上面的界面就以看出；
- Wearable设备下一共有支持3种模板 java 开发 一种， js 开发二种,每个有啥不一样，通过每个模板上面的界面就以看出；
- lite Wearable设备下一共有支持2种模板，每个有啥不一样，通过每个模板上面的界面就以看出；
- 选择配置
- Project Name: MyTv 项目名称
- Package name: com.example.myTv 包名
- Save location: F:/MyTv 存放路径
- Compatible SDK: SDK:API Version 3 SDK 版本
- 自动下载和构建项目工程
项目工程结构
MyTV
├─ .gitignore git 排除的文件
├─ .idea 当前IDE生成的配置文件
│ ├─ codeStyles
│ │ └─ codeStyleConfig.xml
│ ├─ gradle.xml
│ └─ misc.xml
├─ entry 项目入口
│ ├─ .gitignore git 排除的文件
│ ├─ libs
│ ├─ node_modules node 依赖
│ ├─ package.json node 依赖包管理
│ └─ src 源代码
│ ├─ main
│ │ ├─ config.json 鸿蒙项目配置
│ │ ├─ java Java代码工程
│ │ │ └─ com
│ │ │ └─ example
│ │ │ └─ mytv
│ │ │ ├─ MainAbility.java Java启动入口
│ │ │ └─ MyTV.java Java初始化
│ │ ├─ js JS代码工程
│ │ │ └─ default 默认配置文件
│ │ │ ├─ app.js JS 项目入口
│ │ │ ├─ common 公共组件和文件
│ │ │ │ ├─ arrow.png
│ │ │ │ └─ logo.png
│ │ │ ├─ i18n 国际化
│ │ │ │ ├─ en-US.json
│ │ │ │ └─ zh-CN.json
│ │ │ └─ pages 页面存放文件夹
│ │ │ └─ index 首页文件夹
│ │ │ ├─ index.css 首页 css 样式
│ │ │ ├─ index.hml 首页 hml 结构
│ │ │ └─ index.js 首页 js 数据绑定代码
│ │ └─ resources 静态资源文件，图片、视频等
│ │ ├─ base
│ │ │ ├─ element
│ │ │ │ └─ string.json
│ │ │ └─ media
│ │ │ └─ icon.png
│ │ └─ rawfile
│ └─ test 单元测试文件夹
│ └─ java
│ └─ com
│ └─ example
│ └─ mytv
│ └─ MainAbilityTest.java
├─ gradle Java 和gradle 依赖管理工具配置
│ └─ wrapper
│ ├─ gradle-wrapper.jar
│ └─ gradle-wrapper.properties
├─ gradle.properties
├─ gradlew
└─ gradlew.bat
接下来我们详细看下首页的3个文件
src/js/default/pages/index/index.css, 其实更我们常规的写法没有什么区别！
...
.title {
line-height: 60px;
font-size: 48px;
margin-bottom: 16px;
color: #ffffff;
margin-left: 48px;
}
.content_box {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 516px;
margin-top: 24px;
}
.content-list {
width: 516px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
flex-grow: 1;
}
.content-bar {
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 420px;
height: 48px;
margin-left: 48px;
margin-right: 48px;
background-color: #808080;
border-radius: 8px;
}
...
src/js/default/pages/index/index.html, 写过vue 的应该知道 其实这个就是 一个模板，就是template中间的部分。
<div class="container">
<div class="content_box">
<text class="title">{{Title}}
</text>
<list class="content-list">
<list-item type="listItem" class="{{list_item_class1}}" onfocus="focusFunc1" onblur="blurFunc1">
<text class="{{text_class1}}">{{$t('strings.list')}} 1
</text>
<div class="bar-more">
<image class="bar-img" src="../../common/arrow.png"></image>
</div>
</list-item>
<list-item type="divider" style="height: 12px"></list-item>
<list-item type="listItem" class="{{list_item_class2}}" onfocus="focusFunc2" onblur="blurFunc2">
<text class="{{text_class2}}">{{$t('strings.list')}} 2
</text>
<div class="bar-more">
<image class="bar-img" src="../../common/arrow.png"></image>
</div>
</list-item>
...
</div>
<div class="text_box">
<text class="img-text">{{$t('strings.img-text')}}
</text>
</div>
</div>
</div>
src/js/default/pages/index/index.js, 写过vue 的应该知道 其实这个vue js 差不多 就是把生命之后去掉 保留data和menths里的东西。
export default {
data: {
Title: "",
list_item_class1: "content-bar",
text_class1: "bar-title",
list_item_class2: "content-bar",
text_class2: "bar-title",
list_item_class3: "content-bar",
text_class3: "bar-title",
list_item_class4: "content-bar",
text_class4: "bar-title",
list_item_class5: "content-bar",
text_class5: "bar-title",
list_item_class6: "content-bar",
text_class6: "bar-title",
},
onInit() {
this.Title = this.$t('strings.title');
},
....
blurFunc6: function () {
this.list_item_class6 = "content-bar";
this.text_class6 = "bar-title";
}
}
启动我的第一个TV
在启动项目之前，我们先介绍写模拟器，其实做安卓开发的都知道有个模拟器，就相当与我们写好代码，之后在浏览器种可以看效果，这个模拟器相当于一个浏览器就行啦！因为项目需要运行在模拟器中，所以得在 DevEco Studio 中创建一个 TV 模拟器，这里需要注意的是，HarmonyOS的模拟器是远程桌面的方式进行访问，所以需要先认证华为开发者账号。要创建模拟器，在 Tools 菜单中选择 HVD Manager：
点击右上方的按钮，运行，把首页的内容展示在模拟器中
编写首页
src/js/default/pages/index/index.js
我们在onInit 直接设置名字，这里写法你会看到 this.$t('strings.title') 的写法，这个是国际化的，就是我们通常说的 中文和英文界面的那种，在这里为了学习，这个多语言就不写啦，直接赋值汉字看下效果
this.$t('strings.title') 改为 this.Title = "我的第一个TV应用";
图-18
给每个Item 加入交互事件
...
<list-item type="listItem" class="{{list_item_class1}}" onclick="likeClick(1)" onfocus="focusFunc1" onblur="blurFunc1">
<text class="{{text_class1}}">{{$t('strings.list')}} 1
</text>
<div class="bar-more">
<image class="bar-img" src="../../common/arrow.png"></image>
</div>
</list-item>
...
js
....
likeClick: function(type) {
switch (type) {
case 1:
this.likeImage = "/common/timg.jpg";
this.imgText = "第一个item";
break;
case 2:
this.likeImage = "/common/logo.png";
this.imgText = "第二个item";
break;
case 3:
this.likeImage = "/common/arrow.png";
this.imgText = "第三个item";
default:
break;
}
}
更多api more
总结
感觉ide 跑起来有点吃力，运行起来有点像卡顿，ide 需要支持热更新和优化，其他的感觉跟开发安卓和小程序 没啥差别！个人理解，HarmonyOS做成这样不错啦，顶！
