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

頁面結(jié)構(gòu)

Image Show

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

{{content}} {{key1}} {{key2}} key1 {{key1}} {{flag1 && flag2}} {{flag1 || flag2}} {{!flag1}}

卡片hml文件中的變量需要在json文件的data字段下進行聲明：

{
  "data": {
    "content": "Hello World!",
    "key1": "Hello",
    "key2": "World",
    "flag1": true,
    "flag2": false
  }
}

說明

key值支持對象操作符和數(shù)組操作符，如{{key.value}}、{{key[0]}}。

支持字符串拼接、邏輯運算和三元表達式。

字符串拼接：

支持變量跟變量：{{key1}}{{key2}}等

支持常量跟變量： “my name is {{name}}， i am from
{{city}}.” “key1 {{key1}}”

邏輯運算：

與：{{flag1 && flag2}}（僅支持兩個boolean變量間的與邏輯運算）

或：{{flag1 || flag2}}
（僅支持兩個boolean變量間的或邏輯運算）

非：{{!flag1}} （僅支持boolean變量的非邏輯運算）

三元表達式

{{flag? key1:key2}}（flag為boolean變量，key1和key2可以是變量，也可以是常量）

注意事項

非boolean類型值進行bool運算默認為false

以上所有變量解析跟運算解析均不支持嵌套

事件綁定

卡片的事件需要在json文件的actions字段下進行聲明。卡片僅支持click通用事件，事件的定義只能是直接命令式，事件定義必須包含action字段，用以說明事件類型。卡片支持兩種事件類型：跳轉(zhuǎn)事件(router)和消息事件(message)。跳轉(zhuǎn)事件可以跳轉(zhuǎn)到卡片提供方的HarmonyOS應(yīng)用，消息事件可以將開發(fā)者自定義信息傳遞給卡片提供方。事件參數(shù)支持變量，變量以"{{}}"修飾。跳轉(zhuǎn)事件中若定義了params字段，則在被拉起應(yīng)用的onStart的intent中，可用"params"作為key將跳轉(zhuǎn)事件定義的params字段的值取到。

跳轉(zhuǎn)事件格式

通過定義ability名稱和攜帶的參數(shù)字段params直接跳轉(zhuǎn)，可用"params"作為key提取到跳轉(zhuǎn)事件定義的params字段值。

{
  "data": {
    "mainAbility": "xxx.xxx.xxx"
  },
  "actions": {
    "routerEvent": { 
      "action": "router",
      "abilityName": "{{mainAbility}}",
      "params":{}
    } 
  }
}

消息事件格式

{
  "actions": {
    "activeEvent": { 
      "action": "message",
      "params": {}           
    } 
  }
}

綁定路由事件和消息事件

列表渲染

{{$item.name}}

{{value.name}}

{{value.name}}

{
  "data": {
    "array": [
      {"id": 1, "name": "jack", "age": 18},
      {"id": 2, "name": "tony", "age": 18}
    ]
  }
}

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

for=“array”：其中array為數(shù)組對象，array的元素變量默認為$item。

for=“v in array”：其中v為自定義的元素變量，元素索引默認為$idx。

for=“(i, v) in array”：其中元素索引為i，元素變量為v，遍歷數(shù)組對象array。

說明

數(shù)組中的每個元素必須存在tid指定的數(shù)據(jù)屬性，否則運行時可能會導致異常。

數(shù)組中被tid指定的屬性要保證唯一性，如果不是則會造成性能損耗。比如，示例中只有id和name可以作為tid字段，因為它們屬于唯一字段。

tid不支持表達式。

不支持for嵌套使用。

for對應(yīng)的變量數(shù)組，當前要求數(shù)組中的object是相同類型，不支持多種object類型混合寫在一個數(shù)組中

條件渲染

條件渲染分為2種：if/elif/else和show。

當使用if/elif/else寫法時，節(jié)點必須是兄弟節(jié)點，否則編譯無法通過。實例如下：

Hello-TV Hello-Wearable Hello-World

{
  "data": {
    "show": false,
    "display": true
  }
}

當show為真時，節(jié)點正常渲染；當show為假時，節(jié)點不渲染，效果等同display樣式為none。

 Hello World 

{
  "data": {
    "visible": false
  }
}

邏輯控制塊

控制塊使得循環(huán)渲染和條件渲染變得更加靈活；block在構(gòu)建時不會被當作真實的節(jié)點編譯。block標簽只支持if屬性。

Hello World

{ 
  "data": { 
    "show": true
  } 
}

Markdown 3634 字數(shù) 238 行數(shù) 當前行 3, 當前列 0

HTML 3362 字數(shù) 179 段落

審核編輯 黃宇