众所周知，现在的APP上有两大流派：原生和混合。华为在鸿蒙系统的开发工具直接支持JS引擎开发，与Cordova、Uni-app等跨平台引擎非常相似(当然目前还不能用DevEco开发IOS应用)。
上次我试着用华为原生开发运行了一个Hello World程序。今天我就来看看华为的JS引擎开发环境。
一、环境准备win7DevEco安装NodeJS。首先登录您的帐户：
在弹出的浏览器窗口中登录开发者帐户。
好像每次打开DevEco都要重新登录，不方便。
其次，创建一个项目
这里选择了一个选项卡样式的模板。
还是遇到老问题，gradle下载太慢。
可以放在grad le-wrapper-grad le-wrapper . properties中。
distribution URL=https \ ://services . gradle . org/distributions/gradle-5 . 4 . 1-all . zip改成
分发URL=3359 downloads . grad le-dn . com/distributions/grad le-5 . 4 . 1-all . zip重新打开DevEco，npm安装再次卡住：
等待会议结束后，提示失败：
幸运的是，还有一个提醒，可以手动安装：
修改entry/package.json并添加代码：
{'private': true}}到命令行运行：
执行后，您可能需要重新启动DevEco。过一会儿，会提示您构建成功：
3.创建虚拟机并打开HVD管理器虚拟机管理工具：
当它下载完图像后，这里有一个电视虚拟机：
等待虚拟机启动：
pup自定义弹窗组件13.jpg">四、运行程序点击菜单栏的运行：
不出意外的话，会提示： 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(); }}12345678910112. 加载JS FA在配置文件： resources/config.json里有与js引擎相关的配置：
"js": < { "pages": < "pages/index/index" >, "name": "default", "window": { "designWidth": 720, "autoDesignWidth": true } } >123456789101112这里的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); }}1234567缺少的default可以不用指定。
3. JS代码结构
这里各个文件名和文件夹名称都非常清晰，不难理解其含义。
JS的代码入口在app.js里，里面定义了Application的创建、销毁两个生命周期函数。
export default { onCreate() { console.info('AceApplication onCreate'); }, onDestroy() { console.info('AceApplication onDestroy'); }};123456789index.js是首页js文件，index.html是布局文件。
六、JS FA的组件介绍组件类型 主要组件 基础组件 text、image、progress、rating、span、marquee、image-animator、divider、search、menu、chart 容器组件 div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、popup、list-item-group、refresh、dialog 媒体组件 video 画布组件 canvas
更详细的使用可以参照官网：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-building-ui-interactions-0000000000501484
