在開始本章正式內容之前先補充講一下前面章節沒有講到的一個小細節問題。
在我們每次關閉DevEco Studio不要直接點擊右上角的關閉按鈕，而是選擇菜單“文件 > 關閉項目”
這樣我們就回到了歡迎界面
當我們下次啟動程序的時候顯示的就是歡迎界面，而不是直接進入上次編輯的項目界面。
本章目標：
了解華為鴻蒙應用開發的JavaScript UI
啟動DevEco Studio，打開我們在「鴻蒙開發 2」第一個華為鴻蒙（HarmonyOS）應用程序（App）章節中創建的項目HelloWorld。
然后展開 pages 目錄下的兩個頁面對應的目錄，我們可以看到每個頁面都包含了三個文件。
這就是JAVAScript UI所包含的結構（HML）、表現（css）和邏輯（JavaScript）共3個主要部分：
（1）HML：鴻蒙標記語言（HarmonyOS Markup Language），用于定義用戶界面的結構。通過HML編寫的界面結構文件后綴名為.hml，因此HML既是一門語言，也是一種文件類型。要特別注意，雖然HML與html語法相似，但是仍然存在很多區別。
（2）CSS：層疊樣式表（Cascading Style Sheets），用于定義如何顯示HML組件。
（3）JavaScript：一種解釋性腳本語言，用于處理用戶界面的簡單業務邏輯，支持ECMAScript 6語法。
簡言之，就是HML用于構建頁面，CSS用于美化頁面，JavaScript用于處理用戶與頁面的交互。
這里和Web開發的html，css，javascript很類似，但不完全一樣。
JavaScript UI支持手機（Phone）、平板（Tablet）、智慧屏（TV）或智能穿戴（Wearable）等設備的應用開發。
我們在第2章中用于跳轉頁面時用到了JavaScript UI的router模塊
<!-- index.js -->
import router from '@system.router';
export default {
launch() {
router.push({
uri: 'pages/details/details'
})
}
}
router模塊主要包含以下方法：
（1）push（obj：IForwardPara）：跳轉到另外一個頁面，而且原先的頁面仍然存在，只是被遮蓋而已。通過IForwardPara可以定義跳轉的頁面和傳遞的數據，分別通過其URL屬性和params屬性定義。
（2）replace（obj：IForwardPara）：跳轉到另外一個頁面，并銷毀當前頁面。通過IForwardPara可以定義跳轉的頁面和傳遞的數據，分別通過其URL屬性和params屬性定義。
（3）back（obj？：IBackPara）：返回上一個頁面。通過IBackPara可以定義返回的頁面路徑（可選），通過該對象內的path屬性定義。
（4）clear（）：清除被遮蓋的頁面，僅保留當前顯示的頁面。
（5）getLength（）：獲取當前頁面棧長度，即棧內頁面數量。
（6）getState（）：獲取當前頁面棧狀態，返回IRouterState對象，該對象包括index、name和path共3個變量。index變量為整型，表示當前頁面所在頁面棧的位置，從底層到頂層是從1開始計數的。name為字符串，表示當前頁面文件名。path為字符串，表示當前頁面的路徑。
還有我們在launch()方法中用router模塊的push方法調用的uri地址是哪里來的呢？
我們打開“Main > config.json”文件，定位到“js”字段
這是我們創建頁面時DecEco Studio為我們自動添加的。
現在我們可以修改一下第二個頁面，添加一個按鈕，點擊按鈕后可以回到第一個頁面，以便更好地理解這些知識。
1 選擇“entry > src > main > js > default > pages >detail”，打開detail.hml文件，添加一個按鈕
<div class="container">
<text class="text">
Hi, I'm always here.
</text>
<!-- 添加一個按鈕 -->
<button class="button" type="capsule" value="Back" onclick="back"></button>
</div>
2 打開detail.css文件，添加按鈕的樣式
/* class選擇器，在hml文件中定義的class屬性，這里就是class="button" */
.button{
width: 240px;
height: 60px;
background-color: #007dff;
font-size: 30px;
text-color: white;
margin-top: 20px;
}
3 打開detail.js，實現返回第一個頁面的跳轉
// detail.js
import router from '@system.router';
export default {
back() {
router.push({
uri: 'pages/index/index' // 這里的地址是在config.json中已經定義好的
});
}
}
注：其實這里我們可以直接使用router.back();就可以實現返回的功能了。
4 打開預覽器Previewer，點擊Back按鈕，我們可以看到功能已經實現了。
