鴻蒙OS JS FA概述

JS UI 框架支持純 JavaScript、JavaScript 和 Java 混合語(yǔ)言開(kāi)發(fā)。JS FA 指基于 JavaScript 或 JavaScript 和 Java混合開(kāi)發(fā)的 FA，下面主要介紹：JS FA 在 HarmonyOS 上運(yùn)行時(shí)需要的基類(lèi) AceAbility、加載 JS FA 主體的方法、JS FA 開(kāi)發(fā)目錄。

AceAbility

AceAbility 類(lèi)是 JS FA 在 HarmonyOS 上運(yùn)行環(huán)境的基類(lèi)，繼承自 Ability。開(kāi)發(fā)者的應(yīng)用運(yùn)行入口類(lèi)應(yīng)該從該類(lèi)派生，代碼示例如下：

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

如何加載 JS FA

JS FA 生命周期事件分為應(yīng)用生命周期和頁(yè)面生命周期，應(yīng)用通過(guò) AceAbility 類(lèi)中setInstanceName() 接口設(shè)置該 Ability 的實(shí)例資源，并通過(guò) AceAbility 窗口進(jìn)行顯示以及全局應(yīng)用生命周期管理。

setInstanceName(String name)的參數(shù)“name”指實(shí)例名稱(chēng)，實(shí)例名稱(chēng)與config.json 文件中 profile.application.js.name 的值對(duì)應(yīng)。若開(kāi)發(fā)者未修改實(shí)例名，而使用了缺省值 default，則無(wú)需調(diào)用此接口。若開(kāi)發(fā)者修改了實(shí)例名，則需在應(yīng)用 Ability 實(shí)例的 onStart()中調(diào)用此接口，并將參數(shù)“name”設(shè)置為修改后的實(shí)例名稱(chēng)。

說(shuō)明

多實(shí)例應(yīng)用的 profile.application.js 字段中有多個(gè)實(shí)例項(xiàng)，使用時(shí)請(qǐng)選擇相應(yīng)的實(shí)例名稱(chēng)。

setInstanceName() 接口使用方法：在 MainAbility 的 onStart() 中的 super.onStart() 前調(diào)用此接口。以 JSComponentName 作為實(shí)例名稱(chēng)，代碼示例如下：

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

說(shuō)明

需在 super.onStart(Intent) 前調(diào)用此接口。

JS FA開(kāi)發(fā)目錄

新建工程的 JS 目錄如下圖所示。

在工程目錄中：common 文件夾主要存放公共資源，如圖片、視頻等；i18n 下存放多語(yǔ)言的 json 文件；pages 文件夾下存放多個(gè)頁(yè)面，每個(gè)頁(yè)面由 hml、css 和 js 文件組成。

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

此文件定義了在英文模式下頁(yè)面顯示的變量?jī)?nèi)容。同理，zh-CN.json 中定義了中文模式下的頁(yè)面內(nèi)容。

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

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

此文件定義了 index 頁(yè)面的布局、index 頁(yè)面中用到的組件，以及這些組件的層級(jí)關(guān)系。例如：index.hml 文件中包含了一個(gè) text 組件，內(nèi)容為 “Hello World” 文本。

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

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

此文件定義了 index 頁(yè)面的樣式。例如：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 頁(yè)面的業(yè)務(wù)邏輯，比如數(shù)據(jù)綁定、事件處理等。例如：變量 “title”賦值為字符串 “World” 。

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