​【关键字】

元服务、低代码平台、端云一体化开发、连接器、拖拽式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. react中登录注册 使用验证码验证

    后端接口 var express = require('express'); var router = express.Router(); var User = require('./../sql/c ...

  2. react组件之非受控组件和高阶组件

    非受控组件 受控组件和非受控组件的区别 ----- value import React, { Component } from 'react' export default class extend ...

  3. 为什么我推荐你使用 systemd timer 替代 cronjob?

    概述 前几天在使用 Terraform + cloud-init 批量初始化我的实验室 Linux 机器.正好发现有一些定时场景需要使用到 cronjob, 进一步了解到 systemd timer ...

  4. 【python基础】五大数据类型及常用方法

    1. 数据类型概述 python中的字符串,列表,元组,字典,集合这五种数据类型均是可迭代的,可以使用for循环访问,涵盖了三类数据结构分别为序列.散列.集合. 序列: 字符串 str 列表 list ...

  5. 四月十二号java基础知识

    1.面向对象的编程思想是力图使在计算机语言中对事物的描述与现实世界中该事物的本来面目尽可能地一致.2.类(class)和对象(object)是面向对象程序设计方法中最核心的概念3.类是对某一事物的描述 ...

  6. day84:luffy:优惠活动策略&用户认证&购物车商品的勾选/结算

    目录 1.课程列表页活动和真实价格计算 1.优惠活动策略的model表结构 2.课程列表页显示优惠类型名称 3.课程列表页显示真实价格 4.将优惠类型名称和真实价格显示到前端页面上 5.课程列表页显示 ...

  7. php+mysql实现微信公众号回复关键词新闻列表

    非常抱歉,我之前理解有误.如果您想要实现在公众号发送关键词,返回新闻列表的功能,可以按照以下步骤进行操作: 1. 创建一个数据库表,用于存储新闻的标题.链接和内容等信息.例如,可以创建一个名为news ...

  8. [aac @ 0x1dd24c0] Input contains NaN/+-Inf

    ffmpeg编码pcm为aac时报错:[aac @ 0x1dd24c0] Input contains NaN/+-Inf 在./configure选项后面加上下列选项就可以 --enable-enc ...

  9. Python表达式及运算符

    表达式 由一个或者几个数字或者变量或者运算符合成的一行代码 通常返回一个结果 运算符 由一个以上的值经过一系列的运算得到新值的过程叫运算 用来操作运算的符号叫运算符 运算符分类 算数运算符 比较或者关 ...

  10. VMware虚拟机---Ubuntu无法连接网络该怎么解决?

    在学习使用Linux系统时,由于多数同学们的PC上多是Windows系统,故会选择使用VMware创建一个虚拟机来安装Linux系统进行学习. 安装完成之后,在使用时总是会遇到各种各样的问题.本片随笔 ...