【HarmonyOS】详解低代码端云一体化开发之数据模型

【关键字】

元服务、低代码平台、端云一体化开发、数据模型、拖拽式UI

【1、写在前面】

上一篇中分享了关于低代码平台开发元服务的基本使用，有兴趣的可以看一下，文章地址如下：

https://developer.huawei.com/consumer/cn/forum/topic/0201120502584194043?fid=0101591351254000314

但是在上一篇中我们的数据都是在端侧配置的，这种方式肯定是无法满足我们的实际需求的，所以本篇将会使用一种全新的方式来为端侧应用接入数据——低代码平台数据模型。

【2、开通低代码平台】

数据模型是在AppGallery Connect控制台中创建的一种云侧的数据资源，在端侧绑定已经创建好的需要的数据模型，就可以实现端侧调用云侧数据展示的效果。

如果你想要使用云侧数据模型的能力，需要先申请加入白名单，在白名单通过之后还要在AppGallery Connect中开通低代码平台，完成以上两步之后才可以愉快的使用数据模型的能力，关于这两步操作的详细步骤可以参考以下说明文档：

申请加入白名单：

https://developer.huawei.com/consumer/cn/doc/distribution/app/agc-lowcode-applywhitelist-0000001598720405

开通低代码平台：

https://developer.huawei.com/consumer/cn/doc/distribution/app/agc-lowcode-enableservice-0000001598935085

【3、实战案例】

下面通过实现一个加载列表数据的功能来具体看一下如何使用数据模型。

3.1、端侧UI布局

首先，我们在端侧通过拖拽式开发UI界面，这里实现一个List列表，然后ListItem中先是左右布局：左侧Image图片、右侧文本，然后右侧文本是上下布局，高度各占50%，整体UI布局效果如下：

​

3.2、云侧数据模型

首先登录AppGallery Connect控制台，然后选择对应的项目，找到左侧导航栏中的“低代码平台”--->“数据模型”，如下图所示：

​​

点击新建数据模型，在弹出的对话框中填写相应信息：

​

点击开始创建，则成功新建该数据模型：

​

点击编辑，开始编辑该数据模型，为该数据模型添加需要的其它字段：

​

这里为该数据模型新建了序号、缩略图、标题、内容等字段，系统默认生成了创建时间、更新时间、所有人、创建人及修改人几个字段，并且还默认生成了一系列的增删改查的方法：

​

接着点击保存，完成数据模型的更新。

创建完成数据模型之后，需要给该数据模型添加数据，点击数据模型列表中的管理数据：

​

点击新建开始创建具体数据：

​

这里简单创建3条数据：

​

OK，通过以上步骤，云侧的数据模型及数据的添加就已经完成了。

3.3、端云绑定

端侧想要实现绑定云侧创建的数据模型，需要满足两个条件：

①、DevEco Studio需要登录开发者账号：

​

②、下载agconnect-services.json文件置于应用级根目录下：

​

OK，完成了以上步骤之后，就可以开始端云数据绑定的操作啦。

首先在右侧属性样式面板中切换到最下方PageData面板，点击Add Data，选择DataModel：

​

接着选择对应的数据模型，类型这里选择List：

​

然后选中ListItem组件，为其绑定数据。由于端侧UI需要实现的是一个List列表，所以这里绑定数据通过For来快速实现循环添加数据的能力：

​

然后依次为Image和右侧的两个Text组件绑定对应的数据字段：

​

到这里，就完成了端云的数据绑定啦！

3.4、效果展示

下面来看一下最终的实现效果吧：

​​

参考文档：

https://developer.huawei.com/consumer/cn/doc/distribution/app/agc-help-harmonyos-introduction-0000001172299745

https://developer.huawei.com/consumer/cn/doc/distribution/app/agc-lowcode-overview-0000001548175386

​