【关键字】

元服务、低代码平台、端云一体化开发、数据模型、拖拽式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

【HarmonyOS】详解低代码端云一体化开发之数据模型的更多相关文章

  1. 深度学习之卷积神经网络(CNN)详解与代码实现(一)

    卷积神经网络(CNN)详解与代码实现 本文系作者原创,转载请注明出处:https://www.cnblogs.com/further-further-further/p/10430073.html 目 ...

  2. WebSocket安卓客户端实现详解(三)–服务端主动通知

    WebSocket安卓客户端实现详解(三)–服务端主动通知 本篇依旧是接着上一篇继续扩展,还没看过之前博客的小伙伴,这里附上前几篇地址 WebSocket安卓客户端实现详解(一)–连接建立与重连 We ...

  3. 详解低延时高音质:丢包、抖动与 last mile 优化那些事儿

    本篇是「详解低延时高音质系列」的第三篇技术分享.我们这次要将视角放大,从整个音频引擎链路的角度,来讲讲在时变的网络下,针对不同的应用场景,如何权衡音质和互动的实时性. 当我们在讨论实时互动场景下的低延 ...

  4. Python - 元组(tuple) 详解 及 代码

    元组(tuple) 详解 及 代码 本文地址: http://blog.csdn.net/caroline_wendy/article/details/17290967 元组是存放任意元素集合,不能修 ...

  5. Python - 字典(dict) 详解 及 代码

    字典(dict) 详解 及 代码 本文地址: http://blog.csdn.net/caroline_wendy/article/details/17291329 字典(dict)是表示映射的数据 ...

  6. C#的String.Split 分割字符串用法详解的代码

    代码期间,把代码过程经常用的内容做个珍藏,下边代码是关于C#的String.Split 分割字符串用法详解的代码,应该对码农们有些用途. 1) public string[] Split(params ...

  7. laravel 框架配置404等异常页面的方法详解(代码示例)

    本篇文章给大家带来的内容是关于laravel 框架配置404等异常页面的方法详解(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在Laravel中所有的异常都由Handl ...

  8. Android java程序员必备技能,集合与数组中遍历元素,增强for循环的使用详解及代码

    Android java程序员必备技能,集合与数组中遍历元素, 增强for循环的使用详解及代码 作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 For ...

  9. 详解 HTTPS 移动端对称加密套件优

    近几年,Google.Baidu.Facebook 等互联网巨头大力推行 HTTPS,国内外的大型互联网公司很多也都已启用全站 HTTPS. Google 也推出了针对移动端优化的新型加密套件 Cha ...

  10. 【转载】 深度学习之卷积神经网络(CNN)详解与代码实现(一)

    原文地址: https://www.cnblogs.com/further-further-further/p/10430073.html ------------------------------ ...

随机推荐

  1. (原创)【B4A】一步一步入门09:xCustomListView,加强版列表、双行带图片、复选框按钮等自定义列表项(控件篇05)

    一.前言 上篇((原创)[B4A]一步一步入门08:ListView,列表.单行.双行.双行带图片.列表项样式(控件篇04))我们讲了ListView,目前官方已经不推荐再使用ListView了,而是 ...

  2. 计网学习笔记五 wireless && mobile networks

    老师把无线网络用一节课一遍过了-感觉没能学透,便课后自己总结,看书,找资料补充,把无线网络大概摸了个七七八八.虽然不算精细,但还能看!内容包括WLAN总概,WiFi-WLAN的实现,802.11规定的 ...

  3. day3 函数的定义和调用,练习编写简单的程序(记录1)

    一.函数的定义 可以分为以下两种: 1.函数声明和函数定义分离 这种方法将函数声明和函数定义分开,通常在头文件中先声明函数原型,然后在源文件中实现函数定义. 例如,头文件 example.h 中声明了 ...

  4. python实现桌面截图功能

    PIL中的ImageGrab模块 import time import numpy as np from PIL import ImageGrab img = ImageGrab.grab(bbox= ...

  5. [Linux]Vmwaer创建CENTOS7虚拟机

    1 前期准备 CENTOS系统镜像 本实验版本: CENTOS 7.9 安装 VMware Workstation 本实验版本: VMware Workstation Pro 15.0 2 VMwar ...

  6. 浏览器层面优化前端性能(1):Chrom组件与进程/线程模型分析

    现阶段的浏览器运行在一个单用户,多合作,多任务的操作系统中.一个糟糕的网页同样可以让一个现代的浏览器崩溃.其原因可能是一个插件出现bug,最终的结果是整个浏览器以及其他正在运行的标签被销毁. 现代操作 ...

  7. Nvidia GPU热迁移-Singularity

    1 背景 在GPU虚拟化和池化的加持下,可以显著提高集群的GPU利用率,同时也可以较好地实现弹性伸缩.但有时会遇到需要GPU资源再分配的场景,此时亟需集群拥有GPU任务热迁移的能力.举个简单的例子,比 ...

  8. 2021年蓝桥杯python组真题-直线(细节+分析+代码)

    题目 : 代码: #直线 M=[[x,y] for x in range(20) for y in range(21)] #创建二维列表:代表xy坐标系 d=set() #创建集合属性的容器:因为集合 ...

  9. elastic-job源码(1)- job自动装配

    版本:3.1.0-SNAPSHOT git地址:https://github.com/apache/shardingsphere-elasticjob   Maven 坐标 <dependenc ...

  10. Irwin-Hall 分布学习笔记

    定理:Irwin-Hall 分布 对于 \(n\) 个在 \([0,1]\) 内均匀分布的实数随机变量,它们的和不超过一个实数 \(z\) 的概率为: \[F(z)=\sum\limits_{k=0} ...