作者:邢碌
上一章,咱们通过分布式音乐播放器、分布式炸弹、分布式购物车,带大家解说了 OpenAtom OpenHarmony(以下简称“OpenHarmony”)中,相干控件在布局中如何应用,以及在 OpenHarmony 中如何实现音乐播放,显示动画,转场动画(页面间转场)等性能。本章是 OpenHarmony 规范设施利用开发的第三篇文章,将会在后面两章的根底上给大家解说分布式数据管理在多台设施间,当数据呈现变动时,通过订阅的形式,实现多台设施间的数据同步更新。
为了更好的了解,咱们应用 eTS 开发了一款如下动图所示的井字过三关游戏来解说分布式数据管理在利用中的应用。
Demo 简介:Demo 基于 OpenHarmony 零碎应用 eTS 语言进行编写,本 Demo 次要通过设施认证,分布式拉起,分布式数据管理等性能来实现。
我的项目创立以及页面布局等,这里就不再赘述,本章重点解说自定义弹窗以及分布式数据管理。
自定义弹窗
通过对自定义弹窗的解说,心愿能让大家学到如何在我的项目中实现本人的自定义弹窗。
1.1通过 @CustomDialog 装璜器来创立自定义弹窗,应用形式可参考 自定义弹窗:
官网参考链接:
https://gitee.com/openharmony...
1.2布局从上到下由 Text、List、Button 组成,List 中的子元素由 Text 和 Radio 组成,以下代码的省略号示意非 UI 相干的逻辑代码,具体实现参考源代码:
@CustomDialogstruct 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%') }}
通过上述形式,实现咱们的自定义弹窗,大家也能够在本人的我的项目中尝试实现本人的自定义弹窗。
分布式数据管理
分布式数据管理,能够在多台设施间,当数据呈现变动时,通过订阅的形式,实现多台设施间的数据同步更新。当咱们须要在多台设施间实现数据的同步更新,就能够应用分布式数据管理来实现。井字过三关游戏,通过分布式数据管理,实现多台设施间游戏界面的同步更新,实现多台设施同玩一个游戏的性能。
官网参考链接:
https://gitee.com/openharmony...
数据分布式运作示意图,如下所示。
实现步骤:
分布式数据管理依赖 @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...
相干问题阐明:
分布式数据管理数据传输过程中,如果数据中蕴含中文,会呈现乱码,所以数据存储中,尽量不要应用中文。
通过此次三个章节的解说,咱们晓得了如何从零到有在规范设施上运行一个最简略的 OpenHarmony 程序,并在此基础上,晓得了如何在 OpenHarmony 中做到音乐播放,显示动画,转场动画等相干进阶技能,以及如何通过分布式数据管理在多台设施之间实现数据的同步更新。在后续 OpenHarmony 最新版本中,咱们会有更多新的个性,更多的开发板,以及更多的样例带给大家,敬请期待。