统软云 APP可视化开发新手图形教程（一）

本教程主要用于首次使用；中的新手开发人员的目的是通过简单明了的图形描述，让新手开发人员快速掌握可视化工具的使用。

统软云 Studio3可视化开发工具坚持低代码的设计理念，允许开发人员通过拖动和构建构建块来快速构建和生成App静态页面。它还支持同步和实时生成AVM交叉端代码。该工具内置了丰富的UI风格组件，为开发人员节省了大量的页面构建时间，使开发人员能够更加专注于App业务逻辑的开发。

1.工具下载

下载最新版本的统软云 Studio3

下载地址（在PC上打开）：https://www.a ‍picloud.com/studio3图片

PS：注册统软云官方账号

2.激活以进入可视化工具界面

2.1启动统软云 Studio3，单击左侧面板上的登录按钮以登录统软云帐户。

PS：没有帐户的学生需要单击“立即注册”按钮注册帐户，否则他们无法按照教程创建项目。

2.2创建项目

在顶部菜单中选择“项目”-“新建项目”，打开新项目界面。填写界面中的内容以完成新项目的创建。

注意：“使用AVM.js开发”需要激活此选项，否则无法使用可视化工具。

2.3选择pages/main/main Stml页面文件，点击左上角绿色图标（图中红色框），进入可视化工具界面。

PS：可视化工具是一个深度捆绑的AVM多终端引擎，因此只有扩展名是“只能可视化stml文件”（即显示切换到可视化的按钮）。其他格式的文件无法激活可视化界面。

2.4可视化工具界面-功能区显示说明

红色区域：系统工具栏

浅蓝色区域：资源管理器面板顶部菜单栏视图外观显示提要栏，可以展开或关闭（Mac快捷键⌘ B）

白色区域：快捷工具栏（单击左侧第一个绿色图标返回代码视图页面）

深蓝色区域：组件面板区域

绿色区域：页面编辑区域

黄色区域：功能面板区域

3.拖动组件以快速构建页面元素

3.1部件分类概述

在组件面板区域，正式内置了大量不同样式和功能的组件。当前组件基本上分为三类，即UI组件、高级组件和系统组件。单击顶部的选项卡导航栏以切换组件类别。

UI组件：通过在项目的UI设计页面中抽象和封装公共功能元素及其样式而形成的组件。因为它的组件是用某种程度的默认样式封装的，所以修改的自由度略低于系统组件。

高级组件：它们在UI组件的基础上封装在更高级别。每个高级组件都有一个完整的独立功能，也可以看作是一个具有功能逻辑的UI组件。

系统组件：构建页面最简单的基本组件是构建页面的最小单元，也是自由度最大的组件。开发人员可以以最大的自由度修改当前组件，以满足其样式要求。

3.2添加组件

用鼠标左键选择组件，按下并将其拖动到可视化工具的中间编辑区域，以完成组件添加。

3.2.1添加UI组件按钮

3.2.2添加高级组件-表单类型-卡片单元

3.2.3添加系统组件-容器组件-视图

PS：容器组件的特殊说明：

容器组件是一种特殊的组件，它具有包含其他组件元素的特性，相当于复合组件的外包装。灵活使用相应的容器组件可以使设计和实现各种UI页面更加方便和灵活。因此，在基于UI设计图进行页面开发和实现之前，开发人员必须分析当前UI设计图的结构。根据不同的结构布局，首先拖动相应结构的容器组件完成结构布局，然后将更详细的功能组件逐一添加到容器中。

3.3组件修改

组件选择后可视化页面功能图：

复制按钮：您可以快速复制当前选定的组件元素。

删除按钮：可以快速删除当前选定的组件元素。

3.3.1修改元件样式

样式面板：可以修改当前选定零部件的外观样式。

选择th