JS UI 特性
1、支持声明式编程
JS UI 框架采用类HTML和CSS声明式编程语言作为页面布局和页面样式的开发语言,页面业务逻辑支持ECMAScript 规范和 Javascript 语言。JS UI 框架提供的声明式编程,可以让开发者避免编写UI状态切换的代码,视图配置信息更加直观。
2、跨设备的特性
开发框架架构上支持UI跨设备显示能力,运行时自动映射到不同的设备类型,开发者无感知,降低开发者多设备适配成本。
3、高性能的特性
开发框架包含了许多核心的控件,如列表、图片和各类容器组件等,针对声明式语法进行了渲染流程的优化。
JS UI的整体架构
JS UI框架包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)

- Application:应用层开发者接触最多的一层,在这一层可以通过框架层提供的能力来通过JS来开发上层应用
- Framework:前端框架成主要完成页面解析,以及提供MVVM(Mode-View-ViewModel)开发模式、页面路由机制和自定义组件等能力;
- Engine:引擎层主要提供动画解析、DOM(Document Object Model)树构建、布局计算、渲染命令构建与绘制、事件管理等能力;
- Porting Layer:适配层主要完成对平台层进行抽象,提供抽象接口,可以对接到系统平台。比如:事件对接、渲染管线对接和系统生命周期对接等。
开发指南
JS UI框架支持纯 Javascript、Javascript和Java混合语言开发。JS FA 指基于Javascript或Javascript和Java混合开发的FA、FA在HarmonyOS上运行时需要的基类AceAbility
AceAbility基类
[$]
AceAbility类是JS FA在 HarmonyOS 上运行环境的基类,继承Ability。通过JS开发HarmonyOS需要继承此类来定义自己的Ability,如下代码:
package com.example.helloword2; import ohos.ace.ability.AceAbility; import ohos.aafwk.content.Intent; public class MainAbility extends AceAbility { @Override public void onStart(Intent intent) { super.onStart(intent); } @Override public void onStop() { super.onStop(); } }
HarmonyOS是如何加载 JS FA?
JS FA生命周期时间分为应用生命周期和页面生命周期,应用通过AceAbility类中的 setInstanceName() 来设置该Ability的实例资源,并通过AceAbility窗口进行显示以及全局应用生命周期管理。
setInstanceName(String name) 的参数 name 指实例名称,实例名称与 config.json 文件中 profile.application.js.name 的值对应。若未修改实例名,而使用了缺省值 default,则无需调用此函数。若修改了实例名,则需在应用Ability实例的onStart()中调用此接口,并将参数 name 设置为修改后的实例名称。
提示:多实例应用的 profile.application.js 字段中有多个实例项,使用时请选择相应的实例名称。
setInstanceName()使用方法:在MainAbility的onStart()中的super.onStart()前调用此接口。以JSComponentName 作为实例名称,代码示例如下:
package com.example.helloword2; import ohos.ace.ability.AceAbility; import ohos.aafwk.content.Intent; public class MainAbility extends AceAbility { @Override public void onStart(Intent intent) { // 该组件名称是在 config.json 配置文件中 ability.js.name的标签值 // 注意:必须在 super.onStart(intent); 之前调用 setInstanceName("JS组件名称"); super.onStart(intent); } @Override public void onStop() { super.onStop(); } }
JS FA 开发工程说明
用Dev Eco Studio 新建一个JS工程后,你会在JS目录下看到如下的目录

- common:该文件夹下主要存放公共资源,如图片、视频等;i18n下存放多语言的json文件,pages文件下存放多个页面,每个页面有html、css和js文件组成;
- i18n:主要用于定义在不同的语言模式下,页面显示的变量的内容
- pages:主要用于存放页面的布局、样式以及js业务逻辑;其中index.html定义了页面的布局,index.css定义了index页面的样式,index.js定义了页面的业务逻辑,比如数据绑定,事件处理等。
布局单位
布局最基本的信息是布局单位,为了方便开发者进行页面布局而不需要关心不同设备的适配问题,在HarmonyOS的JS UI框架中为不同类型的设备提供了一个基准宽度。
- 智慧屏的基准宽度为 720px(px值逻辑像素,非物理像素)
- 穿戴设备的基准宽度为 454px
如何理解基准宽度呢,以智慧屏为例,720px的基准宽度,如果你在代码设置了某个布局或控件的宽度为 720px ,那么无论是它运行在1440px的设备上,还是运行在其它分辨率的设备上,都能实现占满整个屏幕宽度的效果:
另外我们不妨计算一下,720px的基准宽度,运行在1440px的设备上,它的1px代表2px的设备像素,所以对于视觉同学出视觉稿的时候,可以按照750px的宽度标准来进行视觉标准了
实战:基于JS UI实现计算器界面布局
效果图:

示例代码:https://gitee.com/guobao0730/wearable-demo
https://www.imooc.com/video/22655
[/$]