harmonyos的js UI框架FA概述_js fa是什么儿

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');
	},
}