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

[/$]

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注