上一章,我們通過(guò)分布式音樂(lè)播放器、分布式炸彈、分布式購(gòu)物車(chē),帶大家講解了 OpenAtom OpenHarmony(以下簡(jiǎn)稱(chēng)“OpenHarmony”)中,相關(guān)控件在布局中如何使用,以及在 OpenHarmony 中如何實(shí)現(xiàn)音樂(lè)播放,顯示動(dòng)畫(huà),轉(zhuǎn)場(chǎng)動(dòng)畫(huà)(頁(yè)面間轉(zhuǎn)場(chǎng))等功能。本章是 OpenHarmony 標(biāo)準(zhǔn)設(shè)備應(yīng)用開(kāi)發(fā)的第三篇文章,將會(huì)在前面兩章的基礎(chǔ)上給大家講解分布式數(shù)據(jù)管理在多臺(tái)設(shè)備間,當(dāng)數(shù)據(jù)出現(xiàn)變動(dòng)時(shí),通過(guò)訂閱的方式,實(shí)現(xiàn)多臺(tái)設(shè)備間的數(shù)據(jù)同步更新。
為了更好的理解,我們使用 eTS 開(kāi)發(fā)了一款如下動(dòng)圖所示的井字過(guò)三關(guān)游戲來(lái)講解分布式數(shù)據(jù)管理在應(yīng)用中的使用。
Demo 簡(jiǎn)介:Demo 基于 OpenHarmony 系統(tǒng)使用 eTS 語(yǔ)言進(jìn)行編寫(xiě),本 Demo 主要通過(guò)設(shè)備認(rèn)證,分布式拉起,分布式數(shù)據(jù)管理等功能來(lái)實(shí)現(xiàn)。
項(xiàng)目創(chuàng)建以及頁(yè)面布局等,這里就不再贅述,本章重點(diǎn)講解自定義彈窗以及分布式數(shù)據(jù)管理。
自定義彈窗
通過(guò)對(duì)自定義彈窗的講解,希望能讓大家學(xué)到如何在項(xiàng)目中實(shí)現(xiàn)自己的自定義彈窗。
1.1 通過(guò) @CustomDialog 裝飾器來(lái)創(chuàng)建自定義彈窗,使用方式可參考 自定義彈窗:
1.2 布局從上到下由 Text、List、Button 組成,List 中的子元素由 Text 和 Radio 組成,以下代碼的省略號(hào)表示非 UI 相關(guān)的邏輯代碼,具體實(shí)現(xiàn)參考源代碼:
@CustomDialog
struct gameStart {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
//頂部標(biāo)題
Text('發(fā)現(xiàn)以下在線(xiàn)設(shè)備').fontColor(Color.Black).fontSize(30)
}.width('100%').height('20%')
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
//使用List容器動(dòng)態(tài)加載在線(xiàn)設(shè)備
List() {
ForEach(this.deviceName, (item) => {
ListItem() {
Row() {
//Text組件顯示設(shè)備名
Text(item.deviceName).width('80%').fontSize(30).fontColor(Color.Black)
//Radio組件顯示單選框
Radio({ value: '' }).checked(this.check[item.id]).onChange(() => {
//這里保證List里面點(diǎn)擊了多個(gè)Radio組件時(shí),只有當(dāng)前點(diǎn)擊的為選中狀態(tài)
for (let i = 0; i < this.check.length; i++) {
this.check[i] = false
}
this.check[item.id] = true
})
}
}
}, item => item.id)
}
.height('80%')
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('確定').width(200).height(50).fontSize(30).onClick(() => {
//......
this.controller.close()
})
}.height('30%')
}.width('100%').height('80%')
}.height('100%').width('100%')
}
}
通過(guò)上述方式,完成我們的自定義彈窗,大家也可以在自己的項(xiàng)目中嘗試完成自己的自定義彈窗。
分布式數(shù)據(jù)管理
分布式數(shù)據(jù)管理,可以在多臺(tái)設(shè)備間,當(dāng)數(shù)據(jù)出現(xiàn)變動(dòng)時(shí),通過(guò)訂閱的方式,實(shí)現(xiàn)多臺(tái)設(shè)備間的數(shù)據(jù)同步更新。當(dāng)我們需要在多臺(tái)設(shè)備間實(shí)現(xiàn)數(shù)據(jù)的同步更新,就可以使用分布式數(shù)據(jù)管理來(lái)實(shí)現(xiàn)。井字過(guò)三關(guān)游戲,通過(guò)分布式數(shù)據(jù)管理,實(shí)現(xiàn)多臺(tái)設(shè)備間游戲界面的同步更新,實(shí)現(xiàn)多臺(tái)設(shè)備同玩一個(gè)游戲的功能。
數(shù)據(jù)分布式運(yùn)作示意圖,如下所示。
實(shí)現(xiàn)步驟:分布式數(shù)據(jù)管理依賴(lài) @ohos.data.distributedData 模塊實(shí)現(xiàn),詳細(xì)參考項(xiàng)目源碼中的 RemoteDataManager.ets 實(shí)現(xiàn)步驟。
2.1 導(dǎo)入該模塊
import factory from '@ohos.data.distributedData';
2.2 創(chuàng)建 KVManager 實(shí)例,用于管理數(shù)據(jù)庫(kù)對(duì)象
registerDataListCallback(callback) {
let that = this
if (this.kvManager == null) {
try {
const config = {
userInfo: {
userId: '0',
userType: 0
},
bundleName: 'com.example.tictactoegame'
}
factory.createKVManager(config).then((manager) => {
that.kvManager = manager
that.registerDataListCallback_(callback)
}).catch((err) => {
})
} catch (e) {
}
} else {
this.registerDataListCallback_(callback)
}
}
備注:bundleName 改成對(duì)應(yīng)內(nèi)容
2.3 創(chuàng)建并獲取 KVStore 數(shù)據(jù)庫(kù)
registerDataListCallback_(callback) {
let that = this
if (that.kvManager == null) {
callback()
return
}
if (that.kvStore == null) {
try {
let options =
{
createIfMissing: true,
encrypt: false,
backup: false,
autoSync: true,
kvStoreType: 1,
securityLevel: 3
}
this.kvManager.getKVStore(this.STORE_ID, options).then((store) => {
that.kvStore = store
that._registerDataListCallback_(callback)
}).catch((err) => {
})
} catch (e) {
}
} else {
this._registerDataListCallback_(callback)
}
}
備注:STORE_ID 改成對(duì)應(yīng)內(nèi)容
2.4 訂閱指定類(lèi)型的數(shù)據(jù)變更通知
_registerDataListCallback_(callback) {
let that = this
if (that.kvManager == null) {
callback()
return
}
this.kvStore.on('dataChange', 1, function(data) {
if (data) {
that.arr = data.updateEntries
callback()
}
})
}
備注:kvStore.on 方法中的 1 對(duì)應(yīng)訂閱的類(lèi)型,具體詳情看上面官網(wǎng)參考中的詳細(xì)描述。
2.5 添加指定類(lèi)型鍵值對(duì)到數(shù)據(jù)庫(kù)
dataChange(key, value) {
let that = this
try {
that.kvStore.put(JSON.stringify(key), JSON.stringify(value)).then((data) => {
}).catch((err) => {
prompt.showToast({message:'put err:'+JSON.stringify(value)})
})
} catch (e) {
}
}
相關(guān)問(wèn)題說(shuō)明:分布式數(shù)據(jù)管理數(shù)據(jù)傳輸過(guò)程中,如果數(shù)據(jù)中包含中文,會(huì)出現(xiàn)亂碼,所以數(shù)據(jù)存儲(chǔ)中,盡量不要使用中文。
通過(guò)此次三個(gè)章節(jié)的講解,我們知道了如何從零到有在標(biāo)準(zhǔn)設(shè)備上運(yùn)行一個(gè)最簡(jiǎn)單的 OpenHarmony 程序,并在此基礎(chǔ)上,知道了如何在 OpenHarmony 中做到音樂(lè)播放,顯示動(dòng)畫(huà),轉(zhuǎn)場(chǎng)動(dòng)畫(huà)等相關(guān)進(jìn)階技能,以及如何通過(guò)分布式數(shù)據(jù)管理在多臺(tái)設(shè)備之間實(shí)現(xiàn)數(shù)據(jù)的同步更新。在后續(xù) OpenHarmony 最新版本中,我們會(huì)有更多新的特性,更多的開(kāi)發(fā)板,以及更多的樣例帶給大家,敬請(qǐng)期待。
原文標(biāo)題:OpenHarmony標(biāo)準(zhǔn)設(shè)備應(yīng)用開(kāi)發(fā)(三)——分布式數(shù)據(jù)管理
文章出處:【微信公眾號(hào):HarmonyOS官方合作社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
審核編輯:湯梓紅
-
數(shù)據(jù)
+關(guān)注
關(guān)注
8文章
7002瀏覽量
88938 -
設(shè)備
+關(guān)注
關(guān)注
2文章
4502瀏覽量
70598 -
OpenHarmony
+關(guān)注
關(guān)注
25文章
3713瀏覽量
16254
原文標(biāo)題:OpenHarmony標(biāo)準(zhǔn)設(shè)備應(yīng)用開(kāi)發(fā)(三)——分布式數(shù)據(jù)管理
文章出處:【微信號(hào):HarmonyOS_Community,微信公眾號(hào):電子發(fā)燒友開(kāi)源社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論