云服务器内容精选

  • 步骤2 创建WebSocketAlarmFlow告警服务编排 创建WebSocketAlarmFlow告警编排以触发事件,并在服务编排中配置全局变量和系统(日期/时间)变量为事件传递参数。 如果想快速了解和验证WebSocket使用,可不必创建WebSocketAlarmFlow告警服务编排,采用消息事件的测试功能进行简单验证。您可以直接跳过该步骤,直接执行步骤3 开发alarmDisplayWidget告警展示组件,并在方法一:直接触发事件验证中采用方法1(直接触发事件验证)进行效果验证。 创建编排。 参考如何登录新版应用设计器中操作,登录新版应用设计器。 在左侧导航栏中,选择“逻辑”。 单击编排的,进入添加服务编排。 选择“创建一个新的服务编排”,输入标签“WebSocketAlarmFlow”,单击“添加”。 单击名称对应的输入框,系统会根据标签自动生成名称。 图6 创建服务编排WebSocketAlarmFlow 在服务编排画布左侧,单击“基本”,将“发送事件”图元拖入画布中。 图7 拖入“发送事件”图元 添加添服务编排变量。 选中“发送事件”图元,单击画布右侧。 单击“全局上下文”,进入上下文页面。 单击“变量”后的,添加表4中变量。 图8 配置全局变量 表4 告警服务编排的变量 名称 数据类型 AlarmTitle 文本 AlarmContent 文本 在“发送事件”图元中,配置1中创建的事件CNAME__WebSocketAlarmEvent__e(需替换为用户实际创建的事件名称)。 参考下图配置输入参数,通过全局变量AlarmTitle和AlarmContent及系统变量$Flow.CurrentDateTime为事件传参。 图9 事件图元的配置 连接所有图元。 图10 连接图元 选中“开始”图元,单击,参考下图配置服务编排的入参。 入参是从全局上下文的变量中拖入,告警服务编排的入参有AlarmTitle和AlarmContent两个。 图11 配置入参 单击页面上方的,保存服务编排。 单击,启用服务编排。 服务编排只有启用后,才会生效。服务编排在启用后,不可编辑,若需要对其中的图元或参数进行修改,请先单击,禁用该服务编排。
  • 步骤1 创建WebSocketAlarmEvent告警事件 创建事件。 参考如何登录新版应用设计器中操作,登录新版应用设计器。 在左侧导航栏中,选择“数据”。 单击事件后的,进入添加事件页面。 选择“创建新事件”,输入标签“WebSocketAlarmEvent”,单击“添加”。 单击名称对应的输入框,系统会根据标签自动生成名称。系统实际创建的事件名称为“CNAME__WebSocketAlarmEvent__e”,其中“CNAME__”为租户命名空间namespace,“__e”后缀代表是自定义事件。 图3 添加WebSocketAlarmEvent事件 在事件详情页面,选择“自定义参数”页签,单击“新建”。 设置标签、名称和字段类型,单击“保存”,添加事件自定义参数AlarmTitle。 图4 添加事件自定义参数 重复3中操作,创建事件自定义参数AlarmContent、AlarmDate。 表3 事件自定义参数说明 标签 名称 字段类型 AlarmContent 单击名称对应的输入框,系统根据标签自动生成名称。 文本 AlarmDate 单击名称对应的输入框,系统根据标签自动生成名称。 日期/时间 启用告警事件。 在事件详情页面,选择“基本信息”页签。 单击页面右上方的“启用”,启用该事件。 启用成功后,“启用”按钮会变为“禁用”按钮,同时“是否启用”标签变为状态。 图5 启用告警事件 消息事件只有启用成功后,该事件在服务编排或WebSocket中,才会有效。事件启用后,不可编辑,若需要对事件进行参数修改,请先单击“基本信息”下的“禁用”按钮,禁用该事件。
  • 高级页面开发框架 在开发高级页面过程中,主要涉及组件、库、桥接器、事件和动作等相关内容。组件、库、桥接器、事件和动作之间的关系,可概述为: 组件为高级页面的元素,组件的可复用性可以大幅提高开发效率。 组件的事件-动作机制提升页面的灵活度,使得组件与组件、组件与页面之间可以交互。 库作为组件的依赖,便捷的引用机制,降低了组件开发的复杂度且丰富了组件的功能。 组件可以通过桥接器调用后台接口,获取数据。 低代码平台通过组件、库、桥接器三类资产以及“事件-动作”机制,构建了高级页面的基本框架。 图6 组件、库、桥接器关系图 组件 组件是可复用的高级页面组成元素,一个高级页面由一个或多个组件搭建而成,可以通过拖拽组件快速搭建高级页面。如果将一个高级页面看成拼图游戏的完整图案,那么组件相当于拼图的每一小块。高级页面与组件的关系,如图6所示,其中Page为高级页面,Widget为高级组件。 图7 高级页面与组件的关系 高级页面中的组件,包括如下两类: 全局高级组件 全局高级组件是低代码平台为开发者提供的常用组件,主要包含图表、媒体(图片、视频)和文本等。更多关于全局高级组件的介绍,请参见全局高级组件。 自定义组件 若全局高级组件不能满足开发需求,低代码平台支持用户自定义组件。自定义组件开发方式,主要包含以下几类: 对全局高级组件的二次开发 低代码平台支持开发者下载全局组件,并在其基础上进行二次开发(如修改组件样式、逻辑等),完成后上传为自定义组件。通过这种方式,可以大幅度降低组件开发的工作量,详情请参见开发高级组件。 通过组件模板开发 若全局高级组件中,未包含所需要的组件类型,可以基于低代码平台提供的组件模板进行自定义组件的开发。组件模板中已为您构建组件的基本架构,详情请参见开发高级组件。 库 库是支撑高级组件运行的第三方依赖,若缺少相应的库,则组件不能正常运行。如果高级组件需要使用前端框架或组件库,例如流行的Vue(已预置)、Bootstrap、Element(已预置)等,需要将其制作成库资产,再上传到环境中使用。系统预置库及第三方库的引入方法,请参见如何引入第三方库。 桥接器 在进行前台页面开发时,经常要调用后台数据,例如购物车中用户的ID、订单编号、商品信息等。这时需要通过桥接器调用后台API,获取后台数据,详情请参见如何调用后台接口。 事件和动作 事件和动作都是组件的配置属性,用于实现组件之间的交互。例如,单击某个组件内的按钮,另外一个组件需要进行数据更新操作,或者是需要跳转到当前应用下的其他高级页面,这时需要通过事件和动作的机制来实现。单击按钮即是触发一个事件,数据更新操作或者页面跳转操作是一个动作,详情请参见如何实现组件交互。
  • 初识高级页面开发界面 进入新版应用设计器的“界面”,单击高级页面后的“+”,即可新建一个空白高级页面或基于页面模板创建一个高级页面。页面创建后,自动进入高级页面开发界面,您可以阅读以下内容初步了解高级页面。 图1 高级页面开发界面 高级页面开发工作台,功能模块布局说明如下: 高级页面工具栏(序号1) 展示页面开发过程中的常用工具,如保存、发布,电脑端或者移动端页面设置等。 组件列表:用于展开、收起高级组件列表。 电脑端\移动端:为了让同一页面能够完美呈现于电脑端和移动端,低代码平台提供了高级页面的电脑端和移动端两种终端视图,用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL,当电脑端或移动端加载这一URL时,平台会自动检测用户所用的设备类型并加载相应视图页面。多终端适配的详细介绍,请参见如何适配多终端。 保存:保存当前开发页面的修改。 发布:发布当前开发的页面,页面发布后可以预览该页面的运行态效果。 页面修改、保存后,需再次执行发布操作,才能在应用和预览页面中体现修改内容。 预览:页面发布后,可以预览该页面运行态效果。 发布模板:页面开发完成后,可将该页面发布为模板。 撤销\复原:页面开发过程中若出现误操作,可执行撤销、复原操作。 性能分析:低代码平台支持检查高级页面性能,生成性能报告页供开发者查看。 高级页面缩放比例:用于调节页面画布在开发工作台中的大小比例。 自动适应大小:自动适应页面画布在开发工作台中的大小比例。 网格线:开启画布网格线功能,用于标定组件在画布中的位置。 页面视图设置:设置高级页面的分辨率、网格大小、背景颜色和背景图片。 页面状态设置:设置页面的状态。 组件分类列表(序号2) 包含高级组件的功能分类,用于在开发高级页面时对组件进行筛选,方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等,可选择相应的分类来筛选高级组件。 高级组件展示、选择区域(序号2、3) 选定组件分类后,属于该功能分类的组件将显示在该区域。在该区域中,还包含了搜索框、应用场景、预置和自定义多种筛选条件。 搜索框:通过组件名称,可快速查询归属于当前选定组件分类中的高级组件。 应用场景筛选:可快速筛选不同应用场景的高级组件,当前应用场景包含通用、智慧园区、5G消息和其他等。 预置和自定义筛选:用于筛选当前选定组件分类中,包括预置组件和用户自定义组件。 预置组件是低代码平台提供的全局高级组件,详情请参见全局高级组件。自定义组件为用户自主开发的高级组件,详情请参见开发高级组件。 画布 编辑页面内容及页面视图区域,可将组件从高级组件展示选择区域拖入该区域,快速搭建高级页面。此处以绝对布局方式的高级页面为例,流式布局相关操作方法请参见流式布局高级页面。 定位到所需组件后,便可以将其拖动到画布中,用于构建所需的高级页面。 图2 拖拽组件到画布中 在画布中,可以通过拖拽的方式调整组件的位置、大小。低代码平台还提供了组件对齐提示线,帮助布局组件。 图3 调整组件 组件的右键设置:在画布中选中组件,单击鼠标右键会弹出删除、复制、粘贴(若已复制组件)、格式刷、置于顶层、置于底层、高级设置选项。 删除:删除当前选中的高级组件,也可通过键盘中BackSpace键(退格键)和Delete键(删除键)实现。 复制:复制当前选中的高级组件,也可通过快捷键Ctrl+C实现。 粘贴:用于粘贴已复制的高级组件,也可通过快捷键Ctrl+V实现。 格式刷:用于复制当前选中组件的属性,应用于其他组件。可选的属性包含样式(边框、背景)、位置(距左、距上、高度、宽度)和其他属性。选定所需格式刷内容后,光标会变成刷子样式,单击所需格式刷组件即可。 图4 格式刷操作示例 置于底层/顶层:用于设置当前选中高级组件的堆叠顺序,即CSS中的z-index属性。仅绝对布局类型的高级页面,存在该设置选项。 高级设置:用于设置当前组件的样式属性,全局高级组件详情介绍,请参见全局高级组件。 组件属性设置区域 未选中画布中任何组件时,此模块显示内容为“当前视图组件列表”即当前页面中所布局的组件列表。您可以通过选择画布中或列表中的组件,切换到该组件的“组件属性设置”栏,进行当前选中组件的属性设置、数据设置、事件绑定和路由设置。 图5 组件属性设置操作示例 属性设置:组件基本属性设置,支持在自定义组件中添加自定义属性,详细介绍请参见开发高级组件。 数据设置:设置组件绑定的桥接器,以实现通过桥接器调用后台接口,获取后台数据,详情请参见如何调用后台接口。 事件绑定:设置在运行态,对该组件相关操作的事件触发的具体动作,详情请参见如何实现组件交互。 路由设置:当前该功能主要用于流式布局类型高级页面中的“路由导航”组件。
  • 如何快速创建一个高级页面 以构建包含基本柱图组件的高级页面为例,向您介绍如何快速搭建高级页面。 新建高级页面。 参考如何登录新版应用设计器中操作,登录新版应用设计器。 在左侧导航栏中,选择“界面”。 单击高级页面后的,设置标签和名称,单击“添加”。 图8 添加高级页面 在应用中首次创建高级页面时,才会显示“视图”选项。 搭建高级页面。 在高级页面开发界面,单击,打开组件列表。 从组件列表中,拖拽基本柱图组件到画布中,按需调整组件的位置和大小。 图9 搭建高级页面 进行组件属性配置。 以修改组件的图表数据为例,向您介绍如何进行组件属性配置。 选中基本柱图组件,在组件属性设置中,单击“数据”页签。 在桥接器实例中,选择“折柱图数据桥接器”,数据类型选择“静态数据”,并在静态数据中拷贝如下示例。 图10 组件数据设置 { "resCode": "0", "resMsg": "成功", "result": [{ "order": { "dataX": [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24" ], "dataValue": [{ "title": "入园人数", "value": [ 20, 30, 45, 20, 60, 80, 140, 200, 145, 40, 70, 60, 80, 16, 87, 77, 60, 20, 60, 80, 55, 68, 70, 24 ] }, { "title": null, "value": [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { "title": "出园人数", "value": [ 90, 60, 30, 20, 10, 110, 140, 87, 64, 45, 11, 24, 80, 14, 98, 35, 41, 14, 45, 80, 31, 22, 23, 24 ] } ] } }] } 返回高级页面开发界面,单击页面上方的,保存页面。 预览和发布高级页面。 页面创建完成后,可直接单击高级页面上方的,预览页面,也可以单击,发布高级页面。
  • 什么是高级页面 高级页面是由一个或者多个组件拼装而成。高级页面可以使用Widget组件进行组装和配置,方便用户达到自己想要的效果。高级页面支持多种框架,支持代码开发,比较自由,多用于对页面效果要求高的场景。 高级页面主要用于开发应用中较复杂的前端页面,例如包含图片、图表、视频、地图等元素的页面。您可以将高级页面应用于开发网站、电商平台等,通过拖拽、布局组件,并进行相关属性配置即可快速搭建应用。低代码平台中的高级页面,提供了常用组件,组件包含了预置的样式,并封装了基础事件代码,实现了开箱即用,避免重复写样式和事件代码,陷入代码细节,使开发人员更好的专注于业务场景的挖掘。
  • 开发流程 序号 步骤 说明 1 下载基线组件 下载基线组件zip包到本地。 具体操作请参见下载基线组件。 2 参考基线组件开发新组件 开发前,先替换组件包中的文件名称,以及文件内容中的组件名称,全部替换为新组件的名称。 具体操作请参见参考基线组件开发新组件。 3 上传新组件 打包上传到AppCube的全局组件。 具体操作请参见上传新组件。 4 开发页面 使用新组件开发高级页面。 具体操作请参见开发页面。 父主题: 基于基线应用组件开发高级页面
  • 解决方法 当组件中定义的桥接器属性设置的model值和桥接器中定义的model值相同时,桥接器实例选项可选到这些桥接器。 例如,查看组件editor.js文件中model值为“SingleRepireDataViewModel”,查看“折柱图数据桥接器”和“柱状图和折线图数据桥接器”的“packageinfo.json”文件中model值同样为“SingleRepireDataViewModel”。 图2 组件中model值 图3 桥接器包中model值