1. 若首次打開DevEco Studio，請點擊Create Project創建工程。如果已經打開了一個工程，請在菜單欄選擇File > New > Create Project來創建一個新工程。
2. 選擇Application應用開發（本文以應用開發為例，Atomic Service對應為元服務開發），選擇模板“Empty Ability”，點擊Next進行下一步配置。

3. 進入配置工程界面，Compile SDK選擇“3.0.0(API 8) ”（Compile SDK選擇“3.1.0(API 9) ”時注意同步選擇 Model 為“FA”，此處以選擇“3.0.0(API 8) ”為例），Language選擇“JS”，其他參數保持默認設置即可。
   

說明

DevEco Studio V2.2 Beta1及更高版本支持使用JS低代碼開發方式。

低代碼開發方式具有豐富的UI界面編輯功能，通過可視化界面開發方式快速構建布局，可有效降低開發者的上手成本并提升開發者構建UI界面的效率。

如需使用低代碼開發方式，請打開上圖中的Enable Super Visual開關。

4. 點擊Finish，工具會自動生成示例代碼和相關資源，等待工程創建完成。

• entry：HarmonyOS工程模塊，編譯構建生成一個HAP包。

  • src > main > js：用于存放js源碼。
  • src > main > js > MainAbility：應用/服務的入口。
  • src > main > js > MainAbility > i18n：用于配置不同語言場景資源內容，比如應用文本詞條、圖片路徑等資源。
  • src > main > js > MainAbility > pages：MainAbility包含的頁面。
  • src > main > js > MainAbility > app.js：承載Ability生命周期。
  • src > main > resources：用于存放應用/服務所用到的資源文件，如圖形、多媒體、字符串、布局文件等。關于資源文件，詳見資源限定與訪問。
  • src > main > config.json：模塊配置文件。主要包含HAP包的配置信息、應用/服務在具體設備上的配置信息以及應用/服務的全局配置信息。具體的配置文件說明，詳見應用配置文件（FA模型）。
  • build-profile.json5：當前的模塊信息、編譯信息配置項，包括buildOption、targets配置等。其中targets中可配置當前運行環境，默認為HarmonyOS。
  • hvigorfile.ts：模塊級編譯構建任務腳本，開發者可以自定義相關任務和代碼實現。

• build-profile.json5：應用級配置信息，包括簽名、產品配置等。

• hvigorfile.ts：應用級編譯構建任務腳本。

1. 使用文本組件。

   工程同步完成后，在“Project”窗口，點擊“entry > src > main > js > MainAbility > pages> index”，打開“index.hml”文件，設置Text組件內容。“index.hml”文件的示例如下：

   <!-- index.hml -->
   <div class="container">    
   <text class="title">        Hello World    
   </text>
   </div>
   

2. 添加按鈕，并綁定onclick方法。

   在默認頁面基礎上，我們添加一個button類型的input組件，作為按鈕響應用戶點擊，從而實現跳轉到另一個頁面。“index.hml”文件的示例代碼如下：

   <!-- index.hml --><div class="container">    <text class="title">        Hello World    </text>
   <!-- 添加按鈕，值為Next，并綁定onclick方法-->    <input class="btn" type="button" value="Next" onclick="onclick"></input></div>
   

3. 設置頁面樣式。

   在“Project”窗口，點擊“entry > src > main > js > MainAbility > pages> index”，打開“index.css”文件，可以對頁面中文本、按鈕設置寬高、字體大小、間距等樣式。“index.css”文件的示例如下：

   /* index.css */
   .container {    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    left: 0px;    top: 0px;    width: 100%;    height: 100%;
   }.title {   font-size: 100px;    font-weight: bold;    text-align: center;    width: 100%;    margin: 10px;
   }.btn {    font-size: 60px;    font-weight: bold;    text-align: center;    width: 40%;    height: 5%;    margin-top: 20px;
   }
   

4. 在編輯窗口右上角的側邊工具欄，點擊Previewer，打開預覽器。第一個頁面效果如下圖所示：

1. 創建第二個頁面。

   在“Project”窗口，打開“entry > src > main > js > MainAbility”，右鍵點擊“pages”文件夾，選擇“New > Page”，命名為“second”，點擊“Finish”，即完成第二個頁面的創建。可以看到文件目錄結構如下：

1. 添加文本及按鈕。

   參照第一個頁面，在第二個頁面添加文本、按鈕及點擊按鈕綁定頁面返回等。“second.hml”文件的示例如下：

   <!-- second.hml --><div class="container">    <text class="title">        Hi there    </text>
   <!-- 添加按鈕，值為Back，并綁定back方法-->    <input class="btn" type="button" value="Back" onclick="back"></input></div>
   

2. 設置頁面樣式 。 “second.css”文件的示例如下：

   /* second.css */.container {    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    left: 0px;    top: 0px;    width: 100%;    height: 100%;}
   .title {    font-size: 100px;    font-weight: bold;    text-align: center;    width: 100%;    margin: 10px;}
   .btn {    font-size: 60px;    font-weight: bold;    text-align: center;    width: 40%;    height: 5%;    margin-top: 20px;}
   

頁面間的導航可以通過頁面路由router來實現。頁面路由router根據頁面url找到目標頁面，從而實現跳轉。使用頁面路由請導入router模塊。

1. 第一個頁面跳轉到第二個頁面。

   在第一個頁面中，跳轉按鈕綁定onclick方法，點擊按鈕時跳轉到第二頁。“index.js”示例如下：

   // index.js// 導入頁面路由模塊import router from '@ohos.router';
   export default {    onclick: function () {        router.push({            url: "pages/second/second"        })    }}
   

2. 第二個頁面返回到第一個頁面。

   在第二個頁面中，返回按鈕綁定back方法，點擊按鈕時返回到第一頁。“second.js”示例如下：

   // second.js// 導入頁面路由模塊import router from '@ohos.router';
   export default {    back: function () {        router.back()    }}
   

3. 打開index文件夾下的任意一個文件，點擊預覽器中的按鈕進行刷新。效果如下圖所示：

運行HarmonyOS應用可以使用遠程模擬器和物理真機設備，區別在于使用遠程模擬器運行應用不需要對應用進行簽名。接下來將以物理真機設備為例，介紹HarmonyOS應用的運行方法，關于模擬器的使用請參考使用Remote Emulator運行應用/服務。

1. 將搭載HarmonyOS系統的真機與電腦連接。具體指導及要求，可查看使用本地真機運行應用/服務。
2. 點擊File > Project Structure… > Project > SigningConfigs界面勾選“Support HarmonyOS”和“Automatically generate signature”，點擊界面提示的“Sign In”，使用華為帳號登錄。等待自動簽名完成后，點擊“OK”即可。如下圖所示：

在編輯窗口右上角的工具欄，點擊按鈕運行。效果如下圖所示

恭喜您已經使用JS語言開發（FA模型）完成了第一個HarmonyOS應用，快來探索更多的HarmonyOS功能吧。

華為鴻蒙官方文檔地址：構建第一個JS應用（FA模型）-快速入門-入門-HarmonyOS應用開發