华为鸿蒙DevEco基于JS引擎的应用开发(JS FA)测试_dev eco js

@[TOC](华为鸿蒙DevEco基于JS引擎的应用开发(JS FA)测试)

众所周知，目前的APP上发有原生、混合两大流派。 华为鸿蒙的开发工具直接支持JS引擎开发，与Cordova、Uni-app等跨平台引擎非常类似（当然目前还不能用DevEco开发IOS应用）。

上次我尝试了使用华为的原生开发运行一个Hello World程序。今天我再来看看华为的JS引擎开发环境。

华为的JS UI框架开发的应用称为JS FA，即基于JS和Java混合开发的FA。

一、环境准备

• win7
• DevEco
• 安装NodeJS

先把账号登陆上去：
在弹出的浏览器窗口登陆开发者账号。

好像每次打开DevEco都要重新登陆，很不方便

二、创建项目

这里选择了一个Tab风格的模板。

还是遇到老问题，gradle下载太慢了。

可以把gradle -> wrapper -> gradle-wrapper.properties里

distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
1

改成

distributionUrl=https://downloads.gradle-dn.com/distributions/gradle-5.4.1-all.zip
1

重新打开DevEco，npm install 这一步又卡住了：

等了好大会，居然提示失败了：

好在有另一个提醒，告诉可以手动安装：

修改 entry/package.json，加入代码:

{
  "private": true
}
1
2
3

到命令行运行：

npm install  --registry=https://registry.npm.taobao.org
1

也可以永久设置npm源npm config set registry https://registry.npm.taobao.org

执行完可能要重启一下DevEco，稍等一会会提示BUILD成功：

三、创建虚拟机

打开HVD Manager虚拟机管理工具：
等它下载完镜像，这里还是创建一个TV虚拟机：

等待虚拟机启动起来：

四、运行程序

点击菜单栏的运行：
不出意外的话，会提示： Invalid keystore format：
上一次关上DevEco重新打开就好了，这一次没这么幸运，重启IDE问题依旧。
又试了一下删除build目录重新编译运行，这次成功了：

五、代码架构

1. java入口

入口处一个Application、一个MainAbility，奇怪的是进而面都没有加载JS引擎相关的语句。但从官网文档可知，这里的AceAbility是JS FA在鸿蒙OS上运行环境的基类，从Ability继承的，要开发JS FA应用就从这个类派生。

public class MainAbility extends AceAbility {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
    }
 
    @Override
    public void onStop() {
        super.onStop();
    }
}
1
2
3
4
5
6
7
8
9
10
11

2. 加载JS FA

在配置文件： resources/config.json里有与js引擎相关的配置：

    "js": [
      {
        "pages": [
          "pages/index/index"
        ],
        "name": "default",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": true
        }
      }
    ]
1
2
3
4
5
6
7
8
9
10
11
12

这里的name是实例名称，在java代码里super.onStart(Intent)前要指定：

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

缺少的default可以不用指定。

3. JS代码结构

这里各个文件名和文件夹名称都非常清晰，不难理解其含义。

JS的代码入口在app.js里，里面定义了Application的创建、销毁两个生命周期函数。

export default {
    onCreate() {
        console.info('AceApplication onCreate');
    },
    onDestroy() {
        console.info('AceApplication onDestroy');
    }
};

1
2
3
4
5
6
7
8
9

index.js是首页js文件，index.html是布局文件。

六、JS FA的组件介绍

更详细的使用可以参照官网：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-building-ui-interactions-0000000000501484