初识应用设计器
AstroPro设计器可以分为顶部工具栏、左侧插件栏、中间画布区、右侧属性设置面板几个主要界面模块。
顶部工具栏
设计器顶部的工具栏从左到右包括:
- :撤销上一步的操作。
- :恢复上次撤销的内容。
- :保存当前页面数据。
- :发布页面模板。
- :清空当前画布内容。
- :刷新当前页面数据,如果页面未保存,页面配置将恢复到上一次保存的状态。
- :单击后可展开左侧插件栏的设置插件,设置当前页面属性。
- :单击可进行画布中英文切换。
- :多终端工具切换,可切换画布宽度。
- :页面预览,打开新Tab预览当前页面。
- 下载源码:将当前页面数据转换并下载代码到本地。
左侧插件栏
- :物料插件,提供设计所需组件,拖拽组件至画布中进行页面设计,具体操作请参考使用组件。
- :大纲树插件,可查看页面大纲树。
- :页面管理工具插件,可以新增文件夹,可以新增文件夹,以及对页面或者文件的增删改操作。
- :数据源管理插件,可用于来配合画布上的组件渲染,具体操作请参考使用数据源。
- :资源管理插件,将一些可复用的公共函数编写到工具类中,也可以将一些npm包引用到工具类中,供后续调用,具体操作请参考使用工具类方法。
- :国际化插件,可添加国际化词条,实现中英文切换。
- :JS方法插件,您可以通过使用JS面板编写自己的代码,从而实现较为复杂的业务场景。
- :状态管理插件,可添加页面变量和添加全局变量,供页面及应用使用。
插件单击之后会向右展开对应插件的设置面板。例如,单击,将展开物料资产包。
中间画布区
中心画布位于设计器中央,是可视化设计的核心模块,可以在插件栏的物料面板中,将组件拖拽至中心画布内,然后单击画布选中组件,修改组件的属性、样式、绑定事件等。
右侧属性设置面板
右侧设置面板分为属性设置、样式设置和高级设置面板。
- 属性设置,设置组件的属性,比如按钮组件的大小、文案、按钮类型等组件提供配置的属性。
- 样式设置,设置组件的样式,提供直接配置样式,也可以编写CSS代码配置样式。
- 高级设置,设置组件是否渲染、绑定单击事件、设置组件是否循环渲染等。