初识应用设计器

顶部工具栏

设计器顶部的工具栏从左到右包括：

• ：撤销上一步的操作。
• ：恢复上次撤销的内容。
• ：保存当前页面数据。
• ：清空当前画布内容。
• ：刷新当前页面数据，如果页面未保存，页面配置将恢复到上一次保存的状态。
• ：单击后可展开左侧插件栏的设置插件，设置当前页面属性。
• ：单击可进行画布中英文切换。
• ：多终端工具切换，可切换画布宽度。
• ：页面预览，打开新Tab预览当前页面。
• 下载源码：将当前页面数据转换并下载代码到本地。

左侧插件栏

• ：物料插件，提供设计所需组件，拖拽组件至画布中进行页面设计，具体操作请参考使用组件。
• ：大纲树插件，可查看页面大纲树。
• ：页面管理工具插件，可以新增文件夹，可以新增文件夹，以及对页面或者文件的增删改操作。
• ：数据源管理插件，可用于来配合画布上的组件渲染，具体操作请参考使用数据源。
• ：资源管理插件，将一些可复用的公共函数编写到工具类中，也可以将一些npm包引用到工具类中，供后续调用，具体操作请参考使用工具类方法。
• ：国际化插件，可添加国际化词条，实现中英文切换。
• ：JS方法插件，您可以通过使用JS面板编写自己的代码，从而实现较为复杂的业务场景。
• ：状态管理插件，可添加页面变量和添加全局变量，供页面及应用使用。

插件单击之后会向右展开对应插件的设置面板。例如，单击，将展开物料资产包。

图2 展开物料资产包

中间画布区

中心画布位于设计器中央，是可视化设计的核心模块，可以在插件栏的物料面板中，将组件拖拽至中心画布内，然后单击画布选中组件，修改组件的属性、样式、绑定事件等。

右侧属性设置面板

右侧设置面板分为属性设置、样式设置和高级设置面板。

• 属性设置，设置组件的属性，比如按钮组件的大小、文案、按钮类型等组件提供配置的属性。

图3 基本属性设置

• 样式设置，设置组件的样式，提供直接配置样式，也可以编写CSS代码配置样式。

图4 样式设置

• 高级设置，设置组件是否渲染、绑定单击事件、设置组件是否循环渲染等。

图5 高级设置