/* 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;}

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

02

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

HarmonyOS的簡單數(shù)據(jù)綁定支持“屬性綁定”、“樣式綁定”、“動畫綁定”和“內(nèi)容綁定”。樣式綁定和動畫綁定實際上是通過屬性標簽發(fā)揮作用的，下面我們詳細看一下具體使用過程。

1）屬性綁定

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

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

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

/*index.js*/import device from '@system.device';export default{ data:{ showValue:false, width:0, height:0,}, // showChange觸發(fā)會使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;}

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

點擊藍色按鈕，代表觸發(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ā)會使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)和動態(tài)之分，靜態(tài)樣式直接寫在元素標簽的關(guān)鍵字style中；動態(tài)樣式寫在.css文件中，通過關(guān)鍵字class引入。當(dāng)前動態(tài)樣式不支持數(shù)據(jù)綁定，數(shù)據(jù)綁定只能用在靜態(tài)樣式中，下面是switch靜態(tài)樣式寬高的數(shù)據(jù)綁定用法：

點擊藍色按鈕，代表觸發(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ā)會使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）動畫綁定

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

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

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

/*index.js*/import device from '@system.device';export default { data: { animationName: 'animationChange1', width: 0, height: 0, }, //animationChange觸發(fā)會使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;}/* 初始動畫效果改變背景顏色 */@keyframes animationChange1 { from { background-color: #ff0000; } to { background-color: #0000ff; }}/* 切換后動畫效果改變?yōu)榉綁K寬度變化 */@keyframes animationChange2 { from { width: 200px; } to { width: 250px; }}

4）內(nèi)容綁定

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

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

圖5 文字數(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ā)會使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;}

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

03

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

當(dāng)數(shù)據(jù)綁定的對象為列表（數(shù)組）時，與for搭配使用，可以實現(xiàn)通過for展開多個組件（即列表渲染），減少.hml重復(fù)寫組件。復(fù)雜數(shù)據(jù)綁定和列表渲染是強相關(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ù)組對象，array的元素變量默認為$item。

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

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

這三種方式的實現(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ù)組進行數(shù)據(jù)綁定，可以通過改變數(shù)組的數(shù)據(jù)讓組件樣式改變，具體使用方法如下：

點擊藍色按鈕，代表觸發(fā)改變與數(shù)組綁定的某switch組件寬高的“事件”，第二個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: {//定義兩個寬高相等的switch rectArr: [ {"width": "40px","height": "40px"}, {"width": "40px","height": "40px"} ], width: 0, height: 0, },//改變第二個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屬性等。他們的對象數(shù)據(jù)改變，都無法改變相應(yīng)的view層顯示效果，具體組件的數(shù)據(jù)綁定支持情況可以查閱官方開發(fā)文檔。

04

總結(jié)

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

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

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

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

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

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

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

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

編輯：jq