华为鸿蒙应用程序开发13JavaScriptUI之HML，C

　　本章内容HML语法CSS语法JavaScript
　　HML、CSS、JavaScript在前面的章节中一直在用，现在就来专门介绍它们。一HML语法
　　HML（HarmonyOSMarkupLanguage）是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。
　　关于页面结构我们这里就不再介绍了，前面我们一直在用组件构建页面。数据绑定我们也在前面章节中用到了很多次，现在我们就来看看。
　　1数据绑定
　　通过在HML页面中用双大括号语法来声明数据，然后在JS文件中通过data对象进行赋值，下面是典型示例！xxx。hmltext｛｛content〔1〕｝｝textxxx。jsexportdefault｛data：｛content：〔HelloWorld！，Welcometomyworld！〕｝，changeText：function（）｛this。content。splice（1，1，this。content〔0〕）；｝｝
　　2事件
　　通过‘on或者‘’将事件绑定在组件上，当组件触发事件时会执行JS文件中对应的事件处理函数。事件绑定的典型示例：！xxx。hmltextclasstitle｛｛count｝｝text！没有参数的事件处理函数inputtypebuttonclassbtnvalueincreaseonclickincrease！传递参数inputtypebuttonclassbtnvaluedoubleclickmultiply（2）inputtypebuttonclassbtnvaluesquareclickmultiply（count）xxx。jsexportdefault｛data：｛count：0｝，increase（）｛this。count；｝，multiply（multiplier）｛this。countmultiplierthis。count；｝｝；
　　HML组件还支持冒泡事件绑定。冒泡事件绑定包括：绑定冒泡事件：on：｛event｝。bubble。on：｛event｝等价于on：｛event｝。bubble。绑定并阻止冒泡事件向上冒泡：grab：｛event｝。bubble。grab：｛event｝等价于grab：｛event｝。bubble。
　　典型示例如下：！xxx。hml！使用事件冒泡模式绑定事件回调函数。5！绑定事件回调函数，但阻止事件向上传递。5！使用事件冒泡模式绑定事件回调函数。6！绑定事件回调函数，但阻止事件向上传递。6xxx。jsexportdefault｛clickfunc：function（e）｛console。log（e）；｝，touchstartfuc：function（e）｛console。log（e）；｝，｝
　　Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获事件先到达父组件然后达到子组件。
　　捕获事件绑定包括：绑定捕获事件：on：｛event｝。capture。绑定并阻止事件向下传递：grab：｛event｝。capture。
　　示例如下：！xxx。hml！使用事件捕获模式绑定事件回调函数。5！绑定事件回调函数，但阻止事件向下传递。5xxx。jsexportdefault｛touchstartfuc：function（e）｛console。log（e）；｝，｝
　　3列表渲染
　　在华为鸿蒙应用程序开发12JavaScriptUI常用基础组件Image这个章节中，我们显示多张图片时有用到列表渲染。列表渲染就是通过组件的for属性，循环构建组件，示例如下：！xxx。hml！p列表渲染！默认item代表数组中的元素，idx代表数组中的元素索引text｛｛idx｝｝。｛｛item。name｝｝text！自定义元素变量名称text｛｛idx｝｝。｛｛value。name｝｝text！自定义元素变量、索引名称text｛｛index｝｝。｛｛value。name｝｝textxxx。jsexportdefault｛data：｛array：〔｛id：1，name：jack，age：18｝，｛id：2，name：tony，age：18｝，〕，｝，changeText：function（）｛if（this。array〔1〕。nametony）｛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循环的重渲染，旨在列表中的数据有变更时，提高重新渲染的效率。tid属性是用来指定数组中每个元素的唯一标识，如果未指定，数组中每个元素的索引为该元素的唯一id。例如上述tidid表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下：forarray：其中array为数组对象，array的元素变量默认为item。forvinarray：其中v为自定义的元素变量，元素索引默认为idx。for（i，v）inarray：其中元素索引为i，元素变量为v，遍历数组对象array。
　　说明数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。tid不支持表达式。
　　HML中的条件渲染分为2种：ifelifelse和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用ifelifelse写法时，节点必须是兄弟节点，否则编译无法通过。实例如下：！xxx。hmlbuttonclassbtntypecapsulevaluetoggleShowonclicktoggleShowbuttonbuttonclassbtntypecapsulevaluetoggleDisplayonclicktoggleDisplaybuttontextif｛｛visible｝｝HelloTVtexttextelif｛｛display｝｝HelloWearabletexttextelseHelloWorldtextxxx。css。container｛flexdirection：column；alignitems：center；｝。btn｛width：280px；fontsize：26px；margin：10px0；｝xxx。jsexportdefault｛data：｛visible：false，display：true，｝，toggleShow：function（）｛this。visible！this。visible；｝，toggleDisplay：function（）｛this。display！this。display；｝｝
　　渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。示例如下：！xxx。hmlbuttonclassbtntypecapsulevaluetoggleonclicktogglebuttontextshow｛｛visible｝｝HelloWorldtextxxx。css。container｛flexdirection：column；alignitems：center；｝。btn｛width：280px；fontsize：26px；margin：10px0；｝xxx。jsexportdefault｛data：｛visible：false，｝，toggle：function（）｛this。visible！this。visible；｝，｝
　　说明
　　禁止在同一个元素上同时设置for和if属性
　　4逻辑控制块
　　它使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。示例：！xxx。hmllistblockforlistitemtypestudentstext｛｛item。name｝｝textlistitemblockforitem。kindslistitemtypekindtext｛｛item。age｝｝textlistitemblockblocklistxxx。jsexportdefault｛data：｛glasses：〔｛name：sunglasses，kinds：〔｛name：XXX，color：XXX｝，｛name：XXX，color：XXX｝〕｝，｛name：nearsightednessmirror，kinds：〔｛name：XXX，color：XXX｝〕｝，〕，｝，｝
　　5模板引用
　　HML可以通过element引用模板文件，在自定义组件时会很有用。示例：！template。hmltextName：｛｛name｝｝texttextAge：｛｛age｝｝text！index。hmlelementnamecompsrca2020imgdataimg。jpgdatasrc。。。。commontemplate。hmlelementcompnameTonyage18comp二CSS语法
　　CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。
　　1尺寸单位逻辑像素px（文档中以表示）：默认屏幕具有的逻辑宽度为720px（配置见配置文件中的window小节），实际显示时会将页面布局缩放至屏幕实际宽度，如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素（从720px向1440物理像素，所有尺寸放大2倍）。额外配置autoDesignWidth为true时（配置见配置文件中的window小节），逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。百分比（文档中以表示）：表示该组件占父组件尺寸的百分比，如组件的width设置为50，代表其宽度为父组件的50。
　　2样式导入
　　为了模块化管理和代码复用，CSS样式文件支持import语句，导入css文件。
　　3声明样式
　　每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。
　　（1）内部样式，支持使用style、class属性来控制组件的样式。例如：！index。hmltextstylecolor：redHelloWorldtextindex。css。container｛justifycontent：center；｝
　　（2）文件导入，合并外部样式文件。例如，在common目录中定义样式文件style。css，并在index。css文件首行中进行导入：style。css。title｛fontsize：50px；｝index。cssimport。。。。commonstyle。css；。container｛justifycontent：center；｝
　　4选择器
　　css选择器用于选择需要添加样式的元素，支持的选择器如下表所示：
　　选择器
　　样例
　　样例描述
　　。class
　　。container
　　用于选择classcontainer的组件。
　　id
　　titleId
　　用于选择idtitleId的组件。
　　tag
　　text
　　用于选择text组件。
　　，
　　。title，。content
　　用于选择classtitle和classcontent的组件。
　　id。classtag
　　containerId。contenttext
　　非严格父子关系的后代选择器，选择具有idcontainerId作为祖先元素，classcontent作为次级祖先元素的所有text组件。如需使用严格的父子关系，可以使用代替空格，如：containerId。content。
　　示例：！页面布局xxx。hmltextidtitleIdclasstitle标题texttextidcontentId内容text页面样式xxx。css对所有p组件设置样式p｛flexdirection：column；｝对classtitle的组件设置样式。title｛fontsize：30px；｝对idcontentId的组件设置样式contentId｛fontsize：20px；｝对所有classtitle以及classcontent的组件都设置padding为5px。title，。content｛padding：5px；｝对classcontainer的组件下的所有text设置样式。containertext｛color：007dff；｝对classcontainer的组件下的直接后代text设置样式。containertext｛color：fa2a2d；｝
　　5选择器优先级
　　选择器的优先级计算规则与w3c规则保持一致（只支持：内联样式，id，class，tag，后代和直接后代），其中内联样式为在元素style属性中声明的样式。
　　当多条选择器声明匹配到同一元素时，各类选择器优先级由高到低顺序为：内联样式idclasstag。
　　6伪类
　　css伪类是选择器中的关键字，用于指定要选择元素的特殊状态。例如，：disabled状态可以用来设置元素的disabled属性变为true时的样式。
　　除了单个伪类之外，还支持伪类的组合，例如，：focus：checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列：
　　名称
　　支持组件
　　描述
　　：disabled
　　支持disabled属性的组件
　　表示disabled属性变为true时的元素（不支持动画样式的设置）。
　　：focus
　　支持focusable属性的组件
　　表示获取focus时的元素（不支持动画样式的设置）。
　　：active
　　支持click事件的组件
　　表示被用户激活的元素，如：被用户按下的按钮、被激活的tabbar页签（不支持动画样式的设置）。
　　：waiting
　　button
　　表示waiting属性为true的元素（不支持动画样式的设置）。
　　：checked
　　input〔typecheckbox、typeradio〕、switch
　　表示checked属性为true的元素（不支持动画样式的设置）。
　　：hover6
　　支持mouseover事件的组件
　　表示鼠标悬浮时的元素。
　　伪类示例如下，设置按钮的：active伪类可以控制被用户按下时的样式：！index。hmlinputtypebuttonclassbuttonvalueButtoninputindex。css。button：active｛backgroundcolor：888888；按钮被激活时，背景颜色变为888888｝说明
　　针对弹窗类组件及其子元素不支持伪类效果，包括popup、dialog、menu、option、picker
　　7样式预编译
　　预编译提供了利用特有语法生成css的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持less、sass和scss的预编译。使用样式预编译时，需要将原css文件后缀改为less、sass或scss，如index。css改为index。less、index。sass或index。scss。
　　（1）当前文件使用样式预编译，例如将原index。css改为index。less：index。less定义变量colorBackground：000000；。container｛backgroundcolor：colorBackground；使用当前less文件中定义的变量｝
　　（2）引用预编译文件，例如common中存在style。scss文件，将原index。css改为index。scss，并引入style。scss：style。scss定义变量colorBackground：000000；
　　在index。scss中引用：index。scss引入外部scss文件import。。。。commonstyle。scss；。container｛backgroundcolor：colorBackground；使用style。scss中定义的变量｝说明
　　引用的预编译文件建议放在common目录进行管理。
　　8CSS样式继承
　　css样式继承提供了子节点继承父节点样式的能力，继承下来的样式在多选择器样式匹配的场景下，优先级排最低，当前支持以下样式的继承：fontfamilyfontweightfontsizefontstyletextalignlineheightletterspacingcolorvisibility三JavaScript语法
　　JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。
　　1语法
　　支持ES6（EMACScript6）语法。模块声明
　　使用import方法引入功能模块：importrouterfromsystem。router；代码引用
　　使用import方法导入js代码：importutilsfrom。。。。commonutils。js；
　　2对象
　　（1）应用对象def
　　使用this。app。def获取在app。js中暴露的对象。说明
　　应用对象不支持数据绑定，需主动触发UI更新。
　　示例代码app。jsexportdefault｛onCreate（）｛console。info（AceApplicationonCreate）；｝，onDestroy（）｛console。info（AceApplicationonDestroy）；｝，globalData：｛appData：appData，appVersion：2。0，｝，globalMethod（）｛console。info（Thisisaglobalmethod！）；this。globalData。appVersion3。0；｝｝；index。js页面逻辑代码exportdefault｛data：｛appData：localData，appVersion：1。0，｝，onInit（）｛this。appDatathis。app。def。globalData。appData；this。appVersionthis。app。def。globalData。appVersion；｝，invokeGlobalMethod（）｛this。app。def。globalMethod（）；｝，getAppVersion（）｛this。appVersionthis。app。def。globalData。appVersion；｝｝
　　（2）页面对象
　　属性
　　类型
　　描述
　　data
　　ObjectFunction页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以或开头，不要使用保留字for，if，show，tid。
　　data与private和public不能重合使用。
　　refs
　　Object
　　持有注册过ref属性的DOM元素或子组件实例的对象。示例见获取DOM元素。
　　private
　　Object
　　页面的数据模型，private下的数据属性只能由当前页面修改。
　　public
　　Object
　　页面的数据模型，public下的数据属性的行为与data保持一致。
　　props
　　ArrayObject
　　props用于组件之间的通信，可以通过方式传递给组件；props名称必须用小写，不能以或开头，不要使用保留字for，if，show，tid。目前props的数据类型不支持Function。示例见自定义组件。
　　computed
　　Object
　　用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以或开头，不要使用保留字。示例见自定义组件。
　　其中data对象我们在前面章节的例子中用到过很多次。
　　3方法
　　（1）数据方法
　　方法
　　参数
　　描述
　　set
　　key：string，value：any添加新的数据属性或者修改已有数据属性。
　　用法：
　　this。set（key，value）：添加数据属性。
　　delete
　　key：string删除数据属性。
　　用法：
　　this。delete（key）：删除数据属性。
　　示例代码：index。jsexportdefault｛data：｛keyMap：｛OS：HarmonyOS，Version：2。0，｝，｝，getAppVersion（）｛this。set（keyMap。Version，3。0）；console。info（keyMap。Versionthis。keyMap。Version）；keyMap。Version3。0this。delete（keyMap）；console。info（keyMap。Versionthis。keyMap）；logprint：keyMap。Versionundefined｝｝
　　（2）公共方法
　　方法
　　参数
　　描述
　　element
　　id：string获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见获取DOM元素。
　　用法：
　　this。element（xxx）：获得id为xxx的组件对象。this。element（）：获得根组件对象。
　　rootElement
　　无获取根组件对象。
　　用法：this。rootElement（）。scrollTo（｛duration：500，position：300｝），页面在500ms内滚动300px。
　　root
　　无
　　获得顶级ViewModel实例。获取ViewModel示例。
　　parent
　　无
　　获得父级ViewModel实例。获取ViewModel示例。
　　child
　　id：string获得指定id的子级自定义组件的ViewModel实例。获取ViewModel示例。
　　用法：
　　this。child（xxx）：获取id为xxx的子级自定义组件的ViewModel实例。
　　（3）事件方法
　　方法
　　参数
　　描述
　　watch
　　data：string，callback：stringFunction观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见自定义组件。
　　用法：
　　this。watch（key，callback）
　　（4）页面方法
　　方法
　　参数
　　描述
　　scrollTo
　　scrollPageParam：ScrollPageParam
　　将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。
　　scrollPageParam有如下取值
　　名称
　　类型
　　默认值
　　描述
　　position
　　number
　　指定滚动位置。
　　id
　　string
　　指定需要滚动到的元素id。
　　duration
　　number
　　300hr指定滚动时长，单位为毫秒。
　　timingFunction
　　string
　　ease指定滚动动画曲线，可选值参考
　　animationtimingfunction。
　　complete
　　（）void
　　指定滚动完成后需要执行的回调函数。
　　示例：this。rootElement。scrollTo（｛position：0｝）；this。rootElement。scrollTo（｛id：id，duration：200，timingFunction：easein，complete：（）void｝）；
　　（5）获取DOM元素通过refs获取DOM元素！index。hmlimageanimatorrefanimatorimages｛｛images｝｝duration1sonclickhandleClickimageanimatorindex。jsexportdefault｛data：｛images：〔｛src：commonframe1。png｝，｛src：commonframe2。png｝，｛src：commonframe3。png｝，〕，｝，handleClick（）｛constanimatorthis。refs。animator；获取ref属性为animator的DOM元素conststateanimator。getState（）；if（statepaused）｛animator。resume（）；｝elseif（statestopped）｛animator。start（）；｝else｛animator。pause（）；｝｝，｝；通过element获取DOM元素，这在前面的章节已经用到过。示例：！index。hmlimageanimatorclassimageplayeridanimatorimages｛｛images｝｝duration1sonclickhandleClickimageanimatorindex。jsexportdefault｛data：｛images：〔｛src：commonframe1。png｝，｛src：commonframe2。png｝，｛src：commonframe3。png｝，〕，｝，handleClick（）｛constanimatorthis。element（animator）；获取id属性为animator的DOM元素conststateanimator。getState（）；if（statepaused）｛animator。resume（）；｝elseif（statestopped）｛animator。start（）；｝else｛animator。pause（）；｝｝，｝；
　　（6）获取ViewMode
　　根节点所在页面：！root。hmlelementnameparentCompsrca2020imgdataimg。jpgdatasrc。。。。commoncomponentparentparent。hmlelementtext｛｛text｝｝textparentCompparentComproot。jsexportdefault｛data：｛text：Iamroot！，｝，
　　自定义parent组件：！parent。hmlelementnamechildCompsrca2020imgdataimg。jpgdatasrc。。childchild。hmlelementtextclasstextstyleonclickparentClickedparentcomponentclicktexttextclasstextstyleif｛｛show｝｝helloparentcomponent！textchildCompidselfDefineChildchildCompparent。jsexportdefault｛data：｛show：false，text：Iamparentcomponent！，｝，parentClicked（）｛this。show！this。show；console。info（parentcomponentgetparenttext）；console。info（｛this。parent（）。text｝）；console。info（parentcomponentgetchildfunction）；console。info（｛this。child（selfDefineChild）。childClicked（）｝）；｝，｝
　　自定义child组件：！child。hmltextclasstextstyleonclickchildClickedchildcomponentclickedtexttextclasstextstyleif｛｛show｝｝hellochildcomponenttextchild。jsexportdefault｛data：｛show：false，text：Iamchildcomponent！，｝，childClicked（）｛this。show！this。show；console。info（childcomponentgetparenttext）；console。info（｛this。parent（）。text｝）；console。info（childcomponentgetroottext）；console。info（｛this。root（）。text｝）；｝，｝
　　至此，关于华为鸿蒙应用开发中HML、CSS、JavaScript语法部分的介绍就讲完了，本章尽量用实例对每个知识点进行了直观地呈现，大家可以先都熟悉下，然后在以后的开发中不记得的可以回过头查看。
　　最后，老规矩，敲黑板：多动手，多思考！代码一定要亲自动手敲出来！〔呲牙〕〔比心〕