為了更好的理解，我們使用 eTS 開發了一款如下動圖所示的井字過三關游戲來講解分散式數據管理在應用中的使用。 ...
（以下內容來自開發者分享，不代表 OpenHarmony 項目群工作委員會觀點）
邢碌
上一章，我們通過分散式音樂播放器、分散式炸彈、分散式購物車，帶大家講解了 OpenAtom OpenHarmony（以下簡稱“OpenHarmony”）中，相關控制項在佈局中如何使用，以及在 OpenHarmony 中如何實現音樂播放，顯示動畫，轉場動畫（頁面間轉場）等功能。
本章是 OpenHarmony 標準設備應用開發的第三篇文章，將會在前面兩章的基礎上給大家講解分散式數據管理在多台設備間，當數據出現變動時，通過訂閱的方式，實現多台設備間的數據同步更新。為了更好的理解，我們使用 eTS 開發了一款如下動圖所示的井字過三關游戲來講解分散式數據管理在應用中的使用。
Demo 簡介：Demo 基於 OpenHarmony 系統使用 eTS 語言進行編寫，本 Demo 主要通過設備認證，分散式拉起，分散式數據管理等功能來實現。
項目創建以及頁面佈局等，這裡就不再贅述，本章重點講解自定義彈窗以及分散式數據管理。
一、自定義彈窗
通過對自定義彈窗的講解，希望能讓大家學到如何在項目中實現自己的自定義彈窗。
1.1 通過 @CustomDialog 裝飾器來創建自定義彈窗，使用方式可參考 自定義彈窗：
1.2 佈局從上到下由 Text、List、Button 組成，List 中的子元素由 Text 和 Radio 組成，以下代碼的省略號表示非 UI 相關的邏輯代碼，具體實現參考源代碼：
@CustomDialog struct gameStart { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { //頂部標題 Text('發現以下線上設備').fontColor(Color.Black).fontSize(30) }.width('100%').height('20%') Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) { //使用List容器動態載入線上設備 List() { ForEach(this.deviceName, (item) => { ListItem() { Row() { //Text組件顯示設備名 Text(item.deviceName).width('80%').fontSize(30).fontColor(Color.Black) //Radio組件顯示單選框 Radio({ value: '' }).checked(this.check[item.id]).onChange(() => { //這裡保證List裡面點擊了多個Radio組件時，只有當前點擊的為選中狀態 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%') } }
通過上述方式，完成我們的自定義彈窗，大家也可以在自己的項目中嘗試完成自己的自定義彈窗。
二、分散式數據管理
分散式數據管理，可以在多台設備間，當數據出現變動時，通過訂閱的方式，實現多台設備間的數據同步更新。當我們需要在多台設備間實現數據的同步更新，就可以使用分散式數據管理來實現。井字過三關游戲，通過分散式數據管理，實現多台設備間游戲界面的同步更新，實現多台設備同玩一個游戲的功能。
數據分散式運作示意圖，如下所示。
實現步驟：
分散式數據管理依賴 @ohos.data.distributedData 模塊實現，詳細參考項目源碼中的 RemoteDataManager.ets 實現步驟。
2.1 導入該模塊
import factory from '@ohos.data.distributedData';
2.2 創建 KVManager 實例，用於管理資料庫對象
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 改成對應內容
2.3 創建並獲取 KVStore 資料庫
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 改成對應內容
2.4 訂閱指定類型的數據變更通知
_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 對應訂閱的類型，具體詳情看上面官網參考中的詳細描述。
2.5 添加指定類型鍵值對到資料庫
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) {
}
}
項目下載鏈接：https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/Entertainment/TicTacToeGame
相關問題說明：
分散式數據管理數據傳輸過程中，如果數據中包含中文，會出現亂碼，所以數據存儲中，儘量不要使用中文。
通過此次三個章節的講解，我們知道瞭如何從零到有在標準設備上運行一個最簡單的 OpenHarmony 程式，併在此基礎上，知道瞭如何在 OpenHarmony 中做到音樂播放，顯示動畫，轉場動畫等相關進階技能，以及如何通過分散式數據管理在多台設備之間實現數據的同步更新。
在後續 OpenHarmony 最新版本中，我們會有更多新的特性，更多的開發板，以及更多的樣例帶給大家，敬請期待。
