初窺鴻蒙

1、什麼是鴻蒙

鴻蒙即 HarmonyOS ，是華爲公司推出的支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備的分佈式操做系統，而且它提供了多語言開發的 API，支持 Java、XML、C/C++、JS、CSS、HML（類 html 的鴻蒙本身的標記語言）等開發語言，並且它提供多種響應式佈局方案，支持柵格化佈局，可使用同一套代碼部署在手機手錶平板等多種不一樣尺寸屏幕的設備上。

2、開發準備

2.1 環境安裝

開發鴻蒙軟件須要用到 HUAWEI DevEco Studio，它提供了模板建立、開發、編譯、調試、發佈等服務。

一、登陸 HarmonysOS 應用開發門戶，點擊右上角註冊按鈕，註冊開發者賬號。

二、進入 HUAWEI DevEco Studio 產品頁，登陸華爲開發者帳號後下載 DevEco Studio 安裝包並進行安裝。

三、啓動 DevEco Studio，根據工具引導下載 HarmonyOS SDK。

四、下載 HarmonyOS SDK 成功後會進入歡迎頁，點擊歡迎頁中的 Configure > Settings 打開設置窗口，點擊 Apparance&behavior > System settings > HarmonyOS SDK，選中 JS SDK 進行下載。

至此開發環境安裝完成。

2.2 新建項目

點擊菜單欄中的 File > New > New Project 選擇須要開發的項目設備，而後選擇 Empty Featrue Ability(JS) 後，點擊 Next，此時會出現項目的信息配置 點擊 Finish，一個新的項目就被建立出來了。

2.3 項目目錄

使用 JS SDK 進行開發的話，須要關注的是 entry > src > main > js 文件夾，其中：

• i18n 目錄下存放的是多語言的 json 文件

  en-US.json 爲英文模式展現的內容 zh-CN.json 爲中文模式展現的內容

• pages 下存放的是項目的多個頁面，每一個頁面都由 hml、js 和 css 組成

  hml 文件定義了頁面的佈局、頁面中用到的組件，以及這些組件的層級關係 js 文件定義了頁面的業務邏輯，好比數據綁定、事件處理等 css 文件定義了 index 頁面的樣式

• app.js 中存放的是全局的 js 邏輯和 app 的生命週期管理

除此以外，還能夠本身建立 common 目錄用於存放公共資源文件，好比：公共樣式和公用方法。

2.4 生命週期

生命週期分爲應用的生命週期以及頁面的生命週期

其中，應用的生命週期主要分爲應用建立時調用的 onCreate，以及應用銷燬時觸發的 onDestroy。

而頁面的生命週期分爲：

• onInit：頁面數據準備完成時觸發；
• onReady：頁面編譯完成時觸發；
• onShow：頁面展現時觸發；
• onHide：頁面被隱藏時觸發；
• onDestroy：頁面被銷燬時觸發；

因爲JS UI只支持應用同時運行並展現一個頁面，所以當應用從頁面 A 跳轉到頁面 B 時，首先觸發頁面 A 的 onHide、onDestroy 函數，而後依次調用頁面 B 的 onInit、onReady、onShow 函數來初始化和顯示頁面 B。

3、組件

在 hml 文件中，組件分爲容器組件、基礎組件、媒體組件、畫布組件、柵格組件，因爲篇幅有限，這裏只列舉一下組件名稱和對應的描述，感興趣的同窗能夠點擊 組件文檔 進行查閱。

3.1 容器組件

組件名	描述
div	基礎容器
list	列表容器
list-item	list 的子組件，用來展現列表具體 item
list-item-group	list 的子組件，用來展現分組，寬度默認充滿 list 組件
badge	新事件標記容器
dialog	自定義彈窗容器
panel	彈出式可滑動面板容器
popup	氣泡提示容器
refresh	下拉刷新容器
stack	堆疊容器，子組件按照順序依次入棧，後一個子組件覆蓋前一個子組件
stepper	步驟導航器。當完成一個任務須要多個步驟時，可使用步驟導航器展現當前進展
stepper-item	步驟導航器子組件，做爲步驟導航器某一個步驟的內容展現組件
swiper	滑動切換容器
tabs	tab 頁標籤切換容器
tab-bar	tabs 的子組件，用來展現 tab 的標籤區
tab-content	tabs 的子組件，用來展現 tab 的內容區

3.2 基礎組件

組件名	描述
image	圖片組件，用來渲染展現圖片
image-animator	圖片幀動畫播放器
text	文本組件，用於展現文本信息
span	text 的子組件，提供文本修飾能力
textarea	多行文本輸入框
input	交互式組件，包括單選框，多選框，按鈕和單行文本輸入框
button	按鈕組件，包括膠囊按鈕、圓形按鈕、文本按鈕、弧形按鈕、下載按鈕
chart	圖表組件，用於呈現線形圖、柱狀圖、量規圖界面
divider	提供分隔器組件，分隔不一樣內容塊/內容元素。可用於列表或界面佈局
label	爲 input、button、textarea 組件定義相應的標註，點擊該標註時會觸發綁定組件的點擊效果
marquee	跑馬燈組件，用於展現一段單行滾動的文字
menu	菜單組件，做爲臨時性彈出窗口，用於展現用戶可執行的操做
select	下拉選擇組件，可以讓用戶在多個選項之間選擇
option	可做爲 menu 或 select 組件的子組件，用來展現具體項目
picker	滑動選擇器組件，類型支持普通選擇器，日期選擇器，時間選擇器，時間日期選擇器，多列文本選擇器
picker-view	嵌入頁面的滑動選擇器
piece	一種塊狀的入口組件，可包含圖片和文本，經常使用於展現收件人
progress	進度條組件，用於顯示內容加載或操做處理進度
qrcode	二維碼組件，用於生成並顯示二維碼
rating	評分條組件
search	搜索框組件，用於提供用戶搜索內容的輸入區域
slider	滑動條組件，用來快速調節設置值，如音量、亮度等
switch	開關組件，用於開啓或關閉某個功能
toolbar	工具欄組件，放在界面底部，用於展現針對當前界面的操做選項
toolbar-item	toolbar 子組件，用於展現工具欄上的一個操做選項
toggle	狀態按鈕組件，用於從一組選項中進行選擇

3.3 媒體組件

媒體組件暫時只有 video 組件一個，除了智能穿戴設備不支持外，手機、平板、智慧屏設備均支持該組件，它爲設備提供了視頻播放功能。

3.4 畫布組件

畫布組件展現只有 canvas 組件一個，手機、平板、智慧屏、智能穿戴設備均支持該組件，它爲設備提供了自定義繪製圖形的能力。

3.5 柵格組件

組件名	描述
grid-container	柵格佈局容器根節點
grid-row	grid-row 是柵格佈局容器 grid-container 的子容器組件，使用 flex 橫向佈局，排列每一個 grid-col 容器，justify-content 與 align-items 默認爲 flex-start，支持折行顯示
grid-col	grid-row 的子容器組件

柵格系統有 Margins, Gutters, Columns 三個屬性：

• Margins：用於控制元素距離屏幕最邊緣的距離
• Gutters：用來控制元素和元素之間的距離關係
• Columns：用來輔助佈局的主要定位工具，不一樣的屏幕尺寸匹配不一樣的 Columns 數量來輔助佈局定位，它會根據實際設備的寬度和 Columns 數量自動計算每個 Columns 的寬度

不一樣的設備根據水平寬度 px，顯示不一樣數量的柵格數：

xs : 0px < 水平分辨率 < 320px：2 Columns 柵格；

sm : 320px <= 水平分辨率 < 600px：4 Columns 柵格；

md : 600px <= 水平分辨率 < 840px：8 Columns 柵格；

lg : 840px <= 水平分辨率：12 Columns 柵格。

4、HML語法

HML（HarmonyOS Markup Language）是一套類 HTML 的標記語言，經過組件，事件構建出頁面的內容。頁面具有事件綁定、數據綁定、列表渲染、條件渲染和邏輯控制等能力。

4.1 事件綁定

hml 中事件綁定默認返回一個事件對象參數，能夠經過該參數獲取事件信息，同時也能夠傳遞額外參數。

<!-- xxx.hml -->
<div>
  <!-- 正常格式 -->
  <div onclick="clickfunc"></div>
  <!-- 縮寫 -->
  <div @click="clickfunc('hello')"></div>
  <!-- 使用事件冒泡模式綁定事件回調函數 -->
  <div on:touchstart.bubble="touchstartfunc"></div>
  <!-- 使用事件捕獲模式綁定事件回調函數 -->
  <div on:touchstart.capture="touchstartfunc"></div>
  <!-- on:{event}等價於on:{event}.bubble -->
  <div on:touchstart="touchstartfunc"></div>
  <!-- 綁定事件回調函數，但阻止事件向上傳遞 -->
  <div grab:touchstart.bubble="touchstartfunc"></div>
  <!-- 綁定事件回調函數，但阻止事件向下傳遞 -->
  <div grab:touchstart.capture="touchstartfunc"></div>
  <!-- grab:{event}等價於grab:{event}.bubble -->
  <div grab:touchstart="touchstartfunc"></div>
</div>
複製代碼

// xxx.js
export default {
  data: {
    text: '',
  },
  clickfunc: function(str, e) {
    console.log(e);
    this.text = str;
  },
  touchstartfunc: function(e) {
    console.log(e);
  }
}
複製代碼

4.2 數據綁定

數據綁定的形式分兩種：數據初始化，數據更新

hml 只支持數據層到視圖層的單向數據綁定。 視圖層想改變數據層，只能經過綁定事件的方式實現。

4.2.1 數據初始化

hml 中的數據都來自於對應 js 中的 data 對象，所以在初始化頁面時，在 data 對象中寫入數據，hml 中就能夠經過 {{}} 的形式綁定數據。

// xxx.js
export default {
  data: {
    text: 'HELLO WORLD'
  }
}
複製代碼

<!-- xxx.hml -->
<div>{{text}}</div>
複製代碼

4.2.2 數據更新

經過爲頁面元素綁定事件，能夠調用方法更新數據，從而觸發視圖更新數據

// xxx.js
export default {
  data: {
    text: 'HELLO WORLD'
  },
  changeText: function() {
    this.$set('text', '你好，世界');
  }
}
複製代碼

<!-- xxx.hml -->
<div @click='changeText'>{{text}}</div>
複製代碼

4.3 列表渲染

hml 中須要進行列表渲染的話只需在組件上添加 for 屬性並綁定須要渲染的數據，同時可自定義變量和索引的名稱：

// xxx.js
export default {
  data: {
    array: [
      {id: 1, name: '老周', age: 28}, 
      {id: 2, name: '老李', age: 29},
    ],
  },
  changeText: function(val, index) {
    if (val === "老李"){
      this.array.splice(index, 1, {id:2, name: '老王', age: 30});
    } else {
      this.array.splice(index, 1, {id:3, name: '老鄭', age: 31});
    }
  },
}
複製代碼

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

數組中的每一個元素必須存在 tid 指定的數據屬性，且必須具備惟一性。 針對數組內的數據修改，請使用 splice 方法生效數據綁定變動

4.4 條件渲染

hml 中實現條件渲染有兩種方式，分別是爲組件添加 if/elif/else 或 show 屬性，它們的區別在於 if/elif/else 屬性不符合條件判斷則不會在 vdom 中構建，而 show 屬性爲 false 時雖然不會渲染，可是會在 vdom 中構建，只是設置了 display 樣式爲 none。

所以出於性能因素考慮，顯示隱藏狀態須要頻繁切換推薦使用 show，顯示狀態改變次數較少則使用 if/elif/else。

// xxx.js
export default {
  data: {
    show: false,
    display: true,
    visible: false
  },
  toggle: function() {
    this.visible = !this.visible;
  }
}
複製代碼

<!-- xxx.hml -->
<div class="container">
  <text if="{{show}}"> 你好，世界 </text>
  <text elif="{{display}}"> hi </text>
  <text else> Hello World </text>
  
  <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
  <text show="{{visible}}" > Hello World! </text>
</div>
複製代碼

當使用 if/elif/else 寫法時，節點必須是兄弟節點，不然編譯沒法經過 禁止在同一個元素上同時設置 for 和 if 屬性

4.5 邏輯控制塊

hml 中提供了 控制塊，它不會被看成真實的節點編譯，可是隻支持 for 和 if 屬性。

4.6 自定義組件

HML 能夠經過 element 標籤引用模板文件，經過它能夠實現自定義組件。

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

<!-- index.hml -->
<element name='man' src='../../common/template.hml'></element>
<div>
  <man name="老朱" age="28"></man>
</div>
複製代碼

其中 element 標籤的 name 屬性則爲自定義組件的名稱，src 屬性爲自定義組件相對該文件的路徑，能夠爲自定義組件標籤添加屬性向其傳遞數據，自定義組件內也可以使用 $emit 方法向父組件傳遞參數。

5、JS語法

鴻蒙中的 js 文件支持 ES6 語法。

5.1 引用

鴻蒙中可使用 import 方法引入功能模塊或 js 代碼：

import router from '@system.router'
import utils from '../../common/utils.js'
複製代碼

5.2 獲取app對象

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

// app.js
export default {
  onCreate() {
    console.info('App onCreate');
  },
  onDestroy() {
    console.info('App onDestroy');
  },
  globalData: {
    appData: 'appData',
    appVersion: '2.0',
  },
  changeAppVer () {
    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;
  },
  pageMethod() {
    this.$app.$def.changeAppVer();
  }
}
複製代碼

5.3 頁面對象

屬性	類型	描述
data	Object/Function	頁面的數據模型
$refs	Object	持有註冊過 ref 屬性的 DOM 元素或子組件實例的對象
props	Array/Object	props 用於接收父組件傳遞過來的參數
computed	Object	計算屬性，用於在讀取或設置進行預先處理，計算屬性的結果會被緩存
private	Object	頁面的數據模型，private 下的數據屬性只能由當前頁面修改
public	Object	頁面的數據模型，public 下的數據屬性的行爲與 data 保持一致

5.4 方法

5.4.1 數據方法

屬性	類型	參數	描述
$set	Function	key: string, value: any	添加新的數據屬性或者修改已有數據屬性。用法：this.$set('key',value)。
$delete	Function	key: string	刪除數據屬性。用法：this.$delete('key')。

export default {
  data: {
    appInfo: {
      OS: 'HarmonyOS',
      Version: '2.0',
    },
  },
  changeAppInfo() {
    this.$set('appInfo.Version', '3.0');
    console.log(this.appInfo);
    this.$delete('appInfo');
    console.log(this.appInfo);
  }
}
複製代碼

5.4.2 事件方法

鴻蒙中可使用 $watch 方法觀察 data 中的屬性變化，若是屬性值改變，則會觸發綁定的事件。

export default { 
  props: ['title'],
  onInit() {
    this.$watch('title', 'onPropChange');
  },
  onPropChange(newV, oldV) {
    console.info('title屬性由'+ oldV +'變化爲' + newV);
  },
}
複製代碼

5.5 路由

{
  "pages": [
    "pages/index/index",
    "pages/detail/index"
  ]
}
複製代碼

鴻蒙 app 中頁面的路由信息保存在 src > main > config.json 文件中的 pages 內，引入 @system.router 後，調用其 push 方法傳入須要跳轉頁面的 uri，便可完成跳轉，也可以使用其 back 方法回到首頁。

import router from '@system.router';
export default {
  launch() {
    router.push ({
      uri: 'pages/detail/index',
    });
  },
  goBack() {
    router.back();
  }
}
複製代碼

6、CSS語法

CSS 是描述 HML 頁面結構的樣式語言，全部組件均存在系統默認樣式，也可在頁面 CSS 樣式文件中對組件、頁面自定義不一樣的樣式。

6.1 尺寸單位

鴻蒙中尺寸單位有兩種，px(邏輯像素) 以及百分比。

{
  "window": {
    "designWidth": 720,
    "autoDesignWidth": false
  }
}
複製代碼

邏輯像素的配置在 src > main > config.json 文件中的 window 內，designWidth 爲屏幕的邏輯寬度，默認爲720px，實際顯示時會將頁面佈局縮放至屏幕實際寬度，如100px在實際寬度爲1440物理像素的屏幕上，實際渲染爲200物理像素。

當 autoDesignWidth 設置爲 true 時，邏輯像素 px 將按照屏幕密度進行縮放，如 100px 在屏幕密度爲3的設備上，實際渲染爲300物理像素。

而百分比單位表示該組件佔父組件尺寸的百分比，如組件的 width 設置爲50%，表明其寬度爲父組件的50%。

6.2 樣式導入

CSS 樣式文件支持 @import 語句，導入 CSS 文件。

@import '../../common/style.css';
複製代碼

7、總結

使用鴻蒙的 JS SDK 開發 App，總體的項目結構、生命週期以及開發流程很像微信的小程序，而 hml 和 JS 的語法又很像 Vue，整個流程走下來，感受對 web 開發者而言仍是很友好的，相信有 Web 前端開發基礎的小夥伴們均可以快速的上手。

因爲篇幅有限，文中還有不少沒有提到的鴻蒙賦予開發者的硬件調用能力，但願鴻蒙能夠越作越好，讓愈來愈多的開發者和用戶加入到鴻蒙的大生態中來。

8、參考

• HarmonyOS Developer