章內(nèi)容

• HML語法
• CSS語法
• JavaScript

HML、CSS、JavaScript在前面的章節(jié)中一直在用，現(xiàn)在就來專門介紹它們。

一 HML語法

HML（HarmonyOS Markup Language）是一套類HTML的標(biāo)記語言，通過組件，事件構(gòu)建出頁面的內(nèi)容。頁面具備數(shù)據(jù)綁定、事件綁定、列表渲染、條件渲染和邏輯控制等高級能力。

關(guān)于頁面結(jié)構(gòu)我們這里就不再介紹了，前面我們一直在用組件構(gòu)建頁面。數(shù)據(jù)綁定我們也在前面章節(jié)中用到了很多次，現(xiàn)在我們就來看看。

1 數(shù)據(jù)綁定

通過在HML頁面中用雙大括號語法來聲明數(shù)據(jù)，然后在JS文件中通過data對象進(jìn)行賦值，下面是典型示例

<!-- xxx.hml -->
<div onclick="changeText">
  <text> {{content[1]}} </text>
</div>

// xxx.js
export default {
  data: {
    content: ['Hello World!', 'Welcome to my world!']
  },
  changeText: function() {
    this.content.splice(1, 1, this.content[0]);
  }
}

2 事件

通過‘on'或者‘@’將事件綁定在組件上，當(dāng)組件觸發(fā)事件時(shí)會(huì)執(zhí)行JS文件中對應(yīng)的事件處理函數(shù)。事件綁定的典型示例：

<!-- xxx.hml -->
<div class="container">
    <text class="title">{{count}}</text>
    <div class="box">
        <!-- 沒有參數(shù)的事件處理函數(shù) -->
        <input type="button" class="btn" value="increase" onclick="increase" />        
        <!-- 傳遞參數(shù) -->
        <input type="button" class="btn" value="double" @click="multiply(2)" />
        <input type="button" class="btn" value="square" @click="multiply(count)" />
    </div>
</div>

// xxx.js
export default {
  data: {
    count: 0
  },
  increase() {
    this.count++;
  },
  multiply(multiplier) {
    this.count=multiplier * this.count;
  }
};

HML組件還支持冒泡事件綁定。冒泡事件綁定包括：

• 綁定冒泡事件：on:{event}.bubble。on:{event}等價(jià)于on:{event}.bubble。
• 綁定并阻止冒泡事件向上冒泡：grab:{event}.bubble。grab:{event}等價(jià)于grab:{event}.bubble。

典型示例如下：

<!-- xxx.hml -->
<div>
   <!-- 使用事件冒泡模式綁定事件回調(diào)函數(shù)。5+ -->
    <div on:touchstart.bubble="touchstartfunc"></div>
    <div on:touchstart="touchstartfunc"></div>
    <!-- 綁定事件回調(diào)函數(shù)，但阻止事件向上傳遞。5+ -->
    <div grab:touchstart.bubble="touchstartfunc"></div>
    <div grab:touchstart="touchstartfunc"></div>
    <!-- 使用事件冒泡模式綁定事件回調(diào)函數(shù)。6+ -->
    <div on:click.bubble="clickfunc"></div>
    <div on:click="clickfunc"></div>
    <!-- 綁定事件回調(diào)函數(shù)，但阻止事件向上傳遞。6+ -->
    <div grab:click.bubble="clickfunc"></div>
    <div grab:click="clickfunc"></div>
</div>

// xxx.js
export default {
    clickfunc: function(e) {
        console.log(e);
    },
    touchstartfuc: function(e) {
        console.log(e);
    },
}

Touch觸摸類事件支持捕獲，捕獲階段位于冒泡階段之前，捕獲事件先到達(dá)父組件然后達(dá)到子組件。

捕獲事件綁定包括：

• 綁定捕獲事件：on:{event}.capture。
• 綁定并阻止事件向下傳遞：grab:{event}.capture。

示例如下：

<!-- xxx.hml -->
<div>
    <!-- 使用事件捕獲模式綁定事件回調(diào)函數(shù)。5+ -->
    <div on:touchstart.capture="touchstartfunc"></div>
    <!-- 綁定事件回調(diào)函數(shù)，但阻止事件向下傳遞。5+ -->
    <div grab:touchstart.capture="touchstartfunc"></div>
</div>

// xxx.js
export default {
    touchstartfuc: function(e) {
        console.log(e);
    },
}

3 列表渲染

在「華為鴻蒙應(yīng)用程序開發(fā) 12」JavaScript UI常用基礎(chǔ)組件Image這個(gè)章節(jié)中，我們顯示多張圖片時(shí)有用到列表渲染。列表渲染就是通過組件的for屬性，循環(huán)構(gòu)建組件，示例如下：

<!-- xxx.hml -->
<div class="array-container">
  <!-- div列表渲染 -->
  <!-- 默認(rèn)$item代表數(shù)組中的元素, $idx代表數(shù)組中的元素索引 -->
  <div for="{{array}}" tid="id" onclick="changeText">
    <text>{{$idx}}.{{$item.name}}</text>
  </div>
  <!-- 自定義元素變量名稱 -->
  <div for="{{value in array}}" tid="id" onclick="changeText">    
    <text>{{$idx}}.{{value.name}}</text>
  </div>
  <!-- 自定義元素變量、索引名稱 -->
  <div for="{{(index, value) in array}}" tid="id" onclick="changeText">    
    <text>{{index}}.{{value.name}}</text>
  </div>
</div>

// xxx.js
export default {
  data: {
    array: [
      {id: 1, name: 'jack', age: 18}, 
      {id: 2, name: 'tony', age: 18},
    ],
  },
  changeText: function() {
    if (this.array[1].name==="tony"){
      this.array.splice(1, 1, {id:2, name: 'Isabella', age: 18});
    } else {
      this.array.splice(2, 1, {id:3, name: 'Bary', age: 18});
    }
  },
}

tid屬性主要用來加速for循環(huán)的重渲染，旨在列表中的數(shù)據(jù)有變更時(shí)，提高重新渲染的效率。tid屬性是用來指定數(shù)組中每個(gè)元素的唯一標(biāo)識(shí)，如果未指定，數(shù)組中每個(gè)元素的索引為該元素的唯一id。例如上述tid="id"表示數(shù)組中的每個(gè)元素的id屬性為該元素的唯一標(biāo)識(shí)。for循環(huán)支持的寫法如下：

• for="array"：其中array為數(shù)組對象，array的元素變量默認(rèn)為$item。
• for="v in array"：其中v為自定義的元素變量，元素索引默認(rèn)為$idx。
• for="(i, v) in array"：其中元素索引為i，元素變量為v，遍歷數(shù)組對象array。

說明

• 數(shù)組中的每個(gè)元素必須存在tid指定的數(shù)據(jù)屬性，否則運(yùn)行時(shí)可能會(huì)導(dǎo)致異常。
• 數(shù)組中被tid指定的屬性要保證唯一性，如果不是則會(huì)造成性能損耗。比如，示例中只有id和name可以作為tid字段，因?yàn)樗鼈儗儆谖ㄒ蛔侄巍?/li>
• tid不支持表達(dá)式。

HML中的條件渲染分為2種：if/elif/else和show。兩種寫法的區(qū)別在于：第一種寫法里if為false時(shí)，組件不會(huì)在vdom中構(gòu)建，也不會(huì)渲染，而第二種寫法里show為false時(shí)雖然也不渲染，但會(huì)在vdom中構(gòu)建；另外，當(dāng)使用if/elif/else寫法時(shí)，節(jié)點(diǎn)必須是兄弟節(jié)點(diǎn)，否則編譯無法通過。實(shí)例如下：

<!-- xxx.hml -->
<div class="container">
  <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
  <button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
  <text if="{{visible}}"> Hello-TV </text>
  <text elif="{{display}}"> Hello-Wearable </text>
  <text else> Hello-World </text>
</div>

/* xxx.css */
.container{
  flex-direction: column;
  align-items: center;
}
.btn{
  width: 280px;
  font-size: 26px;
  margin: 10px 0;
}

// xxx.js
export default {
  data: {
    visible: false,
    display: true,
  },
  toggleShow: function() {
    this.visible=!this.visible;
  },
  toggleDisplay: function() {
    this.display=!this.display;
  }
}

渲染優(yōu)化：show方法。當(dāng)show為true時(shí)，節(jié)點(diǎn)正常渲染；當(dāng)為false時(shí)，僅僅設(shè)置display樣式為none。示例如下：

<!-- xxx.hml -->
<div class="container">
  <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
  <text show="{{visible}}" > Hello World </text>
</div>

/* xxx.css */
.container{
  flex-direction: column;
  align-items: center;
}
.btn{
  width: 280px;
  font-size: 26px;
  margin: 10px 0;
}

// xxx.js
export default {
  data: {
    visible: false,
  },
  toggle: function() {
    this.visible=!this.visible;
  },
}

說明

禁止在同一個(gè)元素上同時(shí)設(shè)置for和if屬性

4 邏輯控制塊<block></block>

它使得循環(huán)渲染和條件渲染變得更加靈活；block在構(gòu)建時(shí)不會(huì)被當(dāng)作真實(shí)的節(jié)點(diǎn)編譯。注意block標(biāo)簽只支持for和if屬性。示例：

<!-- xxx.hml -->
<list>
  <block for="">
    <list-item type="students">
      <text>{{$item.name}}</text>
    </list-item>
    <block for="$item.kinds">
      <list-item type="kind">
        <text>{{$item.age}}</text>
      </list-item>
    </block>
  </block>
</list>

// xxx.js
export default {
  data: {
    glasses: [
      {name:'sunglasses', kinds:[{name:'XXX',color:'XXX'},{name:'XXX',color:'XXX'}]},
      {name:'nearsightedness mirror', kinds:[{name:'XXX',color:'XXX'}]},
    ],
  },
}

5 模板引用

HML可以通過element引用模板文件，在自定義組件時(shí)會(huì)很有用。示例：

<!-- template.hml -->
<div class="item"> 
  <text>Name: {{name}}</text>
  <text>Age: {{age}}</text>
</div>

<!-- index.hml -->
<element name='comp' src='../../common/template.hml'></element>
<div>
  <comp name="Tony" age="18"></comp>
</div>

二 CSS語法

CSS是描述HML頁面結(jié)構(gòu)的樣式語言。所有組件均存在系統(tǒng)默認(rèn)樣式，也可在頁面CSS樣式文件中對組件、頁面自定義不同的樣式。

1 尺寸單位

• 邏輯像素px（文檔中以<length>表示）： 默認(rèn)屏幕具有的邏輯寬度為720px（配置見配置文件中的window小節(jié)），實(shí)際顯示時(shí)會(huì)將頁面布局縮放至屏幕實(shí)際寬度，如100px在實(shí)際寬度為1440物理像素的屏幕上，實(shí)際渲染為200物理像素（從720px向1440物理像素，所有尺寸放大2倍）。 額外配置autoDesignWidth為true時(shí)（配置見配置文件中的window小節(jié)），邏輯像素px將按照屏幕密度進(jìn)行縮放，如100px在屏幕密度為3的設(shè)備上，實(shí)際渲染為300物理像素。應(yīng)用需要適配多種設(shè)備時(shí)，建議采用此方法。
• 百分比（文檔中以<percentage>表示）：表示該組件占父組件尺寸的百分比，如組件的width設(shè)置為50%，代表其寬度為父組件的50%。

2 樣式導(dǎo)入

為了模塊化管理和代碼復(fù)用，CSS樣式文件支持 @import 語句，導(dǎo)入css文件。

3 聲明樣式

每個(gè)頁面目錄下存在一個(gè)與布局hml文件同名的css文件，用來描述該hml頁面中組件的樣式，決定組件應(yīng)該如何顯示。

（1）內(nèi)部樣式，支持使用style、class屬性來控制組件的樣式。例如：

<!-- index.hml -->
<div class="container">
  <text style="color: red">Hello World</text>
</div>

/* index.css */
.container {
  justify-content: center;
}

（2）文件導(dǎo)入，合并外部樣式文件。例如，在common目錄中定義樣式文件style.css，并在index.css文件首行中進(jìn)行導(dǎo)入：

/* style.css */
.title {
  font-size: 50px;
}

/* index.css */
@import '../../common/style.css';
.container {
  justify-content: center;
}

4 選擇器

css選擇器用于選擇需要添加樣式的元素，支持的選擇器如下表所示：

示例：

<!-- 頁面布局xxx.hml -->
<div id="containerId" class="container">
  <text id="titleId" class="title">標(biāo)題</text>
  <div class="content">
    <text id="contentId">內(nèi)容</text>
  </div>
</div>

/* 頁面樣式xxx.css */
/* 對所有div組件設(shè)置樣式 */
div {
  flex-direction: column;
}
/* 對class="title"的組件設(shè)置樣式 */
.title {
  font-size: 30px;
}
/* 對id="contentId"的組件設(shè)置樣式 */
#contentId {
  font-size: 20px;
}
/* 對所有class="title"以及class="content"的組件都設(shè)置padding為5px */
.title, .content {
  padding: 5px;
}
/* 對class="container"的組件下的所有text設(shè)置樣式 */
.container text {
  color: #007dff;
}
/* 對class="container"的組件下的直接后代text設(shè)置樣式 */
.container > text {
  color: #fa2a2d;
}

5 選擇器優(yōu)先級

選擇器的優(yōu)先級計(jì)算規(guī)則與w3c規(guī)則保持一致（只支持：內(nèi)聯(lián)樣式，id，class，tag，后代和直接后代），其中內(nèi)聯(lián)樣式為在元素style屬性中聲明的樣式。

當(dāng)多條選擇器聲明匹配到同一元素時(shí)，各類選擇器優(yōu)先級由高到低順序?yàn)椋簝?nèi)聯(lián)樣式 > id > class > tag。

6 偽類

css偽類是選擇器中的關(guān)鍵字，用于指定要選擇元素的特殊狀態(tài)。例如，:disabled狀態(tài)可以用來設(shè)置元素的disabled屬性變?yōu)閠rue時(shí)的樣式。

除了單個(gè)偽類之外，還支持偽類的組合，例如，:focus:checked狀態(tài)可以用來設(shè)置元素的focus屬性和checked屬性同時(shí)為true時(shí)的樣式。支持的單個(gè)偽類如下表所示，按照優(yōu)先級降序排列：

偽類示例如下，設(shè)置按鈕的:active偽類可以控制被用戶按下時(shí)的樣式：

<!-- index.hml -->
<div class="container">
  <input type="button" class="button" value="Button"></input>
</div>

/* index.css */
.button:active {
  background-color: #888888;/*按鈕被激活時(shí)，背景顏色變?yōu)?888888 */
}

說明

針對彈窗類組件及其子元素不支持偽類效果，包括popup、dialog、menu、option、picker

7 樣式預(yù)編譯

預(yù)編譯提供了利用特有語法生成css的程序，可以提供變量、運(yùn)算等功能，令開發(fā)者更便捷地定義組件樣式，目前支持less、sass和scss的預(yù)編譯。使用樣式預(yù)編譯時(shí)，需要將原css文件后綴改為less、sass或scss，如index.css改為index.less、index.sass或index.scss。

（1）當(dāng)前文件使用樣式預(yù)編譯，例如將原index.css改為index.less：

/* index.less */
/* 定義變量 */
@colorBackground: #000000;
.container {
  background-color: @colorBackground; /* 使用當(dāng)前l(fā)ess文件中定義的變量 */
}

（2）引用預(yù)編譯文件，例如common中存在style.scss文件，將原index.css改為index.scss，并引入style.scss：

/* style.scss */
/* 定義變量 */
$colorBackground: #000000;

在index.scss中引用：

/* index.scss */
/* 引入外部scss文件 */
@import '../../common/style.scss';
.container {
  background-color: $colorBackground; /* 使用style.scss中定義的變量 */
}

說明

引用的預(yù)編譯文件建議放在common目錄進(jìn)行管理。

8 CSS樣式繼承

css樣式繼承提供了子節(jié)點(diǎn)繼承父節(jié)點(diǎn)樣式的能力，繼承下來的樣式在多選擇器樣式匹配的場景下，優(yōu)先級排最低，當(dāng)前支持以下樣式的繼承：

• font-family
• font-weight
• font-size
• font-style
• text-align
• line-height
• letter-spacing
• color
• visibility

三 JavaScript語法

JS文件用來定義HML頁面的業(yè)務(wù)邏輯，支持ECMA規(guī)范的JavaScript語言。基于JavaScript語言的動(dòng)態(tài)化能力，可以使應(yīng)用更加富有表現(xiàn)力，具備更加靈活的設(shè)計(jì)能力。下面講述JS文件的編譯和運(yùn)行的支持情況。

1 語法

支持ES6（EMACScript 6）語法。

• 模塊聲明

使用import方法引入功能模塊：

import router from '@system.router';

• 代碼引用

使用import方法導(dǎo)入js代碼：

import utils from '../../common/utils.js';

2 對象

（1）應(yīng)用對象$def

使用this.$app.$def獲取在app.js中暴露的對象。

說明

應(yīng)用對象不支持?jǐn)?shù)據(jù)綁定，需主動(dòng)觸發(fā)UI更新。

示例代碼

// app.js
export default {
  onCreate() {
    console.info('AceApplication onCreate');
  },
  onDestroy() {
    console.info('AceApplication onDestroy');
  },
  globalData: {
    appData: 'appData',
    appVersion: '2.0',
  },
  globalMethod() {
    console.info('This is a global method!');
    this.globalData.appVersion='3.0';
  }
};

// index.js頁面邏輯代碼
export default {
  data: {
    appData: 'localData',
    appVersion:'1.0',
  },
  onInit() {
    this.appData=this.$app.$def.globalData.appData;
    this.appVersion=this.$app.$def.globalData.appVersion;
  },
  invokeGlobalMethod() {
    this.$app.$def.globalMethod();
  },
  getAppVersion() {
    this.appVersion=this.$app.$def.globalData.appVersion;
  }
}

（2）頁面對象

其中data對象我們在前面章節(jié)的例子中用到過很多次。

3 方法

（1）數(shù)據(jù)方法

示例代碼：

// index.js
export default {
  data: {
    keyMap: {
      OS: 'HarmonyOS',
      Version: '2.0',
    },
  },
  getAppVersion() {
    this.$set('keyMap.Version', '3.0');
    console.info("keyMap.Version=" + this.keyMap.Version); // keyMap.Version=3.0

    this.$delete('keyMap');
    console.info("keyMap.Version=" + this.keyMap); // log print: keyMap.Version=undefined
  }
}

（2）公共方法

（3）事件方法

（4）頁面方法

scrollPageParam有如下取值

示例：

this.$rootElement.scrollTo({position: 0});
this.$rootElement.scrollTo({
  id: 'id',
  duration: 200,
  timingFunction: 'ease-in',
  complete: ()=>void
});

（5）獲取DOM元素

• 通過$refs獲取DOM元素

<!-- index.hml -->
<div class="container">
  <image-animator ref="animator" images="{{images}}"
    duration="1s" onclick="handleClick">
  </image-animator>
</div>

// index.js
export default {
  data: {
    images: [
      { src: '/common/frame1.png' },
      { src: '/common/frame2.png' },
      { src: '/common/frame3.png' },
    ],
  },
  handleClick() {
    const animator=this.$refs.animator; // 獲取ref屬性為animator的DOM元素
    const state=animator.getState();
    if (state==='paused') {
      animator.resume();
    } else if (state==='stopped') {
      animator.start();
    } else {
      animator.pause();
    }
  },
};

• 通過$element獲取DOM元素，這在前面的章節(jié)已經(jīng)用到過。示例：

<!-- index.hml -->
<div class="container">
  <image-animator class="image-player" id="animator"
    images="{{images}}" duration="1s" onclick="handleClick">
  </image-animator>
</div>

// index.js
export default {
  data: {
    images: [
      { src: '/common/frame1.png' },
      { src: '/common/frame2.png' },
      { src: '/common/frame3.png' },
    ],
  },
  handleClick() {
    const animator=this.$element('animator'); // 獲取id屬性為animator的DOM元素
    const state=animator.getState();
    if (state==='paused') {
      animator.resume();
    } else if (state==='stopped') {
      animator.start();
    } else {
      animator.pause();
    }
  },
};

（6）獲取ViewMode

根節(jié)點(diǎn)所在頁面：

<!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container">
  <div class="container">
    <text>{{text}}</text>
    <parentComp></parentComp>
  </div>
</div>

// root.js
export default {
  data: {
    text: 'I am root!',
  },

自定義parent組件：

<!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="parentClicked">parent component click</text>
  <text class="text-style" if="{{show}}">hello parent component!</text>
  <childComp id="selfDefineChild"></childComp>
</div>

// parent.js
export default {
  data: {
    show: false,
    text: 'I am parent component!',
  },
  parentClicked () {
    this.show=!this.show;
    console.info('parent component get parent text');
    console.info(`${this.$parent().text}`);
    console.info("parent component get child function");
    console.info(`${this.$child('selfDefineChild').childClicked()}`);
  },
}

自定義child組件：

<!-- child.hml -->
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="childClicked">child component clicked</text>
  <text class="text-style" if="{{show}}">hello child component</text>
</div>

// child.js
export default {
  data: {
    show: false,
    text: 'I am child component!',
  },
  childClicked () {
    this.show=!this.show;
    console.info('child component get parent text');
    console.info('${this.$parent().text}');
    console.info('child component get root text');
    console.info('${this.$root().text}');
  },
}

至此，關(guān)于華為鴻蒙應(yīng)用開發(fā)中HML、CSS、JavaScript語法部分的介紹就講完了，本章盡量用實(shí)例對每個(gè)知識(shí)點(diǎn)進(jìn)行了直觀地呈現(xiàn)，大家可以先都熟悉下，然后在以后的開發(fā)中不記得的可以回過頭查看。

最后，老規(guī)矩，敲黑板：多動(dòng)手，多思考！代碼一定要親自動(dòng)手敲出來！[呲牙][比心]

開始本章正式內(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è)頁面，以便更好地理解這些知識(shí)。

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)了。