特惠专区

ECS 限时秒杀，多重好礼等你拿

免费体验中心

免费领取90+产品体验

华为云企业邮箱 优惠

即开即用，不限账号数
[快速入门]华为云低代码平台
华为云Astro企业应用

多产品组合，组装式交付 通过对零码、低码、流程、大屏、高低码结合等场景覆盖，统一开发者体验 通过对零码、低码、流程、大屏、高低码结合等场景覆盖，统一开发者体验 华为云Astro工作流 快速构建工作流应用 满足企业中人财事物的调、转、入、离、审、评、批等任务的数智化需求 场景详情 华为云Astro大屏应用
分布式消息服务 Kafka版

实例+存储费用低至￥4.50/小时起 分布式消息服务Kafka版 立即购买 管理控制台 帮助文档 立即购买 管理控制台 [新品上市] RocketMQ版上线，低延迟、高可靠、高吞吐 [交流答疑] DMS服务的意见建议、技术交流、问题求助 [服务合集] 华为云智能应用平台，企业应用上云更简单
开天集成工作台资源中心

Zero（原AppCube）轻松构建专业级应用，创新随心所欲，敏捷超乎想象—— 高效易用的低代码平台。 立即使用 API中心 API中心是为API开发者和应用开发者构建的海量API的汇聚运营平台。通过统一汇聚和持续运营，贯通并粘合API生产、API开放和API消费全场景，实现API
集成工作台

企业通过集成工作台提供低代码/零代码的方式，使各种资源如行业API、业务模型、连接器等可便捷使用，使能不同层级的开发者，极大增强企业应用的供给能力 轻应用开发 轻应用开发，业务快速创新 集成工作台与华为云Astro轻应用 （Astro Zero 低代码开发平台）及企业工作台联动，实现开发应用到使用应用的完整闭环
华为云实时音视频

华为云实时音视频 SparkRTC 华为云实时音视频 SparkRTC 华为云实时音视频服务（SparkRTC）凭借在视频业务领域长期技术积累，快速为行业提供高并发、低延迟、高清流畅、安全可靠的全场景、全互动、全实时的音视频服务，适用于在线教育、办公协作、社交文娱、在线金融等场景
华为云Astro大屏应用

多产品组合，组装式交付 通过对零码、低码、流程、大屏、高低码结合等场景覆盖，统一开发者体验 通过对零码、低码、流程、大屏、高低码结合等场景覆盖，统一开发者体验 华为云Astro工作流 快速构建工作流应用 满足企业中人财事物的调、转、入、离、审、评、批等任务的数智化需求 场景详情 华为云Astro大屏应用
MapReduce服务

同时满足客户实时/离线等混合复杂业务处理诉求 高吞吐、低延时 可以通过Storm从Kafka获取实时流数据，实现高吞吐量、低延时的实时计算、分析能力 支持多类型数据融合 同时支持各种结构化/半结构化/非结构化数据计算处理，轻松迁移传统数仓数据，实现跨源数据探索分析 场景适用服务 MapReduce服务
华为云WeLink

了解更多 观看视频 更加开放，自由定制 开放平台 服务中心 飞羽审批 蒲公英表单 预置基础办公应用，开箱即用；提供300+API接口，高效对接原有应用；AppCube低代码开发，仅需拖拉拽即可创建应用。 了解更多 观看视频 更加开放，自由定制 开放平台 服务中心 飞羽审批 蒲公英表单 预
华为云hilens

端边协同AI应用场景 结合端侧推理时延低、边缘算力和准确率较高的优势，将一个AI应用中的多个AI模型进行拆分，通过云上HiLens平台将得到的多个AI应用分别部署到端侧摄像头与轻量级边缘设备上进行AI推理，通过业务逻辑充分协调与使用硬件计算能力，平衡低时延与高精度，实现整体方案的降本增效。
[相关产品]华为云低代码平台
低代码平台

低代码平台包括开发管理控制台、业务建模设计器、功能页面设计器、流程设计器、报表设计器、数据大屏设计器、门户设计等企业数字化必备工具，完全基于浏览器可视化开发管理，既改即用。优速云低代码开发平台助力企业实现1个数字化底座，搭载N个业务系统，1个统一入口的标准1+N+1架构。整体架构
NW低代码平台

讯客NW低代码开发平台是一个仅需少量编码+可视化组件拖拽 (drag & drop) 的构建方式即可快速完成应用系统开发的平台app人工智能软件小程序 集成钉钉、企业微信、飞书等客户端
中易低代码平台

基于经典的可视化和模型驱动理念，以无代码、低代码为特性的应用搭建平台，致力于帮助用户以低成本、短周期、高效率的方式实现各类数字化应用，满足不同类型、不同阶段客户的数字化管理需求。一、产品介绍：基于经典的可视化和模型驱动理念，以无代码、低代码为核心特性的数字化应用搭建平台，致力于帮助用户以低成本
捷易通低代码平台

程中，平台通常提供注册界面供用户填写必要的信息，如用户名、密码和电子邮件等。在用户认证方面，平台会使用合适的身份验证方法来确认用户的身份，如密码验证、短信验证或第三方登录等方式。权限管理是低代码平台中非常重要的一部分，它用于控制不同用户或角色对系统资源的访问权限。低代码平台通常提
Deer低代码开发平台

Deer低代码开发平台提供丰富、易用的模板、模型、插件、组件，满足不同用户个性化的需求，旨在帮助客户便捷、快速、灵活、低成本的搭建企业应用的数字化技术中台产品。产品主要组件应用1、DeerForm表单引擎：表单引擎组件是方便相关负责人员自主配置表单以及自定义样式、错误消息和样式以及简化验证规则 
宜构低代码开发平台

宜构低代码开发平台专注于解决大数据的数据处理，数据采集、重组、整合、可视化展示。面向普通用户层配置，无需技术人员介入可以根据需求自定义配置独立的运行系统，大大降低了信息化门槛，实现所见即所得。多终端适配：PC端，可视化管理，业务智能集成融合,行业覆盖广：覆盖城市管理、社会治理、教
优维低代码开发平台

优维低代码开发平台围绕企业业务管理需求，快速开发自有IT管理工具的解决方案，其通过提供可视化的用户编排界面、控件元素和成熟稳定的模块，在不需要学习开发语言的情况下,快速配置IT工具简单操作：通过low-code的插件化、配置化的前端开发方式,平台整合了优维众多行业IT运维的服务中台与技术中台能力，无缝赋能开发人员。
零云低代码开发平台

零云低代码开发平台，应用前沿技术架构，以数据模型、应用模型、移动端模型、报表模型为驱动，结合强大流程引擎，助力企业快速构建面向未来的个性化应用，实现快速开发、高效应用，可适应各类复杂业务场景，为企业数字化应用创新提供强大动能。 企业级低代码开发平台-以模型为驱动，轻松驾驭复杂业务
炎黄盈动AWS PaaS低代码平台

炎黄盈动AWS PaaS低代码平台以低代码等核心能力，覆盖企业/政府构建应用的典型业务场景。帮助用户在新应用快速构建、流程管理和自动化运维方面获得优势，加速数字化转型和运营创新炎黄盈动AWS PaaS低代码平台完全自主研发并拥有核心技术， 经过大规模客户验证已占据行业先进地位，可
[相似文章]华为云低代码平台
华为云低代码平台_低代码开发平台_华为云Astro-华为云

华为云低代码 华为云低代码 华为云低代码是华为云自主研发的全场景低代码平台，提供了零码、低码、高低码协同的云上开发模式，通过对企业业务模块的抽象、编排与管理，联合专业开发者与全民开发者，加速企业数字化转型。 华为云低代码是华为云自主研发的全场景低代码平台，提供了零码、低码、高低码
低代码开发平台好用吗_低代码平台_Astro低代码-华为云

逻辑开发-服务编排 Astro低代码开发平台 04:03 前端开发-标准页面 Astro低代码开发平台 前端开发-标准页面 Astro低代码开发平台 04:57 Astro低代码开发平台 快速发布Welink轻应用 Astro低代码开发平台 07:20 Astro低代码开发平台 逻辑开发-服务编排
低代码开发平台_低代码平台Astro_低代码开发是什么-华为云

Asrto Zero应用场景 轻松构建专业级应用，高效易用的低代码平台，创新随心所欲，敏捷超乎想象！ 低代码开发平台--零代码场景 无需代码，通过全新的可视化界面，只需托拉拽即可轻松搭建应用，让工作变得简单有趣 低代码开发平台 - 轻应用构建场景 提供丰富的轻应用模板，包括办公管理、
华为云Astro低代码平台能力_华为云Astro_低代码平台-华为云

华为云Astro低代码平台能力 华为云Astro低代码平台能力 华为云低代码平台Astro通过零码、低码、流程、大屏、智能助手、高低码结合，全方位助力客户实现企业数字化转型 华为云低代码平台Astro通过零码、低码、流程、大屏、智能助手、高低码结合，全方位助力客户实现企业数字化转型
免费的低代码开发平台_低代码平台_华为云Astro-华为云

教您在AstroZero中如何使用事件 低代码开发精选推荐 低代码平台Astro 低代码开发平台 低代码平台Astro 低代码开发平台好用吗 微服务引擎CSE Nacos引擎 微服务平台 Nacos注册配置中心 云应用引擎CAE 免运维开发 Web应用托管 微服务应用托管 区块链服务BCS 数字营销技术平台 区块链典型技术架构
低代码开发平台_华为云低代码_Astro Zero

低代码开发平台 低代码开发平台 华为云Astro Zero是零代码和低代码开发平台，源于华为应用开发和数字化转型的实践，提供了云上零码化、低码化、支持多码化的应用开发模式，屏蔽了技术的复杂性，提升了企业开发的效率。同时提供应用资产的开发标准和微服务框架，助力企业不断沉淀可复制的套
Astro低代码平台关键能力_低代码开发平台_华为云Astro-华为云

教您在AstroZero中如何使用事件 华为云低代码精选推荐 低代码平台Astro 低代码开发平台 低代码平台Astro 低代码开发平台好用吗 微服务引擎CSE Nacos引擎 微服务平台 Nacos注册配置中心 云应用引擎CAE 免运维开发 Web应用托管 微服务应用托管 区块链服务BCS
低代码工作流_业务流程管理系统_低代码平台-华为云

低代码工作流 低代码工作流 工作流即业务流程管理，源自业界工作流N 2.0标准。低代码平台基于该规范实现了自己的业务流程管理系统，由于工作流本身已成为了业界一套行业规范，因此在低代码平台中称实现此类流程的引擎为工作流。与服务编排类似，工作流也是一套图形化的流程编排引擎，但是工作流
低代码开发简易出差审批应用_低代码平台_华为云Astro-华为云

低代码平台Astro 低代码开发平台 低代码平台Astro 低代码开发平台好用吗 微服务引擎CSE Nacos引擎 微服务平台 Nacos注册配置中心 云应用引擎CAE 免运维开发 Web应用托管 微服务应用托管 区块链服务BCS 数字营销技术平台 区块链典型技术架构 区块链应用的判断准则 云日志服务LTS

华为云低代码平台

操作场景

华为云Astro轻应用低代码平台为组件设计了事件-动作机制，实现组件与组件、组件与页面之间的交互。

  • 事件是应用在运行时，页面内发生的动作或者用户执行的操作（例如单击组件、组件加载等）。
  • 动作是响应事件后，按照设定的方式，对事件做出回应（如页面跳转）。例如，用户在网页上单击一个按钮，通过显示一个信息框来响应这个动作。

本章节将向您介绍华为云Astro轻应用低代码平台预置的常用事件及动作，以及在高级页面中如何为组件配置事件。

初识事件-动作

  1. 查看组件可配置事件列表。

    以雷达图组件为例，在画布中拖入并选中雷达图组件，在右侧“组件属性设置”栏中选择“事件”页签，会显示当前组件可配置的事件列表。

    图1 事件配置示例
    表1 预置事件列表

    事件名称

    事件说明

    点击

    通过鼠标左键，单击该组件时触发。

    双击

    通过鼠标左键，双击该组件时触发。

    右击

    通过鼠标右键，单击该组件时触发。

    右双击

    通过鼠标右键，双击该组件时触发。

    鼠标滑过

    鼠标光标滑过该组件时触发。

    组件加载

    组件加载完成后触发。

    单击组件标题

    单击组件标题时触发。

    当点击图例时

    单击图例时触发。

    当点击数据时

    单击数据时触发。

    图1所示的“跳转页面”事件，并非低代码平台预置的事件，而是在“雷达图”组件中注册的事件，当单击该组件标题时触发。即事件列表中也会展现该组件注册的事件，用于配置。组件中如何注册事件，请参见通过事件动作实现高级页面内组件的交互。

    事件在开发态（高级页面编辑页面）不能触发，只有在页面的运行态（应用运行状态或预览页面）才能触发生效。

  2. 配置事件触发时的响应动作。

    单击事件名称后的，在弹出的“事件编辑”页面，可配置该事件触发时的响应动作。

    图2 配置事件示例
    • “事件编辑”弹窗说明
      如下图所示，其中标签1“新建动作”按钮，可为当前事件添加响应动作，标签2为当前事件已配置的动作列表，可在列表中操作列对其再次编辑或删除。
      图3 事件编辑弹窗
    • 预置动作说明
      图4 动作列表示例

      如上图所示，当单击“新建动作”按钮后，可展现当前事件可配置的动作列表。

      表2 预置动作列表

      动作类别

      动作名称

      详细说明

      默认

      页面跳转

      跳转至其他页面，配置参数说明：

      • 页面类型：设置待跳转的页面是当前应用中的标准页面、高级页面或外部页面。
      • 高级页面、标准页面、外部页面：选择高级页面、标准页面或输入外部页面的地址。
      • 动作参数：通过页面宏传递参数，可暂且不关注。
      • 页面打开方式：设置跳转页面的打开方式，可选项包含当前浏览器窗口打开或新窗口打开。

      显示组件

      选择要显示的组件。

      隐藏组件

      选择要隐藏的组件。

      自定义

      自定义动作

      自定义动作可通过代码，实现响应动作的逻辑。

      //var flag=true 
//{widgetxxx}.flag=flag;
console.log('测试自定义动作');

      BPM动作

      提交实例

      工作流中一个重要的内容就是用户任务，而用户任务所有的交互都是通过页面实现的。工作流与页面的交互模式采用了业界“依赖反转”的设计模式。一般情况下，页面之间的跳转应该在页面的事件代码中定义，但在页面上是无法确定下一步应该做什么，因此，又需要依赖工作流进行页面的跳转，即“依赖反转”。这种做法的好处在于，可以复用页面而无需考虑页面的下一步是什么。

      在高级页面的自定义事件中，内置了一些交互的API，但由于高级页面使用了懒加载的方式，故其API表达为闭包形式：

      • 获取变量： $工作流(op => op.loadVariables(variables))
      • 提交实例： $工作流(op => op.submitInstance(variables))
      • 提交任务： $工作流(op => op.submitTask(variables))
      • 更改变量： $工作流(op => op.putVariables(variables))
      另外，在高级页面的自定义组件的JS文件中，也可以通过以下代码即可触发名称为“test工作流”的工作流流程，并将“test1”作为“val”变量的值传到工作流流程中。 
      $工作流(op => op.submitInstance({
   "name": "test工作流",
   "variables":{
      "val": "test1"
   }
}))

      提交任务

      转派任务

      更改变量

      图4中所示的“满月饼图”动作，并非低代码平台预置的动作，而是在“满月饼图”组件中注册的动作，即动作列表中也会展现在画布中所有组件注册的动作，用于配置。组件中如何注册事件，请参见同页面内组件的交互。

  3. 配置完成后，单击页面上方的，保存页面。
  4. 单击，进入预览页面，查看已配置的事件和动作是否能正常触发。

自定义组件中事件、动作

如果AstroZero低代码平台预置的事件与动作不能满足您的开发需求，还可以在组件中对其进行自定义，以实现业务逻辑。

AstroZero低代码平台提供的组件模板中，包含了事件和动作的模板组件（widgetEventTemplate、widgetActionTemplate）。在环境配置的“维护 > 全局元素 > 页面资产管理 > 组件模板”中，可查找并下载组件模板。如何下载组件模板，请参见管理组件模板

图5 事件、动作组件模板

组件模板中包含多种功能的示例组件，可以参考组件模板开发自定义组件，组件模板的下载及说明请参见在线开发华为云Astro轻应用高级页面自定义组件。

在组件模板代码中，包含低代码平台定义的事件、动作的注册和触发API（应用程序接口），详细介绍如表3所示。

表3 事件、动作API说明

类型

函数

功能及参数描述

事件

Studio.registerEvents(

thisObj,

"eventName",

"Event Label",

[]

);

低代码平台定义的注册事件的API，只有通过此API注册后的事件，才会在组件的事件列表中展现。

  • thisObj：当前组件实例对象，指为该组件注册事件。
  • "eventName"：事件名称，应该与触发事件API中的第一个参数保持一致。
  • "Event Label"：事件标签名，在事件列表中展示的事件标题。
  • []：定义该事件触发时传递的参数模型，例如[{"name": "param"}] 。

thisObj.triggerEvent(

"eventName",

{}

);

低代码平台定义的触发事件的API。

  • "eventName"：指定触发的事件名称。
  • {}：为事件触发时传递的参数赋值，例如{param: value}。

动作

Studio.registerAction(

thisObj,

"actionName",

"Action Label",

[],

$.proxy(this.receiveActionCbk, this),

[]

);

低代码平台定义的注册动作的API，只有通过此API注册后的动作，才会在组件的动作列表中展现。

  • thisObj：当前组件实例对象，指为该组件注册动作。
  • "actionName"：动作名称。
  • "Action Label"：动作标签名，在动作列表中展示的动作标题。
  • []：事件触发时传入的参数。
  • $.proxy(this.receiveActionCbk, this)：该动作的回调函数，在回调函数中定义该动作的执行逻辑。
  • []：此参数在开发过程中置为空数组即可。

本章节以模板组件widgetEventTemplate、widgetActionTemplate为例，向您介绍上述关于事件和动作API的使用方法。

在事件和动作的模板组件中，主要实现如下图所示。单击widgetEventTemplate中的“trigger Event”按钮，可将此组件输入框中的文本传递给widgetActionTemplate组件，在widgetActionTemplate组件中执行动作，将文本显示到该组件的输入框中。

图6 事件、动作组件示例

其主要实现如下：

  • widgetEventTemplate组件

    在“widgetEventTemplate.js”文件中注册名称为“sendEvent”的事件，并在单击“trigger Event”按钮时触发“sendEvent”事件，代码如下所示。

    • 注册“sendEvent”事件 
      var sendEventConfig = [{
    "name": "param1",
    "displayName": "Param1"
}];
Studio.registerEvents(
    thisObj,
    "sendEvent",
    "Send Event",
    sendEventConfig
);
    • 在“trigger Event”按钮的单击事件中，触发“sendEvent”事件。 
      $("#triggerEvent", elem).bind('click', function () {
     if ($("#eventParam", elem).val()) {
         thisObj.triggerEvent("sendEvent", {
             param1: $("#eventParam", elem).val()
         });
     }
})
  • widgetActionTemplate组件

    在widgetActionTemplate组件“widgetActionTemplate.js”文件中注册“receiveAction”动作，并定义“receiveActionCbk”作为该动作的回调函数，设置输入框的值。

    • 注册“receiveAction”动作。 
      Studio.registerAction(
    thisObj, 
    "receiveAction", 
    "Receive Action", 
    [], 
    $.proxy(this.receiveActionCbk, this), 
    []
);
    • 定义“receiveActionCbk”回调函数。 
      receiveActionCbk: function(data){
    var thisObj = this;
    var elem = thisObj.getContainer();
    $("#receivedParam",elem).val(data.eventParam.param1)
}

同页面内组件的交互

将模板组件widgetEventTemplate、widgetActionTemplate上传至组件库，并在高级页面中测试。

  1. 参考上传自定义组件中操作，上传组件模板widgetEventTemplate、widgetActionTemplate。
  2. 上传组件后，打开一个高级页面，在组件列表中将已上传的组件，拖拽到画布中。

    图7 使用事件、动作组件模板

  3. 配置事件、动作。

    选中组件widgetEventTemplate，在“事件”页签下单击“sendEvent”后的，选择“新建动作 > widgetActionTemplate (widget数字) > Receive Action”。

  4. 单击页面上方的，保存页面。
  5. 保存成功后，单击，发布页面。
  6. 成功发布后，单击 ，进入预览页面，查看效果。
查看更多 >>

华为云低代码平台常见问题

更多常见问题 >>

华为云低代码平台教程视频

最佳实践视频帮助您快速了解搭建流程 了解更多

更多相关专题
查看更多 收起
更多精彩内容
L实例 短信批量发送 SSL证书是什么 SSL免费证书申请 国外CDN加速 网站建设搭建