电子说
HML(HarmonyOS Markup Language)是一套类HTML的标记语言,通过组件,事件构建出页面的内容。页面具备数据绑定、事件绑定、条件渲染和逻辑控制等高级能力。
页面结构
< !-- xxx.hml -- >
< text class="item-title" >Image Show< /text >
< image src="/common/xxx.png" class="image" >< /image >
数据绑定
< !-- xxx.hml -- >
< text >{{content}}< /text > < !-- 输出:Hello World!-- > < text >{{key1}} {{key2}}< /text > < !-- 输出:Hello World-- > < text >key1 {{key1}}< /text > < !-- 输出:key1 Hello-- > < text >{{flag1 && flag2}}< /text > < !-- 输出:false-- > < text >{{flag1 || flag2}}< /text > < !-- 输出:true-- > < text >{{!flag1}}< /text > < !-- 输出:false-- >
卡片hml文件中的变量需要在json文件的data字段下进行声明:
{ "data": { "content": "Hello World!", "key1": "Hello", "key2": "World", "flag1": true, "flag2": false } }
说明
key值支持对象操作符和数组操作符,如{{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字段,用以说明事件类型。卡片支持两种事件类型:跳转事件(router)和消息事件(message)。跳转事件可以跳转到卡片提供方的HarmonyOS应用,消息事件可以将开发者自定义信息传递给卡片提供方。事件参数支持变量,变量以"{{}}"修饰。跳转事件中若定义了params字段,则在被拉起应用的onStart的intent中,可用"params"作为key将跳转事件定义的params字段的值取到。
跳转事件格式
通过定义ability名称和携带的参数字段params直接跳转,可用"params"作为key提取到跳转事件定义的params字段值。
选择器 | 样例 | 默认值 | 样例描述 |
---|---|---|---|
action | string | “router” | 事件类型。- “router”:用于应用跳转。- “message”:自定义点击事件。 |
abilityName | string | - | 跳转ability名。 |
params | Object | - | 跳转应用携带的额外参数。 |
{ "data": { "mainAbility": "xxx.xxx.xxx" }, "actions": { "routerEvent": { "action": "router", "abilityName": "{{mainAbility}}", "params":{} } } }
消息事件格式
选择器 | 样例 | 默认值 | 样例描述 |
---|---|---|---|
action | string | message | 表示事件类型。 |
params | Object | - | 跳转应用携带的额外参数。 |
{ "actions": { "activeEvent": { "action": "message", "params": {} } } }
绑定路由事件和消息事件
< !-- xxx.hml -- >
< !-- 正常格式 -- >
< !-- 缩写 -- >
列表渲染
< !-- xxx.hml -- >
< !-- div列表渲染 -- > < !-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 -- >
< text >{{$item.name}}< /text >
< !-- 自定义元素变量名称 -- >
< text >{{value.name}}< /text >
< !-- 自定义元素变量、索引名称 -- >
< text >{{value.name}}< /text >
{ "data": { "array": [ {"id": 1, "name": "jack", "age": 18}, {"id": 2, "name": "tony", "age": 18} ] } }
tid属性主要用来加速for循环的重渲染,旨在列表中的数据有变更时,提高重新渲染的效率。tid属性是用来指定数组中每个元素的唯一标识,如果未指定,数组中每个元素的索引为该元素的唯一id。例如上述tid="id"表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下:
for=“array”:其中array为数组对象,array的元素变量默认为$item。
for=“v in array”:其中v为自定义的元素变量,元素索引默认为$idx。
for=“(i, v) in array”:其中元素索引为i,元素变量为v,遍历数组对象array。
说明
数组中的每个元素必须存在tid指定的数据属性,否则运行时可能会导致异常。
数组中被tid指定的属性要保证唯一性,如果不是则会造成性能损耗。比如,示例中只有id和name可以作为tid字段,因为它们属于唯一字段。
tid不支持表达式。
不支持for嵌套使用。
for对应的变量数组,当前要求数组中的object是相同类型,不支持多种object类型混合写在一个数组中
条件渲染
条件渲染分为2种:if/elif/else和show。
当使用if/elif/else写法时,节点必须是兄弟节点,否则编译无法通过。实例如下:
< !-- xxx.hml -- >
< text if="{{show}}" > Hello-TV < /text > < text elif="{{display}}" > Hello-Wearable < /text > < text else > Hello-World < /text >
{ "data": { "show": false, "display": true } }
当show为真时,节点正常渲染;当show为假时,节点不渲染,效果等同display样式为none。
< !-- xxx.hml -- > < text show="{{visible}}" > Hello World < /text >
{ "data": { "visible": false } }
逻辑控制块
控制块使得循环渲染和条件渲染变得更加灵活;block在构建时不会被当作真实的节点编译。block标签只支持if属性。
< !-- xxx.hml -- >
< text >Hello< /text > < text >World< /text > < /block >
{ "data": { "show": true } }
Markdown 3634 字数 238 行数 当前行 3, 当前列 0
HTML 3362 字数 179 段落
审核编辑 黄宇
全部0条评论
快来发表一下你的评论吧 !