云服务器内容精选
-
响应式组件开发基本原则 组件的响应式设计，是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式设计的基本原则。 根据内容设计 不专注于特定屏幕宽度，而是专注于内容设计，当屏幕越小或浏览器窗口越窄时，内容所占的垂直高度越来越多，内容就要向下方自然延伸。建议从小屏幕开始，逐步设置断点（例如设备宽度320px、768px、1024px），针对不同设备进行设计，形成流动布局。 针对复杂情况，可以使用 CSS 3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备，定义不同样式，选择应用不同的 CS S规则。只有当该设定媒体查询与正在使用的设备匹配时，其对应的CSS规则才起作用。 CSS语法如下： @media mediatype and|not|only (media feature) { CSS-Code; } 其中，参数说明如表1所示。 表1 @media语法参数说明 参数 值 说明 mediatype all 用于所有设备。 screen 用于电脑屏幕、平板电脑、智能手机等。 print 用于打印机和打印预览。 media feature aspect-ratio 定义输出设备中，页面可见区域宽度与高度的比率。 max-width 定义输出设备中，页面最大可见区域的宽度。 max-height 定义输出设备中，页面最大可见区域的高度。 min-width 定义输出设备中，页面最小可见区域的宽度。 min-height 定义输出设备中，页面最小可见区域的高度。 设置示例：对页面宽度不同的设备，设定不同背景颜色。 /*媒体查询*/ /*页面宽度大于1200px 时，背景颜色为蓝色，主要用于大屏设备*/ @media screen and (min-width: 1200px) { body { background-color:blue; } } /*页面宽度在992px和1200px之间，背景颜色为红色，用于中等屏幕PC端*/ @media screen and (min-width: 992px){ body { background-color:red; } } 避免固定尺寸 使用像px这样的绝对单位，来指定元素的宽高、边框和字体大小等，固定宽度容易破坏响应式布局。为了布局更加灵活，推荐使用百分比、em或rem等相对单位，这样可以保证浏览器字体大小调整和缩放时，能正常显示。常用相对单位，如表2所示。 表2 常用相对单位 单位 说明 em 在font-size中，使用相对于父元素的字体大小，在其他属性中使用相对于自身的字体大小，如width。 rem 相对根元素的字体大小。 ch 相对于数字“0”的宽度。 ex 相对于字符“x”的高度。 lh 相对于元素line-height计算值。 最大和最小值 对于大屏页面和移动端，内容扩充占满整个屏幕宽度并不总是适用的。展示同样的内容，手机端可能更适宜充满屏幕宽度，而大屏则需要在宽度上留出一定边界，使得布局上更加美观。所以，设定最大值或最小值，可以帮助您设计更为合理的布局。例如，组件宽度设定100%，最大宽度设定1024px，那么内容扩充的最大宽度即为1024px，当屏幕宽度超出1024时，内容在宽度上不会再继续扩展。 嵌套对象 对于关系紧密的多个元素，采用相对位置会使得元素难以控制。此时，可以考虑放置于同一容器中集中管理。在容器内部，可以考虑采用绝对单位固定其关系，这对于不需要扩展的按钮等元素来说非常有效。 图片的自适应 自适应组件设计还需要满足图片的自适应，可以使用max-width，对图片宽度进行限制，确保图片宽度不会超过浏览器窗口或容器可视部分的宽度。 移动优先 通常来说，移动端屏幕较小、视图简单，而大屏空间大、呈现更为复杂和多样。那么，从移动端小屏幕设计入手过渡到大屏幕设计，在开发中逐步增加CSS的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。
-
高级页面开发框架 在开发高级页面过程中，主要涉及组件、库、桥接器、事件和动作等相关内容。组件、库、桥接器、事件和动作之间的关系，可概述为： 组件为高级页面的元素，组件的可复用性可以大幅提高开发效率。 组件的事件-动作机制提升页面的灵活度，使得组件与组件、组件与页面之间可以交互。 库作为组件的依赖，便捷的引用机制，降低了组件开发的复杂度且丰富了组件的功能。 组件可以通过桥接器调用后台接口，获取数据。 低代码平台通过组件、库、桥接器三类资产以及“事件-动作”机制，构建了高级页面的基本框架。 图7 组件、库、桥接器关系图 组件 组件是可复用的高级页面组成元素，一个高级页面由一个或多个组件搭建而成，可以通过拖拽组件快速搭建高级页面。如果将一个高级页面看成拼图游戏的完整图案，那么组件相当于拼图的每一小块。高级页面与组件的关系，如图8所示，其中Page为高级页面，Widget为高级组件。 图8 高级页面与组件的关系 高级页面中的组件，包括如下两类： 全局高级组件 全局高级组件是低代码平台为开发者提供的常用组件，主要包含图表、媒体（图片、视频）和文本等。更多关于全局高级组件的介绍，请参见设置AstroZero高级页面预置组件属性。 自定义组件 如果全局高级组件不能满足开发需求，低代码平台支持用户自定义组件。自定义组件开发方式，主要包含以下几类： 对全局高级组件的二次开发 低代码平台支持开发者下载全局组件，并在其基础上进行二次开发（如修改组件样式、逻辑等），完成后上传为自定义组件。通过这种方式，可以大幅度降低组件开发的工作量，详情请参见为AstroZero高级页面添加自定义组件。 通过组件模板开发 若全局高级组件中，未包含所需要的组件类型，可以基于低代码平台提供的组件模板进行自定义组件的开发。组件模板中已为您构建组件的基本架构，详情请参见为AstroZero高级页面添加自定义组件。 库 库是支撑高级组件运行的第三方依赖，如果缺少相应的库，则组件不能正常运行。如果高级组件需要使用前端框架或组件库，例如流行的Vue（已预置）、Bootstrap、Element（已预置）等，需要将其制作成库资产，再上传到环境中使用。如何在高级页面中引入库，请参见使用AstroZero开发高级页面时如何引用第三方库。 桥接器 在进行前台页面开发时，经常要调用后台数据，例如购物车中用户的ID、订单编号、商品信息等。这时需要通过桥接器调用后台API，获取后台数据，详情请参见使用桥接器为AstroZero高级页面组件绑定数据。 事件和动作 事件和动作都是组件的配置属性，用于实现组件之间的交互。例如，单击某个组件内的按钮，另外一个组件需要进行数据更新操作，或者是需要跳转到当前应用下的其他高级页面，这时需要通过事件和动作的机制来实现。单击按钮即是触发一个事件，数据更新操作或者页面跳转操作是一个动作，详情请参见添加事件或宏实现AstroZero高级页面组件交互。
-
什么是高级页面 高级页面是由一个或者多个组件拼装而成。高级页面可以使用组件进行组装和配置，方便用户达到自己想要的效果。高级页面支持多种框架，支持代码开发，比较自由，多用于对页面效果要求高的场景。 高级页面主要用于开发应用中较复杂的前端页面，例如包含图片、图表、视频、地图等元素的页面。您可以将高级页面应用于开发网站、电商平台等，通过拖拽、布局组件，并进行相关属性配置即可快速搭建应用。低代码平台中的高级页面，提供了常用组件，组件包含了预置的样式，并封装了基础事件代码，实现了开箱即用，避免重复写样式和事件代码，陷入代码细节，使开发人员更好的专注于业务场景的挖掘。
-
初识高级页面开发界面 图1 高级页面开发界面 高级页面开发工作台，功能模块布局说明如下： 高级页面工具栏（序号1） 展示页面开发过程中的常用工具，如保存、发布，电脑端或者移动端页面设置等。 ：用于展开、收起高级组件列表。 /：为了让同一页面能够更好的呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面。 ：保存当前开发页面的修改。 ：发布当前开发的页面，页面发布后可以预览该页面的运行态效果。 页面修改、保存后，需再次执行发布操作，才能在应用和预览页面中体现修改内容。 ：页面发布后，可以预览该页面运行态效果。 ：页面开发完成后，可将该页面发布为模板。 /：页面开发过程中如果出现误操作，可执行撤销、复原操作。 ：低代码平台支持检查高级页面性能，生成性能报告页供开发者查看。 /：用于调节页面画布在开发工作台中的大小比例。 ：自动适应页面画布在开发工作台中的大小比例。 ：开启画布网格线功能，用于标定组件在画布中的位置。 ：设置高级页面的分辨率、网格大小、背景颜色和背景图片。 ：设置页面的状态。 组件分类列表（序号2） 包含高级组件的功能分类，用于在开发高级页面时对组件进行筛选，方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等，可选择相应的分类来筛选高级组件。 高级组件展示、选择区域（序号2、3） 选定序号2的组件分类后，属于该功能分类的组件将显示在序号3的区域。在该区域中，还包含了搜索框、应用场景、预置和自定义多种筛选条件。 搜索框：通过组件名称，可快速查询归属于当前选定组件分类中的高级组件。 图2 搜索框 应用场景筛选：可快速筛选不同应用场景的高级组件，当前应用场景包含通用、智慧园区、5G消息和其他等。 图3 应用场景筛选 预置和自定义筛选：用于筛选当前选定组件分类，包括预置组件和用户自定义组件。 预置组件是低代码平台提供的全局高级组件，详情请参见设置AstroZero高级页面预置组件属性。自定义组件为用户自主开发的高级组件，详情请参见为AstroZero高级页面添加自定义组件。 画布（序号4） 编辑页面内容及页面视图区域，可将组件从高级组件展示选择区域拖入该区域，快速搭建高级页面。下面以绝对布局方式的高级页面为例进行介绍。 定位到所需组件后，便可以将其拖动到画布中，用于构建所需的高级页面。 图4 拖拽组件到画布中 在画布中，可以通过拖拽的方式调整组件的位置、大小。低代码平台还提供了组件对齐提示线，帮助布局组件。 图5 调整组件 组件的右键设置：在画布中选中组件，单击鼠标右键会弹出删除、复制、粘贴（如果已复制组件）、格式刷、置于顶层、置于底层、高级设置选项。 删除：删除当前选中的高级组件，也可通过键盘中BackSpace键（退格键）和Delete键（删除键）实现。 复制：复制当前选中的高级组件，也可通过快捷键Ctrl+C实现。 粘贴：用于粘贴已复制的高级组件，也可通过快捷键Ctrl+V实现。 格式刷：用于复制当前选中组件的属性，应用于其他组件。可选的属性包含样式（边框、背景）、位置（距左、距上、高度、宽度）和其他属性。选定所需格式刷内容后，光标会变成刷子样式，单击所需格式刷组件即可。 图6 格式刷操作示例 置于底层/顶层：用于设置当前选中高级组件的堆叠顺序，即CSS中的z-index属性。仅绝对布局类型的高级页面，存在该设置选项。 高级设置：用于设置当前组件的样式属性，全局高级组件详细介绍，请参见设置AstroZero高级页面预置组件属性。 组件属性设置区域（序号5） 未选中画布中任何组件时，此模块显示内容为“当前视图组件列表”即当前页面中所布局的组件列表。您可以通过选择画布中或列表中的组件，切换到该组件的“组件属性设置”栏，进行当前选中组件的属性设置、数据设置、事件绑定和路由设置。 属性设置：组件基本属性设置，支持在自定义组件中添加自定义属性，详细介绍请参见为AstroZero高级页面添加自定义组件。 数据设置：设置组件绑定的桥接器，以实现通过桥接器调用后台接口，获取后台数据，详情请参见使用桥接器为AstroZero高级页面组件绑定数据。 事件绑定：设置在运行态，对该组件相关操作的事件触发的具体动作，详情请参见添加事件或宏实现AstroZero高级页面组件交互。 路由设置：当前该功能主要用于流式布局类型高级页面中的“路由导航”组件。
-
位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 开启：勾选该按钮，下方可见页面适配功能。 页面适配：勾选页面适配下方的“开启”，表示组件开启自适应高度。该属性使页面其它位于其下方的组件，根据该组件的高度变化自动调整位置，一个页面只支持一个组件。
-
边框 设置组件的边框样式，支持全边框和角边框两种。 图2 全边框 图3 角边框 全边框 样式：设置组件边框的样式，如实线、点线、虚线和双实线。 宽度：设置边框的宽度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 角边框 宽度：设置组件边框的宽度，单位px。 长度：设置组件边框的长度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 边距：设置组件边框和图表之间的间距，单位px。
-
设置数据系列 选择基本柱图组件，单击鼠标右键选择“高级设置”。 展开数据系列配置，单击旁边的“+”，添加数据系列。 图6 配置数据系列 在右侧“数据”页签，配置该数据系列的数据。 例如，在使用系统预置的静态数据基础上，添加如下加粗字体代码，配置新增数据系列的数据。也可以使用“动态数据”调用后台接口URL返回如下结构模型数据。 { "resCode": "0", "resMsg": "成功", "result": [{ "order": { "dataX": [ "保洁", "安管", "工程", "绿化", "消杀", "特约" ], "dataValue": [{ "title": "工单总数", "value": [ 411, 965, 427, 630, 85, 800 ] }, { "title": "费用", "value": [ 500, 1065, 327, 730, 185, 1000 ] } ] } }] } 配置添加的数据系列柱状条颜色、柱状条宽度、柱条边框圆角、数值是否显示，柱状图上显示的数值对应上述静态数据中的数值。 设置完成后，单击“确定”。
-
操作场景 AstroZero低代码平台为组件设计了事件-动作机制，实现组件与组件、组件与页面之间的交互。 事件是应用在运行时，页面内发生的动作或者用户执行的操作（例如单击组件、组件加载等）。 动作是响应事件后，按照设定的方式，对事件做出回应（如页面跳转）。例如，用户在网页上单击一个按钮，通过显示一个信息框来响应这个动作。 本章节将向您介绍AstroZero低代码平台预置的常用事件及动作，以及在高级页面中如何为组件配置事件。
-
操作场景 当AstroZero低代码平台提供的预置高级组件无法满足您的开发需求时，开发者可以自定义组件包，并上传到AstroZero中。自定义组件包上传到AstroZero中后，可在高级页面中使用。自定义组件的开发流程如下： 下载组件模板 将AstroZero系统预置的模板到本地。 开发自定义组件 基于下载的模板，在本地根据自身业务需求开发组件。 上传组件到组件库并使用组件 将开发完的自定义组件上传到组件库，并在高级页面中使用。
-
位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 开启：勾选该按钮，下方可见页面适配功能。 页面适配：勾选页面适配下方的“开启”，表示组件开启自适应高度。该属性使页面其它位于其下方的组件，根据该组件的高度变化自动调整位置，一个页面只支持一个组件。
-
边框 设置组件的边框样式，支持全边框和角边框两种。 全边框 样式：设置组件边框的样式，如实线、点线、虚线和双实线。 宽度：设置边框的宽度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 角边框 宽度：设置组件边框的宽度，单位px。 长度：设置组件边框的长度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 边距：设置组件边框和图表之间的间距，单位px。
-
高级设置 在高级设置中，可设置轮播时长、切换方式等。 图2 高级设置 轮播设置 切换方向：广告图片的轮播切换样式，支持横向滚动切换、右下角滚动切换和纵向滚动切换。 加载自动播放：是否自动轮播。开启后，支持设置图片轮播时间间隔（不大于24秒）。 切换方式：设置图片切换时，展示的样式，如淡出、推出等。 定位标志：设置分页图标样式。 图片管理：对图片进行管理，并支持为图片配置跳转链接。 单击“添加”，在“我的图片”页签中，将鼠标放在目录上，单击可新建目录，单击可删除该目录。单击“上传图片”，可上传图片，支持上传JPG、JPEG、PNG和GIF格式的图片，每张图片不超过1MB，推荐图片尺寸为800x800像素。在“网络图片”页签中，可以通过输入图片的地址，来获取图片。 选中图片，单击，可删除图片。 单击，可编辑图片跳转链接。
-
管理页面级数据源、全局状态 页面组件之间，可以通过配置事件和动作进行信息交互。当页面组件较多，且需要进行信息交互时，频繁的给每个组件去定义事件或动作就比较繁琐了。此时，可以通过定义全局状态，来实现页面级所有组件中数据信息的更新。 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%，以适应整个浏览器或设备的可视宽度，同时组件内容的宽度也会根据容器的宽度进行调整。默认为不勾选。 缩放和拖移 发布后的高级页面中，组件是否支持用户缩放或拖动。 默认为不勾选。 页面是否可定制修改 在扩展应用中，是否支持从依赖的应用中，将该高级页面导入。 默认为不勾选。 浏览器缓存有效期（天） 间隔多少天刷新一次浏览器缓存。
更多精彩内容
CDN加速
GaussDB
文字转换成语音
免费的服务器
如何创建网站
域名网站购买
私有云桌面
云主机哪个好
域名怎么备案
手机云电脑
SSL证书申请
云点播服务器
免费OCR是什么
电脑云桌面
域名备案怎么弄
语音转文字
文字图片识别
云桌面是什么
网址安全检测
网站建设搭建
国外CDN加速
SSL免费证书申请
短信批量发送
图片OCR识别
云数据库MySQL
个人域名购买
录音转文字
扫描图片识别文字
OCR图片识别
行驶证识别
虚拟电话号码
电话呼叫中心软件
怎么制作一个网站
Email注册网站
华为VNC
图像文字识别
企业网站制作
个人网站搭建
华为云计算
免费租用云托管
云桌面云服务器
ocr文字识别免费版
HTTPS证书申请
图片文字识别转换
国外域名注册商
使用免费虚拟主机
云电脑主机多少钱
鲲鹏云手机
短信验证码平台
OCR图片文字识别
SSL证书是什么
申请企业邮箱步骤
免费的企业用邮箱
云免流搭建教程
域名价格
