树叶云鸿蒙OS教程：鸿蒙OS JS FA概述

JS UI 框架支持纯 JavaScript、JavaScript 和 Java 混合语言开发。JS FA 指基于 JavaScript 或 JavaScript 和 Java混合开发的 FA，下面主要介绍：JS FA 在 HarmonyOS 上运行时需要的基类 AceAbility、加载 JS FA 主体的方法、JS FA 开发目录。

AceAbility

AceAbility 类是 JS FA 在 HarmonyOS 上运行环境的基类，继承自 Ability。开发者的应用运行入口类应该从该类派生，代码示例如下：

public class MainAbility extends AceAbility {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
    }

 
    @Override
    public void onStop() {
        super.onStop();
    }
}

如何加载 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 作为实例名称，代码示例如下：

public class MainAbility extends AceAbility {
    @Override
    public void onStart(Intent intent) {
        setInstanceName("JSComponentName");  // config.json配置文件中ability.js.name的标签值。
        super.onStart(intent);
    }
}

说明

需在 super.onStart(Intent) 前调用此接口。

JS FA开发目录

新建工程的 JS 目录如下图所示。

在工程目录中：common 文件夹主要存放公共资源，如图片、视频等；i18n 下存放多语言的 json 文件；pages 文件夹下存放多个页面，每个页面由 hml、css 和 js 文件组成。

• main > js > default > i18n > en-US.json：

此文件定义了在英文模式下页面显示的变量内容。同理，zh-CN.json 中定义了中文模式下的页面内容。

  {
    "strings": {
      "hello": "Hello",
      "world": "World"
    },
    "files": {
    }
  }

• main > js > default > pages > index > index.hml：

此文件定义了 index 页面的布局、index 页面中用到的组件，以及这些组件的层级关系。例如：index.hml 文件中包含了一个 text 组件，内容为 “Hello World” 文本。

  <div class ="container">
    <text class ="title">
      {{ $t('strings.hello') }} {{title}}
    </text>
  </div>

• main > js > default > pages > index > index.css：

此文件定义了 index 页面的样式。例如：index.css 文件定义了“container”和 “title” 的样式。

  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .title {
    font-size: 100px;
  }

• main > js > default > pages > index > index.js：

此文件定义了 index 页面的业务逻辑，比如数据绑定、事件处理等。例如：变量 “title”赋值为字符串 “World” 。

  export default {
    data: {
      title: '',
    },
    onInit() {
      this.title = this.$t('strings.world');
    },
  }