分享HarmonyOS數(shù)據(jù)綁定使用技巧

/* index.js */import device from '@system.device';export default { data: { title : 'world', width: 0, height: 0, },onInit(){ // 根據(jù)設(shè)備設(shè)置窗口的寬高 device.getInfo({ success: (data)=> { this.width =data.windowWidth; this.height =data.windowHeight; } }); }}/* index.css */.container { flex-direction:column; justify-content:flex-start; align-items:flex-start;}

本文的代碼例子都會(huì)包含三個(gè)文件——元素構(gòu)建.hml、交互設(shè)計(jì).js以及布局定義.css，只有.hml中可以寫數(shù)據(jù)綁定語(yǔ)法，請(qǐng)各位在閱讀時(shí)注意區(qū)分。下面來(lái)介紹HarmonyOS簡(jiǎn)單數(shù)據(jù)綁定和復(fù)雜數(shù)據(jù)綁定。

02

HarmonyOS簡(jiǎn)單數(shù)據(jù)綁定

HarmonyOS的簡(jiǎn)單數(shù)據(jù)綁定支持“屬性綁定”、“樣式綁定”、“動(dòng)畫綁定”和“內(nèi)容綁定”。樣式綁定和動(dòng)畫綁定實(shí)際上是通過屬性標(biāo)簽發(fā)揮作用的，下面我們?cè)敿?xì)看一下具體使用過程。

1）屬性綁定

屬性可分為“通用屬性”和“特有屬性”，其中通用屬性包括id、style、for、if、show和class，特有屬性為各組件獨(dú)有的屬性如switch的checked。下面我們先看通用屬性show綁定switch顯示數(shù)據(jù)的代碼：

點(diǎn)擊藍(lán)色按鈕，代表觸發(fā)改變switch 中show屬性的“事件”，show屬性的值從“false”改變?yōu)椤皌rue”，switch組件（白色開關(guān)按鈕）會(huì)在界面上顯示出來(lái)。如圖1所示：

圖1 通用屬性show改變導(dǎo)致switch顯示改變

/*index.js*/import device from '@system.device';export default{ data:{ showValue:false, width:0, height:0,}, // showChange觸發(fā)會(huì)使showValue值改變 showChange(){ this.showValue =true; }, onInit(){ device.getInfo({ success:(data)=>{ this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width:40px; height:40px;}.switch{ width:90px; height:90px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

特有屬性是各個(gè)組件獨(dú)有的屬性，如switch中的checked。下面是switch中checked屬性數(shù)據(jù)綁定的用法：

點(diǎn)擊藍(lán)色按鈕，代表觸發(fā)改變switch 中checked屬性的“事件”，checked屬性的值從“false”改變?yōu)椤皌rue”，switch組件（白色開關(guān)按鈕）的狀態(tài)從“關(guān)”變成“開”。如圖2所示：

圖2 特有屬性checked改變導(dǎo)致switch狀態(tài)改變

/* index.js */importdevicefrom'@system.device';export default { data: { checkedValue: false, width: 0, height: 0, },//checkedChange觸發(fā)會(huì)使checkedValue值改變 checkedChange() { this.checkedValue = true; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.switch { width: 40px; height: 40px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

2）樣式綁定

樣式有靜態(tài)和動(dòng)態(tài)之分，靜態(tài)樣式直接寫在元素標(biāo)簽的關(guān)鍵字style中；動(dòng)態(tài)樣式寫在.css文件中，通過關(guān)鍵字class引入。當(dāng)前動(dòng)態(tài)樣式不支持?jǐn)?shù)據(jù)綁定，數(shù)據(jù)綁定只能用在靜態(tài)樣式中，下面是switch靜態(tài)樣式寬高的數(shù)據(jù)綁定用法：

點(diǎn)擊藍(lán)色按鈕，代表觸發(fā)改變switch 中靜態(tài)樣式寬高改變的“事件”，靜態(tài)樣式寬高的值從“40px”改變?yōu)椤?0px”，switch組件（白色開關(guān)按鈕）的寬高變大。如圖3所示：

圖3 通用樣式寬高改變導(dǎo)致switch組件大小改變

/* index.js */importdevicefrom'@system.device';export default { data: { rectValue: '40px', width: 0, height: 0, },//rectChange觸發(fā)會(huì)使rectValue值改變 rectChange() { this.rectValue = '90px'; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.switch { width: 40px; height: 40px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

3）動(dòng)畫綁定

動(dòng)畫效果可以通過靜態(tài)樣式中的關(guān)鍵字animation-name改變。我們可以在.css文件中創(chuàng)建多種keyframes的動(dòng)畫效果，通過animation-name改變keyframes，以實(shí)現(xiàn)動(dòng)畫效果的切換，下面是一個(gè)例子：

點(diǎn)擊藍(lán)色按鈕，這是代表觸發(fā)改變div 中動(dòng)畫效果的"事件"，animation-name的值從“animationChange1”改變?yōu)椤癮nimationChange2”，div組件動(dòng)效從顏色變化動(dòng)效變成寬度變化動(dòng)效。如圖4所示：

圖4 animation-name改變導(dǎo)致動(dòng)畫樣式改變

/*index.js*/import device from '@system.device';export default { data: { animationName: 'animationChange1', width: 0, height: 0, }, //animationChange觸發(fā)會(huì)使animationName值改變 animationChange() { this.animationName ="animationChange2"; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.div-block { width: 200px; height: 80px; background-color: #ff0000;}.div-animation-style{ animation-duration: 3000ms; animation-timing-function: linear; animation-fill-mode: none; animation-iteration-count: 1;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}/* 初始動(dòng)畫效果改變背景顏色 */@keyframes animationChange1 { from { background-color: #ff0000; } to { background-color: #0000ff; }}/* 切換后動(dòng)畫效果改變?yōu)榉綁K寬度變化 */@keyframes animationChange2 { from { width: 200px; } to { width: 250px; }}

4）內(nèi)容綁定

除了屬性、樣式和動(dòng)畫綁定，HarmonyOS一些特殊組件如text，其標(biāo)簽內(nèi)容中可以添加數(shù)據(jù)綁定，具體使用方法如下：

點(diǎn)擊藍(lán)色按鈕，代表觸發(fā)改變text 中文字內(nèi)容的“事件”，text組件中文字內(nèi)容從“Hello World”改變?yōu)椤癏ello Bob”，界面顯示的文字相應(yīng)改變。如圖5所示：

圖5 文字?jǐn)?shù)據(jù)改變導(dǎo)致text中的文字內(nèi)容改變

/*index.js*/import device from '@system.device';export default { data: { title: 'World', width: 0, height: 0, },//titleChange觸發(fā)會(huì)使text中的title值改變 titleChange() { this.title = 'Bob'; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.title { width: 100px; height: 100px; font-size: 20px; text-align: center;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

簡(jiǎn)單數(shù)據(jù)綁定中，通用屬性基本都支持?jǐn)?shù)據(jù)綁定，如style、if和show中綁定的對(duì)象數(shù)據(jù)改變都會(huì)使相應(yīng)的View改變并刷新，只有class不支持?jǐn)?shù)據(jù)綁定。同時(shí)，id雖然支持?jǐn)?shù)據(jù)綁定，但其綁定的對(duì)象數(shù)據(jù)改變實(shí)際上只修改了DOM，不會(huì)對(duì)View有影響。

03

HarmonyOS復(fù)雜數(shù)據(jù)綁定

當(dāng)數(shù)據(jù)綁定的對(duì)象為列表（數(shù)組）時(shí)，與for搭配使用，可以實(shí)現(xiàn)通過for展開多個(gè)組件（即列表渲染），減少.hml重復(fù)寫組件。復(fù)雜數(shù)據(jù)綁定和列表渲染是強(qiáng)相關(guān)的，我們可以先了解一下HarmonyOS應(yīng)用開發(fā)中如何用for屬性做列表渲染。

1）列表渲染

參考HarmonyOS官網(wǎng)的開發(fā)文檔：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/lite-wearable-syntax-hml-0000001078368468

我們可以看到列表渲染主要有三種方式：

for="array"：其中array為數(shù)組對(duì)象，array的元素變量默認(rèn)為$item。

for="v in array"：其中v為自定義的元素變量，元素索引默認(rèn)為$idx。

for="(i, v) in array"：其中元素索引為i，元素變量為v，遍歷數(shù)組對(duì)象array。

這三種方式的實(shí)現(xiàn)代碼為：

//index.jsexport default { data: { array: { {id: 1, name: 'jack', age: 18}, {id: 2, name: 'tony', age: 18} } }}

2）通用屬性的復(fù)雜數(shù)據(jù)綁定

下面以靜態(tài)style屬性為例，將style和數(shù)組進(jìn)行數(shù)據(jù)綁定，可以通過改變數(shù)組的數(shù)據(jù)讓組件樣式改變，具體使用方法如下：

點(diǎn)擊藍(lán)色按鈕，代表觸發(fā)改變與數(shù)組綁定的某switch組件寬高的“事件”，第二個(gè)switch靜態(tài)樣式寬高的值從“40px”改變?yōu)椤?0px”，switch組件（白色開關(guān)按鈕）的寬高變大。如圖6所示：

圖6 綁定靜態(tài)樣式的數(shù)組改變導(dǎo)致switch寬高改變

/*index.js*/import device from '@system.device';export default { data: {//定義兩個(gè)寬高相等的switch rectArr: [ {"width": "40px","height": "40px"}, {"width": "40px","height": "40px"} ], width: 0, height: 0, },//改變第二個(gè)switch大小 switchChange() { this.rectArr[1].width = "90px"; this.rectArr[1].height = "90px"; }, // 推薦使用splice方法改變switch大小 // switchChange() { // this.rectArr.splice(1, 1, {"width": "90px", "height": "90px"}); //} onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

然而，有一些屬性不支持復(fù)雜數(shù)據(jù)綁定，例如， if屬性和swiper組件的loop屬性等。他們的對(duì)象數(shù)據(jù)改變，都無(wú)法改變相應(yīng)的view層顯示效果，具體組件的數(shù)據(jù)綁定支持情況可以查閱官方開發(fā)文檔。

04

總結(jié)

HarmonyOS簡(jiǎn)單數(shù)據(jù)綁定，可以支持“屬性綁定”、“樣式綁定”、“動(dòng)畫綁定”和“內(nèi)容綁定”。HarmonyOS復(fù)雜數(shù)據(jù)綁定支持情況和簡(jiǎn)單數(shù)據(jù)綁定支持情況相同。對(duì)于諸多組件中存在的特有屬性的復(fù)雜數(shù)據(jù)綁定支持情況，歡迎各位開發(fā)者參與驗(yàn)證。最后概括HarmonyOS數(shù)據(jù)綁定的使用技巧：

1. HamonyOS僅支持單向的數(shù)據(jù)綁定，語(yǔ)法為Mustache；

2. 在簡(jiǎn)單數(shù)據(jù)綁定場(chǎng)景下，style、if和show及特有的屬性都會(huì)刷新View的顯示；

3. 在簡(jiǎn)單數(shù)據(jù)綁定場(chǎng)景下，靜態(tài)樣式中的animation-name更改會(huì)刷新View的動(dòng)畫效果；

4. 在簡(jiǎn)單數(shù)據(jù)綁定場(chǎng)景下，text等組件的內(nèi)容綁定更改會(huì)刷新View的顯示；

5. 在復(fù)雜數(shù)據(jù)綁定場(chǎng)景下，數(shù)據(jù)綁定的支持情況和簡(jiǎn)單數(shù)據(jù)綁定相同，推薦使用splice方法對(duì)數(shù)據(jù)內(nèi)容進(jìn)行增刪；

以下思維導(dǎo)圖概括了該版本下HarmonyOS數(shù)據(jù)綁定的支持情況。

圖7 HarmonyOS數(shù)據(jù)綁定全貌圖

編輯：jq