云服务器内容精选

  • 管理页面级数据源、全局状态 页面组件之间,可以通过配置事件和动作进行信息交互。当页面组件较多,且需要进行信息交互时,频繁的给每个组件去定义事件或动作就比较繁琐了。此时,可以通过定义全局状态,来实现页面级所有组件中数据信息的更新。 AstroZero低代码平台高级页面支持设置全局状态,通过页面级内存方式共享数据,即采用集中式存储管理页面所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单的理解就是全局状态,可理解为页面中所有组件的共享状态,不管组件在页面的哪个位置或层级,任何组件都能获取状态或触发状态改变的动作。全局状态相当于全局变量,属性是私有的,需要在组件的js文件中,使用预置的“this.$mstore.dispatch”方法,来修改状态数据。 思考:什么情况下,应该使用全局状态? 解惑:当页面组件构成比较简单,组件间不需要频繁的进行信息交互时,不需要设置全局状态。反之,则建议使用全局状态,通过设置并使用全局状态,可以帮助您管理页面所有组件的共享状态。 参考登录AstroZero新版应用设计器中操作,登录应用设计器。 在左侧导航栏中,选择“界面”。 在高级页面中,单击对应的页面,进入高级页面开发界面。 在页面右上角,单击,定义全局状态。 定义全局状态使用JavaScript编程语言,不支持TypeScript。全局状态结构固定以MStore命名,每个页面仅包含一个全局状态实例,方便在组件调试的过程中,轻易的获取整个当前页面状态的快照。全局状态的结构定义由以下三部分组成: state:定义页面所有组件的初始状态数据,即页面中所有组件共享状态的初始数据源。 mutations:状态变更的唯一方法是提交mutation。mutation以声明的方式,将state变化映射到视图,每次state的变更都需要定义一个mutation。mutation使用对象风格的提交方式,整个对象都作为载荷(payload)传给mutation函数,mutation都是同步事务。 actions:通过actions执行状态数据变更,用于衔接state和mutation。Action可以包含任意异步操作,通常用于绑定状态和组件,可以调用服务。 在页面的组件js文件中,使用预置的“this.$mstore.dispatch()”方法,修改状态数据。
  • 克隆高级页面 页面创建完成后,支持将高级页面克隆到当前应用中。例如,应用A中存在两个或多个功能类似的高级页面,此时可基于已创建的高级页面克隆出一个新页面,基于克隆后的页面进行修改,减少重复创建的操作。 参考登录AstroZero新版应用设计器中操作,进入应用设计器。 在应用设计器的左侧导航栏中,选择“界面”。 将鼠标放在对应的高级页面上,单击,选择“克隆”。 输入高级页面的名称和唯一标识,单击“确认”。 克隆成功后,自动进行克隆后的高级页面。
  • 设置高级页面基本信息 高级页面创建后,支持设置高级页面的基本信息,如名称、路径名称、标题等。 参考登录AstroZero新版应用设计器中操作,进入应用设计器。 在应用设计器的左侧导航栏中,选择“界面”。 将鼠标放在对应的高级页面上,单击,选择“设置”。 在“基本信息”页签中,修改所需参数,单击“保存”。 表2 设置高级页面基本信息参数说明 参数 说明 名称 高级页面的名称,即创建高级页面时设置的名称,可根据实际需求进行修改。命名要求如下: 长度范围为1~100个字符。 必须以字母开头,由字母、数字或单下划线组成,且单下划线不能连续。 路径名称 路径名称和高级页面名称保持一致,可根据实际需求进行修改。命名要求如下: 长度范围为1~100个字符。 必须以字母开头,由字母,数字或单下划线组成。 标题 高级页面的标题,即创建高级页面时设置的标签,可根据实际需求进行修改。 描述 根据实际需求,在输入框中输入高级页面的描述信息。 关键字 用于和接口进行交互。 拉伸 勾选后,高级页面宽度会扩展至100%,以适应整个浏览器或设备的可视宽度,同时组件内容的宽度也会根据容器的宽度进行调整。默认为不勾选。 缩放和拖移 发布后的高级页面中,组件是否支持用户缩放或拖动。 默认为不勾选。 页面是否可定制修改 在扩展应用中,是否支持从依赖的应用中,将该高级页面导入。 默认为不勾选。 浏览器缓存有效期(天) 间隔多少天刷新一次浏览器缓存。
  • 为高级页面设置水印 高级页面创建后,支持为高级页面添加水印。水印可以用于标识页面的所有者、状态或其他相关信息,建议不要过多的设置水印,可能会影响页面的美观。 参考登录AstroZero新版应用设计器中操作,登录应用设计器。 在左侧导航栏中,选择“界面”。 将鼠标放在对应的高级页面上,单击,选择“设置”。 在“水印”页签,参照表1设置参数,单击“保存”。 图1 水印设置 图2 设置后效果 表1 新增水印参数说明 参数 说明 启用水印 是否给该页面启用水印。 重复渲染 当需要设置满页面水印时,开启该项。 水印内容 设置水印文本内容。 水印长度 水印矩形框的长度。 水印宽度 水印矩形框的宽度。 水平起始位置 当关闭“重复渲染”时,才可设置,表示单个水印在页面的水平起始位置。 垂直起始位置 当关闭“重复渲染”时,才可设置,表示单个水印在页面的垂直起始位置。 字体颜色 水印字体的颜色。 字体大小 水印字体的大小。 旋转角度 水印的旋转角度,取值范围-180~180,即逆时针或者顺时针旋转180度。 透明度 水印的透明度设置。
  • 步骤2 创建WebSocketAlarmFlow告警服务编排 创建WebSocketAlarmFlow告警编排以触发事件,并在服务编排中配置全局变量和系统(日期/时间)变量为事件传递参数。 如果想快速了解和验证WebSocket使用,可不必创建WebSocketAlarmFlow告警服务编排,采用消息事件的测试功能进行简单验证。您可以直接跳过该步骤,直接执行步骤3 开发alarmDisplayWidget告警展示组件,并在方法一:直接触发事件验证中采用方法1(直接触发事件验证)进行效果验证。 创建编排。 参考登录AstroZero新版应用设计器中操作,登录应用设计器。 在左侧导航栏中,选择“逻辑”。 单击编排的,进入添加服务编排。 选择“创建一个新的服务编排”,输入标签“WebSocketAlarmFlow”,单击“添加”。 单击名称对应的输入框,系统会根据标签自动生成名称。 图5 创建服务编排WebSocketAlarmFlow 在服务编排画布左侧,单击“基本”,将“发送事件”图元拖入画布中。 图6 拖入“发送事件”图元 添加添服务编排变量。 选中“发送事件”图元,单击画布右侧。 单击“全局上下文”,进入上下文页面。 单击“变量”后的,添加表4中变量。 图7 配置全局变量 表4 告警服务编排的变量 名称 数据类型 AlarmTitle 文本 AlarmContent 文本 在“发送事件”图元中,配置1中创建的事件CNAME__WebSocketAlarmEvent__e(需替换为用户实际创建的事件名称)。 参考下图配置输入参数,通过全局变量AlarmTitle和AlarmContent及系统变量$Flow.CurrentDateTime为事件传参。 图8 事件图元的配置 连接所有图元。 图9 连接图元 选中“开始”图元,单击,参考下图配置服务编排的入参。 入参是从全局上下文的变量中拖入,告警服务编排的入参有AlarmTitle和AlarmContent两个。 图10 配置入参 单击页面上方的,保存服务编排。 单击,启用服务编排。 服务编排只有启用后,才会生效。服务编排在启用后,不可编辑,如果需要对其中的图元或参数进行修改,请先单击,禁用该服务编排。
  • 步骤1 创建WebSocketAlarmEvent告警事件 创建事件。 参考登录AstroZero新版应用设计器中操作,登录应用设计器。 在左侧导航栏中,选择“数据”。 单击事件后的,进入添加事件页面。 选择“创建新事件”,输入标签“WebSocketAlarmEvent”,单击“添加”。 单击名称对应的输入框,系统会根据标签自动生成名称。系统实际创建的事件名称为“CNAME__WebSocketAlarmEvent__e”,其中“CNAME__”为租户命名空间namespace,“__e”后缀代表是自定义事件。 图2 添加WebSocketAlarmEvent事件 在事件详情页面,选择“自定义参数”页签,单击“新建”。 设置标签、名称和字段类型,单击“保存”,添加事件自定义参数AlarmTitle。 图3 添加事件自定义参数 重复3中操作,创建事件自定义参数AlarmContent、AlarmDate。 表3 事件自定义参数说明 标签 名称 字段类型 AlarmContent 单击名称对应的输入框,系统根据标签自动生成名称。 文本 AlarmDate 单击名称对应的输入框,系统根据标签自动生成名称。 日期/时间 启用告警事件。 在事件详情页面,选择“基本信息”页签。 单击页面右上方的“启用”,启用该事件。 启用成功后,“启用”按钮会变为“禁用”按钮,同时“是否启用”标签变为状态。 图4 启用告警事件 消息事件只有启用成功后,该事件在服务编排或WebSocket中,才会有效。事件启用后,不可编辑,如果需要对事件进行参数修改,请先单击“基本信息”下的“禁用”按钮,禁用该事件。
  • 操作场景 页面间组件的交互,除了需要事件-动作机制,还需要用到低代码中的页面宏。本章节通过具体示例,为您介绍页面间组件交互的方法。如图1所示,高级页面Page1中包含示例组件widgetEventTemplate,高级页面Page2中包含示例组件widgetPageMacroTemplate,单击Page1页面中的OK按钮,输入框中的数据会通过页面宏传递给Page2。 图1 页面间组件交互场景示例 页面间的组件交互原理如下图所示,在配置事件时,选择“默认”类别中的页面跳转,并通过新增动作参数将事件的参数传给页面宏,在跳转的目标页面中读取页面宏数据。 图2 Page传值原理 主要实现原理如下: widgetPageMacroTemplate 在widgetPageMacroTemplate.editor.js文件中定义页面宏数据。 propertiesConfig: [ { config: [ { "type": "text", "name": "pageMacro", "label": "Page Macro", "value": "${pm.pageMacro}", "validation": { "rules": {} } }] }]; 表1 页面宏数据配置项说明 配置项 参数说明 propertiesConfig 配置组件的自定义属性。 type 配置项的数据类型,本例中配置为text(文本)。 name 配置项的变量名称,本例中设置为“pageMacro”。通过获取组件自定义配置属性的API,来获取该值。 label 配置项的展示标签。 value 配置项的默认值,本例中设置为${pm.pageMacro}。 其中,pageMacro为页面宏变量名,${pm.}为低代码平台定义的固定语法。 validation 无需关注此配置项。 在widgetPageMacroTemplate.js文件中读取页面宏数据,并将其显示到页面中。 var widgetProperties = thisObj.getProperties();//获取该组件自定义配置属性的API。 ... var pageMacro = widgetProperties.pageMacro || ""; $("#macro",elem).html(pageMacro); 上述示例代码中widgetProperties.pageMacro的PageMacro,即表1中name配置项设置的变量名称。 widgetEventTemplate:关于widgetEventTemplate的介绍,请参见通过事件动作实现AstroZero高级页面内组件的交互。
  • 高级页面组件分类 高级页面支持的组件类型,以及每个类型下所包含的具体组件,如表1所示。通过该表,可帮助您快速了解各组件的位置分类,更加高效的开发高级页面。当预置组件不满足需求时,还可以自定义组件并上传到高级页面中使用,详情请参见为AstroZero高级页面添加自定义组件。 表1 高级页面预置组件 组件类型 组件 图表 饼图:通过饼图的形式,将数据信息清晰的展示在页面上。包括实心圆饼图、轮播饼图、满月饼图、基本饼图、贪吃蛇饼图、玫瑰花饼图和渐变色饼图。 线状图:通过折线变换的形式,对数据进行展现,可直观展示数据的变化趋势。包括区域图、多区域折线图、基本折线图和多折线图。 水位图:通过水位图的形式,用于匹配不同风格、场景的高级页面。包括水位图、箭头水位图、水滴水位图、钻石水位图、三角形水位图、圆角矩形水位图和矩形水位图。 柱状图:通过柱形图,来呈现数据整体的表现。包括进度条、水平基本柱图、水平堆叠柱图、折柱图、基本漏斗图、双向柱图、基本柱图、数据标记柱图、瀑布柱图和热力图。 散点图:使用气泡形状,来展现数据的大小分布情况,包括散点图和气泡图。 雷达图:通过极坐标的展现形式,使用围合的区域,来表示数据在不同维度的具体表现。 媒体 轮播:通过轮播的方式,来实现图片广告位的展示。 图片:用于直接展示需要呈现的图片数据。 视频播放器:用于播放FLV(Flash Video)格式的视频。 地图 地图:支持百度、谷歌、高德、超图、中地数码和伟岸纵横地图,其中高德地图支持3D模式。 可配置地图中心点、缩放级别、样式等属性。 可在地图上添加图标、信息窗口等覆盖物。 可进行路径规划。 文本 翻牌器:通过设置翻盘动画效果,来动态展示数据的变化过程。 通用表格:通过表格的方式,将数据信息以表格的形式清晰的展示在高级页面上。 时间展示:用于展示包含年月日、时分秒的全量时间,并可设置显示对应星期值。 文本编辑:用于显示多行文本,可对接数据集并设置交互。 装饰 自定义背景框:装饰组件的一种,包括大标题背景、小标题背景、页面背景和内容背景。可根据不同的设计需求,选择不同的背景框,以增加视觉效果。 仪表盘 仪表盘:通过仪表的特殊展示方式,对数据进行展示。 导航 路由视图:通过配置不同页面,在当前页面呈现其它页面效果。该组件可降低对当前页面资源的占用,提升性能。 路由导航(示例):通过配置不同的路由页面,快速切换和定位到其它的页面中,给数据页面提供更多的交互模式。 选项卡:用于快速在页面某区域中切换不同内容,显示为其关联内容上方的单行元素。 其它 用户自定义的组件会显示在“其他”中。
  • 操作场景 当AstroZero低代码平台提供的预置高级组件无法满足您的开发需求时,开发者可以自定义组件包,并上传到AstroZero中。自定义组件包上传到AstroZero中后,可在高级页面中使用。自定义组件的开发流程如下: 下载组件模板 将AstroZero系统预置的模板到本地。 开发自定义组件 基于下载的模板,在本地根据自身业务需求开发组件。 上传组件到组件库并使用组件 将开发完的自定义组件上传到组件库,并在高级页面中使用。
  • 自定义布局样式 如果导航页面,想实现如下图所示布局效果,即整个页面不需要有滚动条,而其中导航组件区域和全局路由视图组件区域可随滚动条滚动时,可参考如下步骤实现。 图12 自定义布局样式页面效果 在头部组件的“.css”样式文件中,指定头部组件的高度。 样例代码如下: #headerWidget { height: 90px; } 参考基于预置组件进行自定义中操作,下载预置组件路由导航(示例),解压global_NavigatorWidget_版本号.zip。 修改解压后的“Navigator_Widget.css”文件,该文件是Widget的样式文件,在该文件中编写Widget的css样式。 样例代码如下: html[app=desktop] body { overflow: hidden; } #navigatorWidget, #global_RouterViewWidget { height: calc(100% - 90px); overflow: scroll; } 将修改后的头部组件和组件路由导航组件文件,重新打成zip包。 参考基于预置组件进行自定义中操作,上传重新打包后的组件。 在高级页面设计器左上方,单击,拖出上传的头部组件、路由导航组件和预置的路由视图组件至设计页面。 单击页面上方的,保存页面。 保存成功后,单击,发布页面。 发布成功后,单击,可查看页面效果。
  • 创建高级页面 参考登录AstroZero新版应用设计器中操作,登录应用设计器。 在左侧导航栏中,选择“界面”。 (可选)单击高级页面后的,为高级页面添加目录。 高级页面默认存放在根目录下,在创建高级页面前,您可以先创建高级页面存放的目录,也可以在高级页面创建后将其拖拽到指定目录。 将鼠标放在已创建的高级页面目录上,单击,进入添加高级页面。 如果未创建高级页面目录,请直接单击高级页面后的,进入添加高级页面。 设置高级页面的基本信息,单击“添加”。 图1 新建高级页面 表1 高级页面参数说明 参数 说明 标签 输入高级页面的标签名,用于在页面显示,创建后可修改。 取值范围:1~100个字符。 名称 输入高级页面的名称,名称是高级页面在系统中的唯一标识,创建后不可修改。命名要求如下: 长度范围为1~100个字符。 必须以英文字母开头,只能由英文字母、数字或单下划线组成,且不能以下划线结尾。 视图 为了让同一页面能够更好的呈现于电脑端和移动端,低代码平台提供了高级页面的电脑端和移动端两种终端视图,用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL,当电脑端或移动端加载这一URL时,平台会自动检测用户所用的设备类型并加载相应视图页面。 默认为电脑端和手机端全部选中。 说明: 在应用中,首次创建高级页面时,才会显示“视图”参数。如果应用中已存在高级页面,则不会显示该参数。 描述 根据实际需求,在输入框中输入高级页面的描述信息。 取值范围:1~255个字符。 关键字 为了便于搜索高级页面,可以在此处自定义一些关键字。 布局类型 在AstroZero中创建高级页面时,提供了两种布局模式的页面布局供您选择,请按需进行选择。 绝对布局:在绝对布局中,每个组件可在页面中任意位置进行拖拽放置,组件的宽高可自定义设置。绝对布局常用于大屏页面的开发。 流式布局:在流式布局中,拖拽到页面中的组件,将根据从上到下、从左到右的顺序依次排列,组件的高度将根据组件内容大小进行自适应,宽度可按百分比进行配置。流式布局常用于常规Web应用开发,例如电商网站、管理网站等。 开发高级页面。 下面以开发一个绝对布局的高级页面为例,向您如何使用AstroZero快速开发一个高级页面。 图2 绝对布局类型高级页面组件布局示例 如上图所示,示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。 在高级页面右上方,单击,设置背景图片。 图3 设置页面背景色示例 查找并拖入该页面中包含的组件,通过拖拽进行位置、大小调整。 图4 拖拽所需的组件到画布中 设置文本编辑组件内容为“绝对布局类型高级页面”,字号为“大号”。 图5 设置文本编辑组件内容 通过组件属性,精确设置组件大小。 本例中,设置组件宽度为600px、高度为350px。 图6 精确设置组件大小 复制组件。 将上图左侧组件逐个复制,并将其拖拽到右侧,通过对齐提示线将其与左侧组件对齐。 图7 复制组件 单击页面上方的,保存页面。 单击,预览高级页面,查看当前页面在运行态的效果。 图8 预览高级页面
  • 位置 距离左端:组件到页面左侧的距离,单位为px。 距离顶端:组件到页面顶部的距离,单位为px。 宽度:组件的宽度,单位为px。 高度:组件的高度,单位为px。 堆叠顺序:设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”,数字越大,显示越靠前。当需要让组件置底时,可设置堆叠顺序为“0”。 自适应高度:组件的高度是否随宽度改变。 开启:勾选该按钮,下方可见页面适配功能。 页面适配:勾选页面适配下方的“开启”,表示组件开启自适应高度。该属性使页面其它位于其下方的组件,根据该组件的高度变化自动调整位置,一个页面只支持一个组件。
  • 边框 设置组件的边框样式,支持全边框和角边框两种。 全边框 样式:设置组件边框的样式,如实线、点线、虚线和双实线。 宽度:设置边框的宽度,单位px。 颜色:设置组件边框的颜色。 弧度:设置组件边框四个角的弧度,单位px。 角边框 宽度:设置组件边框的宽度,单位px。 长度:设置组件边框的长度,单位px。 颜色:设置组件边框的颜色。 弧度:设置组件边框四个角的弧度,单位px。 边距:设置组件边框和图表之间的间距,单位px。
  • 操作场景 在应用开发过程中,经常需要在高级页面组件中调用后台接口来完成整个业务场景(例如获取购物车中用户的ID,订单编号,商品信息等)。为方便用户调用可配置的API,平台提供了桥接器功能,桥接器封装了平台的一些逻辑,如csrftoken验证、数据共享、数据周期调用功能等。 AstroZero低代码平台预置了18个桥接器,其中的API数据桥接器、FLOW数据桥接器、SCRIPT数据桥接器和OBJECT数据桥接器为通用桥接器。在开发自定义组件时,可以根据API的类型引入使用。剩余的14个,为平台预置组件的桥接器,如地图、散点图等。如果预置的桥接器不能满足开发需求,还可以自定义开发桥接器进行上传使用。
  • 前台页面常用调测方法 在高级页面的开发中,常借助浏览器内置的 开发者工具 对样式或功能问题进行定位和分析。下面以Chrome浏览器为例,简单介绍浏览器开发者工具中常用的调测方法。在Chrome浏览器中,按下“F12”或者“Ctrl + Shift + I”,开启开发者工具。 DOM和 CSS 样式调试 在Elements面板,可以自由的操作DOM和 CS S,来迭代布局和设计页面。在开发者工具打开的状态下,使用左上角的箭头按钮,可点选页面元素,查看该元素DOM和CSS等。也可以在Elements页签下,修改页面上的元素的DOM标签或CSS样式(修改立即生效),实时查看修改后效果。 图1 Elements页签查看调试DOM和CSS样式 打印日志信息 在Console页签下,可使用控制台打印日志信息。在Sources页签下,调试JavaScript时常用方法是将多个console.log()语句插入代码,重新加载页面后,可以在Console页签中,查看到打印的消息。Sources页签主要包括三个部分,左侧为页面请求文件列表,中间为选择文件的文件内容,右侧为JavaScript调试窗格。 想要在JavaScript中打印日志,需要找到相应文件,查找相关代码,然后插入console.log()。 图2 Sources页签布局 调用低代码平台API 在Console页签下,可使用控制台调用低代码平台提供的API,以获取相关信息进行调试。 图3 调用低代码平台API 断点调试 在Sources页签下,可以设置断点来调试JavaScript。使用断点,DevTools会在暂停时及时显示所有变量值。Chrome开发者工具,提供了代码行断点、条件代码行断点、DOM断点和事件侦听断点等多种断点,请根据调测的实际需求选择合适的断点。断点的类型和使用场景,如表1所示。 表1 Chrome断点类型及使用场景 断点类型 使用场景 代码行 在确切的代码区域中。 条件代码行 在确切的代码区域中,且仅当其他一些条件成立时。 DOM 在更改或移除特定DOM节点或其子级的代码中。 XHR 当XHR网址包含字符串模式时。 事件 在触发点击等事件后运行的代码中。 侦听器 在引发已捕获或未捕获异常的代码行中。 异常函数 任何时候调用特定函数时。 代码行断点调试是最为常见的断点调试方法, 设置代码行断点的方法是找到请求文件,在Sources左侧请求文件列表按照目录查找,也可以借助“Ctrl+F”搜索关键词找到相关文件。在Sources中间文件内容区域,找到要设置断点的代码行,单击行号,出现蓝色图标,这意味着这行代码上有一个代码行断点。如图4所示,在global_BubbleChartWidget.js文件的49行代码处,设置了一个代码行断点。 刷新此网页,事件运行始终会在执行此行代码之前暂停,可单击右侧调试窗格的按钮进行单步调试,或者单击调试窗格的按钮继续执行事件。 图4 代码行断点示例 多终端测试 在进行页面自适应测试时,可采用Chrome开发者工具提供的模拟移动设备的功能。借助此功能,可无实物快速对网页进行多个终端测试。 单击,可启动模拟移动设备界面,设备工具栏在打开时默认处于自适应视口模式,可以将视口大小调整为所需的任何尺寸,另外还可以选择多种终端型号。 图5 模拟移动设备