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文件中module.js.name的值对应。若开发者未修改实例名，而使用了缺省值default，则无需调用此接口。若开发者修改了实例名，则需在应用Ability实例的onStart()中调用此接口，并将参数“name”设置为修改后的实例名称。

说明

多实例应用的module.js字段中有多个实例项，使用时请选择相应的实例名称。

setInstanceName()接口使用方法：在MainAbility的onStart()中的super.onStart()前调用此接口。以JSComponentName作为实例名称，代码示例如下：

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

说明

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

JS FA开发目录

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

在工程目录中：i18n下存放多语言的json文件；pages文件夹下存放多个页面，每个页面由hml、css和js文件组成。

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

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

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

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

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

  “Hello World”

  文本。

  <div class ="container">
    <text class ="title">
      strings.hello 
    </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');
    },
  }