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