【HarmonyOS】應(yīng)用開發(fā)第五章-JS UI基礎(chǔ)

第八章HarmonyOS分布式應(yīng)用開發(fā)武漢大學(xué)計算機(jī)學(xué)院趙小剛HML語法CSS語法JS語法HML語法頁面結(jié)構(gòu)數(shù)據(jù)綁定事件綁定列表渲染條件渲染頁面結(jié)構(gòu)HML文件中采用類似html定義頁面元素的方法定義APP頁面組成，JSUI框架處理該代碼時會生成頁面的文檔對象模型（Document

Object

Model，DOM）。通過DOM，JS能夠動態(tài)處理HML文件中包含的內(nèi)容，結(jié)構(gòu)和樣式。數(shù)據(jù)綁定可以在HML文件中需要進(jìn)行數(shù)據(jù)后續(xù)設(shè)置和變更的地方進(jìn)行數(shù)據(jù)綁定操作。<div>

<text>{{content[1]}}</text></div>這里text文本框的內(nèi)容在HML文件中是沒有設(shè)置的。其數(shù)據(jù)來自于JS文件。exportdefault{

data:{

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

}}事件綁定在移動應(yīng)用中，頁面元素經(jīng)常要與用戶交互，交互的主要方式是手指的觸摸事件，對觸摸事件的響應(yīng)。事件通過'on'或者'@'綁定在組件上，當(dāng)組件觸發(fā)事件時會執(zhí)行JS文件中對應(yīng)的事件回調(diào)函數(shù)。<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>列表渲染移動應(yīng)用頁面中經(jīng)常需要對一類相同的元素進(jìn)行顯示，如聯(lián)系人，圖片庫等，可以使用列表渲染方法。<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。這兩種方式都可以控制組件的顯示。兩種寫法的區(qū)別在于：第一種寫法里if為false時，組件不會在vdom中構(gòu)建，也不會渲染，而第二種寫法里show為false時雖然也不渲染，但會在vdom中構(gòu)建；另外，當(dāng)使用if/elif/else寫法時，節(jié)點必須是兄弟節(jié)點，否則編譯無法通過。<textif="{{showit}}">Hello-TV</text><textelif="{{display}}">Hello-Wearable</text><textelse>Hello-World</text>HML語法CSS語法JS語法CSS語法尺寸單位樣式選擇器偽類尺寸單位在頁面元素的樣式描述中，第一個需要定義的是組件的大小。因為JSUI支持一次開發(fā)，多端部署，其實就需要頁面元素在不同的分辨率下都能夠顯示在恰當(dāng)?shù)奈恢?。實現(xiàn)該過程只需要修改樣式文件就可以了，對頁面結(jié)構(gòu)文件.hml和頁面邏輯文件.js是不需要變更的。要實現(xiàn)該目標(biāo)，必須了解樣式文件中用到的組件尺寸單位與實際物理像素點大小之間的映射關(guān)系。在樣式文件中用到的尺寸單位為邏輯像素px和百分比，其與物理像素和屏幕大小之間的關(guān)系為：邏輯像素px：默認(rèn)屏幕具有的邏輯寬度為720px（手機(jī)屏幕），如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">標(biāo)題</text><divclass="content"><textid="contentId">內(nèi)容</text></div></div>div{flex-direction:column;}.title{font-size:30px;}#contentId{font-size:20px;}.title,.content{margin:20px;}.containertext{color:#007dff;}選擇器優(yōu)先級當(dāng)多條選擇器聲明匹配到同一元素時，各類選擇器優(yōu)先級由高到低順序為：內(nèi)聯(lián)樣式>id>class>tag。優(yōu)先級高的選擇器樣式設(shè)置會覆蓋優(yōu)先級低的選擇器樣式，同級的選擇器后面的樣式會覆蓋前面的樣式。組件樣式的生命除了用單獨的.css文件外，也可以直接定義在.hml文件中<divclass="container"><textstyle="color:red">HelloWorld</text></div>CSS偽類CSS偽類是選擇器中的關(guān)鍵字，用于指定要選擇元素的特殊狀態(tài)。名稱支持組件描述:disabled支持disabled屬性的組件表示disabled屬性變?yōu)閠rue時的元素。: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;}當(dāng)按鈕被點擊時，背景顏色變?yōu)樗{(lán)色。HML語法CSS語法JS語法JS語法對象方法語法this關(guān)鍵字模塊聲明importrouterfrom'@system.router';代碼引用importutilsfrom'../../common/utils.js';對象JS文件中除了自定義對象外，常用的系統(tǒng)對象包括應(yīng)用對象，頁面對象等。應(yīng)用對象頁面對象應(yīng)用對象為$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頁面的數(shù)據(jù)模型，類型是對象或者函數(shù)，如果類型是函數(shù)，返回值必須是對象。$refsObject持有注冊過ref屬性的DOM元素或子組件實例的對象。privateObject頁面的數(shù)據(jù)模型，private下的數(shù)據(jù)屬性只能由當(dāng)前頁面修改。publicObject頁面的數(shù)據(jù)模型，public下的數(shù)據(jù)屬性的行為與data保持一致。propsArray/Objectprops用于組件之間的通信，props名稱必須用小寫。computedObject用于在讀取或設(shè)置進(jìn)行預(yù)先處理，計算屬性的結(jié)果會被緩存。$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);},方法數(shù)據(jù)方法：set和delete方法參數(shù)描述$setkey:string,value:any添加新的數(shù)據(jù)屬性或者修改已有數(shù)據(jù)屬性。$deletekey:string刪除數(shù)據(jù)屬性。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);}}方法