​【关键字】

元服务、低代码平台、端云一体化开发、连接器、拖拽式UI

【1、写在前面】

前面我们写了两篇文章分别介绍了低代码平台的基本使用和端云一体化开发中数据模型的使用,有需要的可以了解一下,文章地址贴在下面了:

低代码平台的基本使用:

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

端云一体化开发之数据模型的使用:

https://developer.huawei.com/consumer/cn/forum/topic/0209120915868317043?fid=18

今天继续来分享另一个比较常用的功能——连接器的使用,连接器用于链接外部数据源与外部应用能力,通过连接器可以打通低代码应用与外部系统之间的交互,构建低代码应用的开放能力。

【2、实战案例】

首先连接器同样是需要开通低代码平台的,关于如何开通低代码平台,请参考上一篇介绍数据模型的文章,文章中有关于申请加入白名单及开通低代码平台的内容,下面就通过案例实操来介绍连接器的使用。

2.1、端侧UI布局

端侧通过拖拽式开发UI界面,外层是一个容器组件Div,内层是两个Text文本组件,宽度是填充100%,高度根据自己的需求进行设置,排列方式是垂直方向排列,界面如下所示:

2.2、云侧连接器

首先登录AppGallery Connect控制台,然后选择对应的项目,找到左侧导航栏中的“低代码平台”--->“连接器”,如下图所示:

​​

点击新建连接器,开始创建自定义的连接器,这里我们准备的第三方接口很简单,普通的无入参的Get请求,生成一句名言,接口地址:

https://api.apiopen.top/api/sentences

点击页面中的开始创建,在连接器的列表页面会生成一条记录,如下:

点击编辑会进入连接器编辑页面,该页面上方是连接器的一些基础设置,下方是连接器方法:

点击连接器方法中的立即新建,开始创建连接器方法:

​​

点击方法测试,测试结果显示成功,然后点击出参映射,在出参部分会自动生成出参结果:

然后点击保存,通过以上步骤就成功在云侧添加了一个连接器。

2.3、端云数据绑定

端侧想要实现绑定云侧创建的连接器,同样需要满足两个条件:

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

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

OK,完成了以上步骤之后,就可以开始绑定云侧连接器的操作啦。

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

接着选择对应的连接器、状态、方法等信息,点击提交就完成了连接器的添加:

最后在UI界面中选择对应的组件,为其绑定数据,上方Text组件绑定name字段,下方Text组件绑定from字段:

OK,到这里就完成了连接器的数据绑定啦。

2.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-connector-create-0000001548335378

【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. MarkdownStudy01markdown用法

    一级标题 二级标题 三级标题 字体 Hello,Word! Hello,Word! Hello,Word! Hello,Word! 引用 好好学Java 分割线 图片 超链接 点击跳转 列表 A B ...

  2. Python的函数和方法如何区分呢?

    结论>>>:无论是函数还是方法都用def关键字来定义 方法:只要是自动传值都是方法.由谁来调用.会把自身传入 函数:有几个值就传几个值否则会报错 目录 一.详细介绍函数和方法 二.用 ...

  3. [WEB]对于"Refused to execute script from 'http://xx.xx.xx/yy/zz.js' because its MIME type ('') is not executable, and strict MIME type checking is enabled."问题的解决办法

    1 文由 阶段一:对WEB服务器HTTP通信的header设置了安全头(X-Content-Options:nosniff) 两个月前协助交付侧大哥处理.修复一个三级等保项目的第三方安全公司释出的安全 ...

  4. Linux驱动开发环境-Kernel源码安装

    开如学习LDD3这本书. 我是在Fedora18上学习的,但我安装的这个版本,/usr/src/下面没有相应的源代码. 自己从KERNEL网站下载相应版本源码(安装驱动有问题) 于是从kernel的网 ...

  5. 2022-10-06:以下go语言代码输出什么?A:[1 2 3] [1 2 3] ;B:[1 2 3] [3 4 5]; C:[1 2 3] [3 4 5 6 7 8 9];D:[1 2 3] [3

    2022-10-06:以下go语言代码输出什么?A:[1 2 3] [1 2 3] :B:[1 2 3] [3 4 5]: C:[1 2 3] [3 4 5 6 7 8 9]:D:[1 2 3] [3 ...

  6. 2021-09-19:数字 n 代表生成括号的对数,请你设计一个函数,用于能够生成所有可能的并且有效的括号组合。

    2021-09-19:数字 n 代表生成括号的对数,请你设计一个函数,用于能够生成所有可能的并且有效的括号组合. 福大大 答案2021-09-19: 递归. 参数1:左括号-右括号的数量. 参数2:左 ...

  7. ue全家桶进阶之路30:Vue3定义组件和常用指令

    要定义 Vue 3 组件,你可以使用 Vue 3 提供的 defineComponent 函数. 例如,以下是一个简单的 Vue 3 组件定义: import { defineComponent } ...

  8. 使用 Django 集成 vue 到一个服务器上,还是 Django 和 vue 分开部署

    Django+Vue 的项目,实际部署的时候,使用 Django 集成 vue 到一个服务器上,还是 Django 和 vue 分开部署? 目前在架构选择,基本上定了 Django + Vue 但是实 ...

  9. 沁恒 CH32V208(五): CH32V208 运行FreeRTOS示例的说明

    目录 沁恒 CH32V208(一): CH32V208WBU6 评估板上手报告和Win10环境配置 沁恒 CH32V208(二): CH32V208的储存结构, 启动模式和时钟 沁恒 CH32V208 ...

  10. 从 DevOps 到平台工程:软件开发的新范式

    DevOps 是一种将开发和运营结合起来的方法,在应用规划.开发.交付和运营方面将人员.流程和技术结合起来.DevOps 使以前孤立的角色(如开发.IT运营.质量工程和安全)之间进行协调和合作.一直以 ...