【HarmonyOS】应用开发第五章-JS UI基础

第八章HarmonyOS分布式应用开发武汉大学计算机学院赵小刚HML语法CSS语法JS语法HML语法页面结构数据绑定事件绑定列表渲染条件渲染页面结构HML文件中采用类似html定义页面元素的方法定义APP页面组成，JSUI框架处理该代码时会生成页面的文档对象模型（Document

Object

Model，DOM）。通过DOM，JS能够动态处理HML文件中包含的内容，结构和样式。数据绑定可以在HML文件中需要进行数据后续设置和变更的地方进行数据绑定操作。<div>

<text>{{content[1]}}</text></div>这里text文本框的内容在HML文件中是没有设置的。其数据来自于JS文件。exportdefault{

data:{

content:['HelloWorld!','Welcometomyworld!']

}}事件绑定在移动应用中，页面元素经常要与用户交互，交互的主要方式是手指的触摸事件，对触摸事件的响应。事件通过'on'或者'@'绑定在组件上，当组件触发事件时会执行JS文件中对应的事件回调函数。<divclass="container"><textclass="title">{{count}}</text><divclass="box"><inputtype="button"class="btn"value="increase"onclick="increase"/><inputtype="button"class="btn"value="decrease"@click="decrease"/><inputtype="button"class="btn"value="double"@click="multiply(2)"/><inputtype="button"class="btn"value="square"@click="multiply(count)"/></div></div>列表渲染移动应用页面中经常需要对一类相同的元素进行显示，如联系人，图片库等，可以使用列表渲染方法。<divclass="array-container"><divfor="{{array}}"tid="id"onclick="changeText"><text>{{$idx}}.{{$}}</text></div><divfor="{{valueinarray}}"tid="id"onclick="changeText"><text>{{$idx}}.{{}}</text></div><divfor="{{(index,value)inarray}}"tid="id"onclick="changeText"><text>{{index}}.{{}}</text></div></div>条件渲染条件渲染分为2种：if/elif/else和show。这两种方式都可以控制组件的显示。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。<textif="{{showit}}">Hello-TV</text><textelif="{{display}}">Hello-Wearable</text><textelse>Hello-World</text>HML语法CSS语法JS语法CSS语法尺寸单位样式选择器伪类尺寸单位在页面元素的样式描述中，第一个需要定义的是组件的大小。因为JSUI支持一次开发，多端部署，其实就需要页面元素在不同的分辨率下都能够显示在恰当的位置。实现该过程只需要修改样式文件就可以了，对页面结构文件.hml和页面逻辑文件.js是不需要变更的。要实现该目标，必须了解样式文件中用到的组件尺寸单位与实际物理像素点大小之间的映射关系。在样式文件中用到的尺寸单位为逻辑像素px和百分比，其与物理像素和屏幕大小之间的关系为：逻辑像素px：默认屏幕具有的逻辑宽度为720px（手机屏幕），如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素百分比：.css文件中通常以%表示，表示该组件占父组件尺寸的百分比。样式选择器CSS选择器用于选择需要添加样式的元素，常见的五种选择器如下表选择器样例样例描述.class.container用于选择class="container"的组件。#id#titleId用于选择id="titleId"的组件。tagtext用于选择text组件。,.title,.content用于选择class="title"和class="content"的组件。.classtag.contenttext选择具有class="content"行为的所有text组件。样式选择器示例<divid="containerId"class="container"><textid="titleId"class="title">标题</text><divclass="content"><textid="contentId">内容</text></div></div>div{flex-direction:column;}.title{font-size:30px;}#contentId{font-size:20px;}.title,.content{margin:20px;}.containertext{color:#007dff;}选择器优先级当多条选择器声明匹配到同一元素时，各类选择器优先级由高到低顺序为：内联样式>id>class>tag。优先级高的选择器样式设置会覆盖优先级低的选择器样式，同级的选择器后面的样式会覆盖前面的样式。组件样式的生命除了用单独的.css文件外，也可以直接定义在.hml文件中<divclass="container"><textstyle="color:red">HelloWorld</text></div>CSS伪类CSS伪类是选择器中的关键字，用于指定要选择元素的特殊状态。名称支持组件描述:disabled支持disabled属性的组件表示disabled属性变为true时的元素。:focus支持focusable属性的组件表示获取focus时的元素。:active支持click事件的组件表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签。:checkedinput[type="checkbox"、type="radio"]、switch表示checked属性为true的元素。CSS伪类示例<divclass="container"><inputtype="button"class="button"value="Button"></input></div>.button:active{background-color:blue;}当按钮被点击时，背景颜色变为蓝色。HML语法CSS语法JS语法JS语法对象方法语法this关键字模块声明importrouterfrom'@system.router';代码引用importutilsfrom'../../common/utils.js';对象JS文件中除了自定义对象外，常用的系统对象包括应用对象，页面对象等。应用对象页面对象应用对象为$app，其属性包括$def，该属性为Object类型，可以使用this.$app.$def获取在app.js中暴露的对象。//app.jsexportdefault{globalData:{appData:'appData',appVersion:'2.0',},};//index.jsexportdefault{data:{appData:'localData',appVersion:'1.0',},onInit(){this.appData=this.$app.$def.globalData.appData;this.appVersion=this.$app.$def.globalData.appVersion;},页面对象对象类型描述dataObject/Function页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。$refsObject持有注册过ref属性的DOM元素或子组件实例的对象。privateObject页面的数据模型，private下的数据属性只能由当前页面修改。publicObject页面的数据模型，public下的数据属性的行为与data保持一致。propsArray/Objectprops用于组件之间的通信，props名称必须用小写。computedObject用于在读取或设置进行预先处理，计算属性的结果会被缓存。$refs&computed<divclass="container"><image-animatorclass="image-player"ref="animator"images="{{images}}"duration="1s"></image-animator></div>handleClick(){constanimator=this.$refs.animator;}computed:{message(){returnthis.time+''+this.objTitle;},notice:{get(){returnthis.time;},set(newValue){this.time=newValue;},},},onClick(){('getclickevent'+this.message);this.notice='Tomorrow';(this.time);},方法数据方法：set和delete方法参数描述$setkey:string,value:any添加新的数据属性或者修改已有数据属性。$deletekey:string删除数据属性。exportdefault{data:{keyMap:{OS:'HarmonyOS',Version:'2.0',},},getAppVersion(){this.$set('keyMap.Version','3.0');("keyMap.Version="+this.keyMap.Version);this.$delete('keyMap');("keyMap.Version="+this.keyMap);}}方法