HarmonyOS随笔

ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript（简称TS）的基础上，扩展了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。TS是JavaScript（简称JS）的超集，ArkTS则是TS的超集。

Mozilla创造了JS，Microsoft创建了TS，Huawei进一步推出了ArkTS

关于JS

为了提升应用的开发效率，相应的JS前端框架也不断地涌现出来。其中比较典型的有Facebook发起的React.js，以及个人开发者尤雨溪发起的Vue.js。React和Vue的主要出发点都是将响应式编程的能力引入到应用开发中，实现数据和界面内容的自动关联处理。具体的实现方式上，React对JS做了一些扩展，引入了JSX（JavaScript XML）语法，可以将HTML的内容统一表示成JS来处理；Vue则是通过扩展的模板语法（Template）的方式来处理。

React和Vue所表达的能力是类似的，不过侧重点稍微有所不同。React主要是基于JSX的语法，将类HTML的语法融合到JS语言中；

Vue则是基于Template机制，在HTML的基础上扩展相应的语义。

关于TS

随着JS生态的发展，如何更有效地支撑大型的应用工程开发变成了一个重要的课题。大型的应用工程一般会涉及较复杂的代码以及较多的团队协作，对语言的规范性，模块的复用性、扩展性以及相关的开发工具都提出了更高的要求。为此，Microsoft在JS的基础上，创建了TS语言，并在2014年正式发布了1.0版本。TS主要从以下几个方面做了进一步的增强：

• 引入了类型系统，并提供了类型检查以及类型自动推导能力，可以进行编译时错误检查，有效的提升了代码的规范性以及错误检测范围和效率。
• 在类型系统基础上，引入了声明文件（Declaration Files）来管理接口或其他自定义类型。声明文件一般是以d.ts的形式来定义模块中的接口，这些接口和具体的实现做了相应的分离，有助于各模块之间的分工协作。另外，TS通过接口，泛型（Generics）等相关特性的支持，进一步增强了设计复杂的框架所需的扩展以及复用能力。

在工具层面，TS也有相应的编辑器、编译器、IDE（Integrated Development Environment）插件等相关的工具，来进一步提升开发效率。

TS在兼容JS生态方面也做了较好的平衡，TS应用通过相应编译器可以编译出纯JS应用，可以在标准的JS引擎上运行。同时，TS定位为JS的超集，即JS应用也是合法的TS应用。此外，在标准层面上，TS兼容ECMA的相应标准，并维护那些还未成为ECMA标准的新特性。

关于ArkTS

基于JS的前端框架以及TS的引入，进一步提升了应用开发效率，但依然存在一些不足。

从开发者维度来看：

写一个应用需要了解三种语言（JS/TS、HTML和CSS）。这对Web开发者相对友好，但对非Web开发者来说，负担较重。

从运行时维度来看：

• 在语言运行时方面，尽管TS有了类型的加持，但也只是用于编译时检查，然后通过TS Compiler转成JS，运行时引擎还是无法利用到基于类型系统的优化。
• 在渲染方面，主流Web引擎由于本身复杂度以及历史原因，性能、资源占用方面与常见OS原生框架都有一定的差距，尤其在移动平台上。React Native通过渲染架构的改进一定程度上提升了性能体验，但在平台渲染效果和能力的一致性，以及JS语言性能等方面还是存在一定的不足。

由于JS/TS有比较完善的开发者生态，语言也比较中立友好，有相应的标准组织可以逐步演进，JS/TS语言成了比较自然的选择。以JS/TS为基础，在开发框架的维度，我们做了如下的架构演进设计：

• 通过基于JS扩展的类Web开发范式，来支持主流的前端开发方式。同步的，在运行时方面，通过渲染引擎的增强（平台无关的自绘制机制、声明式UI后端设计、动态布局/多态UI组件等），语言编译器和运行时的优化增强（代码预编译、高效FFI-Foreign Function Interface、引擎极小化等），进一步提升相关的性能体验，并可部署到不同设备上（包括百KB级内存的轻量设备）。另外，通过平台适配层的设计，构建了跨OS平台的基础设施。
• 通过基于TS扩展的声明式UI开发范式，提供了更简洁更自然的开发体验。在运行时方面，在上述的基础上，结合语言运行时的类型优化，以及渲染运行时的扁平化流水线技术等，进一步提升性能体验。

声明式UI的定义：

声明式UI构建页面的过程，其实是组合组件的过程，声明式UI的思想，主要体现在两个方面

一是描述UI的呈现效果

二是状态驱动视图更新

类似苹果的SwiftUI中通过组合视图View，安卓Jetpack Compose中通过组合@Composable函数，ArkUI作为HarmonyOS应用开发的UI开发框架，其使用ArkTS语言构建自定义组件，通过组合自定义组件完成页面的构建。

后面开局写@Entry和@Component作为页面的入口

自定义组件struct+xxx{}

内部可加build方法来描述组件，build内部又有Column和Text可用于改变布局和显示的组件

简单的页面构建

在拿到一个页面设计图时，首先要确定的是使用的布局组件如Column和Row即行和列，一般来说首先是垂直方向上设定组件，其次用Row容器进行水平方向上的布局（手机为正向，非横向）

属性

justifyContent        设置子组件在水平轴上的对齐格式（FlexAlign：Start、Center、End、SpaceBetween、SpaceEvenly）

alignItems        设置子组件在交叉轴上的对齐格式（HorizontalAlign）

下分Column与Row，这里记一个Row的（Top、center、Bottom）这三和那三就是方向不同

常用组件与布局（Codelab）

Column        沿垂直方向布局（

（C与R的子组件  space        设置子组件在主轴方向上的间距）

Row        沿水平方向布局

List        常用设置页面使用List容器布局

Tabs        进行首页的页面切换

Grid        对首页网格菜单进行布局

Swiper        在首页完成一组图片的轮播效果

具体的实施效果还需进行实际编码以熟悉各组件的使用。