管理AstroZero高级页面
为高级页面设置水印
高级页面创建后,支持为高级页面添加水印。水印可以用于标识页面的所有者、状态或其他相关信息,建议不要过多的设置水印,可能会影响页面的美观。
- 参考登录AstroZero新版应用设计器中操作,登录应用设计器。
- 在左侧导航栏中,选择“界面”。
- 将鼠标放在对应的高级页面上,单击,选择“设置”。
- 在“水印”页签,参照表1设置参数,单击“保存”。
图1 水印设置
图2 设置后效果
设置高级页面基本信息
高级页面创建后,支持设置高级页面的基本信息,如名称、路径名称、标题等。
- 参考登录AstroZero新版应用设计器中操作,进入应用设计器。
- 在应用设计器的左侧导航栏中,选择“界面”。
- 将鼠标放在对应的高级页面上,单击,选择“设置”。
- 在“基本信息”页签中,修改所需参数,单击“保存”。
表2 设置高级页面基本信息参数说明 参数
说明
名称
高级页面的名称,即创建高级页面时设置的名称,可根据实际需求进行修改。命名要求如下:
- 长度范围为1~100个字符。
- 必须以字母开头,由字母、数字或单下划线组成,且单下划线不能连续。
路径名称
路径名称和高级页面名称保持一致,可根据实际需求进行修改。命名要求如下:
- 长度范围为1~100个字符。
- 必须以字母开头,由字母,数字或单下划线组成。
标题
高级页面的标题,即创建高级页面时设置的标签,可根据实际需求进行修改。
描述
根据实际需求,在输入框中输入高级页面的描述信息。
关键字
用于和接口进行交互。
拉伸
勾选后,高级页面宽度会扩展至100%,以适应整个浏览器或设备的可视宽度,同时组件内容的宽度也会根据容器的宽度进行调整。默认为不勾选。
缩放和拖移
发布后的高级页面中,组件是否支持用户缩放或拖动。
默认为不勾选。
页面是否可定制修改
在扩展应用中,是否支持从依赖的应用中,将该高级页面导入。
默认为不勾选。
浏览器缓存有效期(天)
间隔多少天刷新一次浏览器缓存。
将高级页面发布为模板
高级页面开发完成后,支持将该页面发布为模板。高级页面发布为模板后,该开发者用户、注册AstroZero的华为账号、华为账号下其他AstroZero开发者可直接使用该页面模板来创建高级页面。
- 参考登录AstroZero新版应用设计器中操作,进入应用设计器。
- 在应用设计器的左侧导航栏中,选择“界面”。
- 单击对应的高级页面,进入高级页面的设计界面。
- 单击,进入发布页面模板界面。
- 输入模板的名称和描述。
图3 发布页面模板
表3 发布页面模板参数说明 参数
说明
模板名称
高级页面发布为模板时,模板的名称。
命名要求:由字母、数字、下划线和中划线组成。
模板描述
请根据实际需求,输入模板的描述信息。
取值范围:1~255个字符。
- 设置完成后,单击“发布”,即可将高级页面发布为模板。
高级页面发布为模板后,可以基于模板创建新的页面,也可以管理页面模板。
- 基于高级页面模板,创建新的高级页面。
- 预览或删除高级页面模板。
在AstroZero环境配置的 中,可预览或删除模板,详情请参见管理页面模板。
克隆高级页面
页面创建完成后,支持将高级页面克隆到当前应用中。例如,应用A中存在两个或多个功能类似的高级页面,此时可基于已创建的高级页面克隆出一个新页面,基于克隆后的页面进行修改,减少重复创建的操作。
- 参考登录AstroZero新版应用设计器中操作,进入应用设计器。
- 在应用设计器的左侧导航栏中,选择“界面”。
- 将鼠标放在对应的高级页面上,单击,选择“克隆”。
- 输入高级页面的名称和唯一标识,单击“确认”。
克隆成功后,自动进行克隆后的高级页面。
删除高级页面
应用中的某个高级页面不再使用时,支持将其从应用中删除,避免占用账号的资源配额。
- 参考登录AstroZero新版应用设计器中操作,进入应用设计器。
- 在应用设计器的左侧导航栏中,选择“界面”。
- 将鼠标放在对应的高级页面上,单击,选择“删除”。
- 在弹出的确认框中,单击“确认”,即可删除高级页面。
管理页面级数据源、全局状态
页面组件之间,可以通过配置事件和动作进行信息交互。当页面组件较多,且需要进行信息交互时,频繁的给每个组件去定义事件或动作就比较繁琐了。此时,可以通过定义全局状态,来实现页面级所有组件中数据信息的更新。
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()”方法,修改状态数据。