眾所周知，目前的APP上發有原生、混合兩大流派。 華為鴻蒙的開發工具直接支援JS引擎開發，與Cordova、Uni-app等跨平臺引擎非常類似（當然目前還不能用DevEco開發IOS應用）。

上次我嘗試了使用華為的原生開發執行一個Hello World程式。今天我再來看看華為的JS引擎開發環境。

一、環境準備win7DevEco安裝NodeJS

先把賬號登陸上去：

在彈出的瀏覽器視窗登陸開發者賬號。

好像每次開啟DevEco都要重新登陸，很不方便

二、建立專案

這裡選擇了一個Tab風格的模板。

還是遇到老問題，gradle下載太慢了。

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

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

改成

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

重新開啟DevEco，npm install 這一步又卡住了：

等了好大會，居然提示失敗了：

好在有另一個提醒，告訴可以手動安裝：

修改 entry/package.json，加入程式碼:

{ "private": true}

到命令列執行：

執行完可能要重啟一下DevEco，稍等一會會提示BUILD成功：

三、建立虛擬機器

開啟HVD Manager虛擬機器管理工具：

等它下載完映象，這裡還是建立一個TV虛擬機器：

等待虛擬機器啟動起來：

不出意外的話，會提示： Invalid keystore format：

上一次關上DevEco重新開啟就好了，這一次沒這麼幸運，重啟IDE問題依舊。又試了一下刪除build目錄重新編譯執行，這次成功了：

入口處一個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(); }}1234567891011

2. 載入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可以不用指定。

這裡各個檔名和資料夾名稱都非常清晰，不難理解其含義。

JS的程式碼入口在app.js裡，裡面定義了Application的建立、銷燬兩個生命週期函式。

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

index.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

更詳細的使用可以參照官網：/file/2020/09/21/20200921130128_3.jpg