HML(HarmonyOS Markup Language)是一套類HTML的標記語言,通過組件,事件構(gòu)建出頁面的內(nèi)容。頁面具備數(shù)據(jù)綁定、事件綁定、條件渲染和邏輯控制等高級能力。
頁面結(jié)構(gòu)
!-- xxx.hml --?>
Image Show/text?>
/image?>
數(shù)據(jù)綁定
!-- xxx.hml --?>
{{content}}/text?> !-- 輸出:Hello World!--?> {{key1}} {{key2}}/text?> !-- 輸出:Hello World--?> key1 {{key1}}/text?> !-- 輸出:key1 Hello--?> {{flag1 && flag2}}/text?> !-- 輸出:false--?> {{flag1 || flag2}}/text?> !-- 輸出:true--?> {{!flag1}}/text?> !-- 輸出:false--?>
卡片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字段值。
選擇器 | 樣例 | 默認值 | 樣例描述 |
---|---|---|---|
action | string | “router” | 事件類型。- “router”:用于應(yīng)用跳轉(zhuǎn)。- “message”:自定義點擊事件。 |
abilityName | string | - | 跳轉(zhuǎn)ability名。 |
params | Object | - | 跳轉(zhuǎn)應(yīng)用攜帶的額外參數(shù)。 |
{ "data": { "mainAbility": "xxx.xxx.xxx" }, "actions": { "routerEvent": { "action": "router", "abilityName": "{{mainAbility}}", "params":{} } } }
消息事件格式
選擇器 | 樣例 | 默認值 | 樣例描述 |
---|---|---|---|
action | string | message | 表示事件類型。 |
params | Object | - | 跳轉(zhuǎn)應(yīng)用攜帶的額外參數(shù)。 |
{ "actions": { "activeEvent": { "action": "message", "params": {} } } }
綁定路由事件和消息事件
!-- xxx.hml --?>
!-- 正常格式 --?>
!-- 縮寫 --?>
列表渲染
!-- xxx.hml --?>
!-- div列表渲染 --?> !-- 默認$item代表數(shù)組中的元素, $idx代表數(shù)組中的元素索引 --?>
{{$item.name}}/text?>
!-- 自定義元素變量名稱 --?>
{{value.name}}/text?>
!-- 自定義元素變量、索引名稱 --?>
{{value.name}}/text?>
{ "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ù)屬性,否則運行時可能會導(dǎo)致異常。
數(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é)點,否則編譯無法通過。實例如下:
!-- xxx.hml --?>
Hello-TV /text?> Hello-Wearable /text?> Hello-World /text?>
{ "data": { "show": false, "display": true } }
當show為真時,節(jié)點正常渲染;當show為假時,節(jié)點不渲染,效果等同display樣式為none。
!-- xxx.hml --?> Hello World /text?>
{ "data": { "visible": false } }
邏輯控制塊
控制塊使得循環(huán)渲染和條件渲染變得更加靈活;block在構(gòu)建時不會被當作真實的節(jié)點編譯。block標簽只支持if屬性。
!-- xxx.hml --?>
Hello/text?> World/text?> /block?>
{ "data": { "show": true } }
Markdown 3634 字數(shù) 238 行數(shù) 當前行 3, 當前列 0
HTML 3362 字數(shù) 179 段落
審核編輯 黃宇
-
語法
+關(guān)注
關(guān)注
0文章
44瀏覽量
10077 -
鴻蒙
+關(guān)注
關(guān)注
59文章
2497瀏覽量
43743 -
HarmonyOS
+關(guān)注
關(guān)注
79文章
2027瀏覽量
32079
發(fā)布評論請先 登錄
華為鴻蒙電腦正式發(fā)布
鴻蒙生態(tài)大勢已成,誠邁科技鴻蒙實驗室助力院校人才培養(yǎng)

鴻蒙電腦拿什么和Windows競爭
鴻蒙操作系統(tǒng)首登電腦端,華為開啟鴻蒙辦公新時代

harmony OS NEXT-雙向數(shù)據(jù)綁定MVVM以及$$語法糖介紹
深度融入“純血鴻蒙”|芯海科技旗下康柚OKOK首批入駐鴻蒙NEXT系統(tǒng)

AIGC入門及鴻蒙入門
鴻蒙Flutter實戰(zhàn):14-現(xiàn)有Flutter 項目支持鴻蒙 II
鴻蒙機器人與鴻蒙開發(fā)板聯(lián)動演示

鴻蒙Flutter實戰(zhàn):07混合開發(fā)
FPGA學習筆記---基本語法
esp32-s2-hml-devkit-1的智能面板demo如何放到esp-idf編譯?
云動鴻蒙計劃 軟通動力攜手華為云及伙伴共揚鴻蒙千帆

評論