认识页面设计器 ​

在＜项目空间＞-＜页面管理＞新建页面后将自动打开页面设计器，在页面设计器中可以：

• 拖拽部件组装应用界面，实现可视化页面设计；
• 配置部件属性，实现页面布局和样式效果；
• 添加事件和方法，实现前端交互；
• 绑定输入、输出数据和视图模型，实现数据响应；
• 调用服务接口，实现业务逻辑。

页面设计器的界面如下：

画布 ​

页面设计器中央的空白区域是画布，它用来摆放设计页面所需要的部件（部件是构成页面的元素或元素集合）。

画布左侧有五个面板：

部件面板 ​

部件面板分类展示当前项目可以使用的所有部件，点击【本项目】则仅展示在本项目中创建的部件。

如果要将部件放入画布，先将鼠标移到部件上按下左键，再拖拽它到画布上。

如上图在部件面板上将文字部件拖拽到画布上。

模板面板 ​

模板面板分类展示当前项目可以使用的所有页面模板，点击【本项目】则仅展示在本项目中创建的页面模板。

页面模板是为了复用页面，它已经是一个页面，所以使用页面模板会覆盖当前的画布内容。鼠标双击一个页面模板，弹框确认继续后，画布内容被替换为该页面模板。

节点面板 ​

节点面板以树形结构展示画布上已有的部件，常用于查找、选择、复制或删除画布上的部件。如上图所示，节点面板上的根节点是一个页面（div），对应的是画布，文字（span）节点对应的是画布上的文字部件。

点击节点面板上的部件，画布上的对应部件将被选中，同时在节点面板底部会浮现操作按钮：

【复制节点】：在画布上复制该部件；

【删除节点】：在画布上删除该部件；

【节点保存为页面部件】：将该部件另存为一个部件类型的页面。

此外，在节点面板上也可以拖拽部件调整其位置。

注：部件是可以嵌套子部件的，以上操作会同时作用于部件内部的各级子部件。

节点面板上如果有多个相同部件，它们显示的名称都是相同的，可以通过备注名称对它们进行区分。先在画布上点击部件（或者点击节点面板上的部件），再在画布右侧的配置面板的［备注］中修改名称，节点面板上该部件的显示名称也会同步修改。

版本面板 ​

版本面板的内容是页面的版本记录，页面设计器的每次保存操作都会产生一条版本记录。点击其中一条版本记录，可以将页面还原到该版本。

拓扑面板 ​

在拓扑面板上显示的是当前页面通过UIBlock引用的各个页面编码，如果UIBlock引用的页面编码是动态生成的，则计入动态依赖数。（UIBlock部件常用于嵌套子页面，实现切换tab、弹出dialog等功能）

画布右侧也有五个面板：

信息面板 ​

在画布或节点面板选中一个部件，信息面板显示出该部件的基本信息、位置大小和字体颜色。

配置面板 ​

在画布或节点面板选中一个部件，配置面板显示出该部件的常规配置项，不同部件的这些配置项会有所差异。

配置项的输入要注意几点：

（1）在填写配置项时，可以选择其支持的值类型。

（2）填写配置项后，其前面的选框会自动勾选，如果想取消输入的内容，取消勾选即可，不用删除内容。

（3）当配置项旁有【打开JASON编辑器】，点击后在弹出的编辑器窗口输入代码。

（4）配置项输入后立即生效，点击面板上方的【保存】才会保存。

点击配置面板顶部的【编辑JASON】，在弹出的编辑器窗口中显示当前所选部件的JASON字符串，它完整地包含了部件相关的所有信息，不仅有配置面板、显示面板、交互面板、全局面板的配置信息，还可以输入代码添加elememt组件提供的属性。

显示面板 ​

显示面板分为面板选项、文本选项、高级选项。面板选项是与部件的布局、大小、外观相关的配置项，文本选项是与部件文字相关的配置项，高级选项用来指定部件的样式名、编写样式表，还可以配置动画效果。

交互面板 ​

在交互面板中为部件添加事件和方法，点击“+”图标按钮新增事件，点击“-”图标按钮删除事件。

全局面板 ​

全局面板可以设置画布大小和背景色、设置页面的封面图片、编辑全局的视图模型。

根据项目类型（PC端或移动端），分别提供了画布的常见尺寸。

设置封面图片后，关闭页面编辑器返回到＜页面管理＞，该页面对应的卡片会显示为此图片（没有封面图片则显示“暂无图片”）。

点击【编辑模型】，在弹出的模型编辑器窗口编写代码。

当代码中要使用服务接口时，先击右下角的【插入服务】，在弹出窗口中选择要使用的服务（服务应在＜项目空间＞-＜服务管理＞完成配置），【保存】后即在模型编辑器窗口的光标定位处插入服务代码。

操作按钮 ​

画布上方右侧是页面设计器的操作按钮，从左向右依次为：

【撤销】：撤销页面设计的最近一步操作；

【重做】：恢复页面设计的操作，是【撤销】的逆向操作；

【刷新】：有些情况下画布或节点面板里的内容不能自动刷新，需手动刷新画布内容；

【显示隐藏部件】：当部件配置了渲染条件且不满足渲染条件时，画布上不会显示该部件，勾选【显示隐藏部件】后忽略渲染条件；

【导入】：使用包含代码生成页面内容和配置；

【预览】：弹出窗口预览页面效果；

【保存】：保存页面设计操作；

【关闭】：关闭页面设计器，如果有未保存的页面设计操作，关闭前会予以提示确认。