本文将为您介绍可视化搭建系统的新建工程、可视化搭建等基本操作。

新建工程

  1. 进入App Studio页面,单击工作空间页面的新建代码工程
    新建代码工程
  2. 填写新建项目对话框中的工程名工程描述选择运行环境appstudio
    appstudio
  3. 配置完成后,单击提交
  4. 打开santa/pages目录。
    Santa
  5. 单击任意一个.santa文件进入可视化搭建。
    您也可以右键单击pages,选择新建 > 模板文件,基于模板进行开发。
    模板文件

可视化搭建

可视化搭建页面主要由组件列表和操作面板组成。
可视化搭建
  • 组件列表
    组件列表为您展示可视化搭建系统中,所有的系统预设组件,包括布局基础表单图表高级等组件。
    组件菜单
    展开组件列表,拖拽某一个组件至可视化操作面板,单击该组件,即可在右侧进行组件配置
    组件配置
  • 操作面板
    操作面板包括撤销重做预览代码模式全局样式导航配置全局数据流配置发布为模板保存等操作。
    操作面板

单击操作面板中的导航配置图标,即可打开导航配置页面进行配置,详情请参见导航配置

配置全局数据流

配置全局数据流的详情请参见全局数据流

  • 配置组件属性

    组件属性配置面板主要负责可视化的方式配置组件属性。

    根据组件的属性配置规则,组件属性配置面板将会生成一个可视化表单,让您输入组件的属性配置。在组件属性配置表单中更改组件属性后,可视化操作区域将会根据接收到的组件属性,进行重新渲染。您可以实时查看组件不同属性的渲染结果。

  • 配置组件样式

    组件样式面板主要负责组件样式的相关设置。

    组件样式配置面板将会生成一个通用的样式配置可视化页面,您可以基于该面板定制组件基本的外观样式,包括布局、文字、背景、边框、效果等常用样式配置。

    在组件样式配置面板中添加、修改组件样式,可视化搭建系统将会收集所有的样式设置到组件上,可视化操作区域将会根据新的样式设置重新渲染对应组件,您可以实时查看配置后的组件效果。

  • 配置组件联动高级

    组件联动高级设置面板主要负责组件之间的联动设置。

    单击可视化操作区域中的某一个组件,选中高级面板。高级设置面板中,将会在左侧列出当前选中组件对应的组件属性,单击右侧的放大镜按钮选择需要关联的另一个组件。
    关联
    选中需要关联的另一个组件后,高级设置面板右侧将会出现对应的组件属性。
    关联
  • 单击左侧属性列表中的某一个属性,连线至右侧属性列表中的另一个属性。
    属性列表

    该操作将会实现两个组件之间的属性联动,左侧组件的searchParams参数变更将会及时传递到右侧组件的requestParams参数,从而实现两个组件基于属性之间的联动配置。

代码模式

代码模式提供了一种更高级的方式来满足更复杂的交互场景的需求,详情请参见代码模式

保存、预览、运行和热部署

详情请参见保存、预览、运行和热部署