HarmonyOS JS布局开发指南（包含示例代码）

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

[/$]