iVX低代码平台系列详解 --界面功能(一)

清疚 2024-04-01 11:54 67阅读 0赞

## 写在前面 ##

iVX低代码深入学习：[https://www.ivx.cn?extend=baidaguo][https_www.ivx.cn_extend_baidaguo]

> ivx动手尝试电梯：[iVX在线编辑器][iVX]
> 
> ![在这里插入图片描述][b8c6963cc7a849d09061e06fc1e374f1.png]

iVX系列教程持续更新中 系列文章可看：  
[iVX低代码平台系列详解 – 概述篇(一)][iVX_ _]  
[iVX低代码平台系列详解 – 概述篇(二)][iVX_ _ 1]  
[iVX低代码平台系列详解 – 概述篇(三)][iVX_ _ 2]

[iVX低代码平台系列详解 – 系统架构][iVX_ _ 3]

#### 文章目录 ####

*  写在前面
 *  一、界面概览
 *   *  1.1.界面分区
     *  1.2.舞台
     *  1.3.对象树
     *  1.4.属性面板
 *  二、菜单栏
 *   *  2.1.项目的保存与另存为、回退
     *  2.2.多人开发与版本管理
     *  2.3.项目环境配置
 *  三、iVX做一个投票应用
 *  四、教程心得

## 一、界面概览 ##

### 1.1.界面分区 ###

> 现在，我们将对「iVX」的工作界面进行介绍，使您对工具界面的窗格模块获取初步的认识。iVX的工作界面由以下几个模块组成：

1.  舞台  
    画面中间有一块白色区域，称之为“舞台”（也称为前台、编辑器窗口）。舞台可以类比为Photoshop等主流图像处理软件中的“画布”，它定义了项目的编辑区域，所有的编辑和创作都在这一区域完全可视化地进行：  
    ![在这里插入图片描述][3c79e51117e8450196a215de79b47051.png]
2.  组件工具栏  
    工作界面最左侧的长条形组件栏中竖直排列着一列小图标，每个小图标就是一个“组件”。每个组件都有特定的功能和用法，例如用于页面排版的横幅、面板，用于添加媒体对象的图片、视频、音频、文本，用于添加动效的动效组等等：  
    ![在这里插入图片描述][d2240ee4ddc84379b6b97c39b2c4b0aa.png]

> 组件是iVX中最为核心的元素，所有交互、动画、数据都需要以组件为基础，通过组件的组合和编排来完成。有些组件可以容纳媒体素材，例如图片组件，需要为其指定图片素材；音频组件，需要指定音频素材。  
> 了解每种组件的详细用法、它所支持的素材类型，是使用iVX的基础，可以在“组件详解”模块中进行学习。

组件栏具有以下功能特性：

> · 组件栏按照组件功能被划分为若干区域，包括系统组件、媒体组件、数据组件、通讯组件等。  
> · 组件栏有“精简”和“完整”两种模式，可以通过点击左上角的“折叠\\展开”按钮，在精简和完整模式之间切换。  
> · 如果您的电脑屏幕未能显示完全工具栏中所有的工具，可以将鼠标置于工具栏区域，通过鼠标滚轮上下滚动查看完整的工具栏区域。  
> · 依照选取的案例类型（小程序、网站）、开发环境和排版方式的不同，系统将自动加载匹配的组件，组件类型和用法可能略有差异。  
> · 前台和后台对应不同的组件，详情请见“组件详解-前台组件/后台组件”。

我们可以通过鼠标悬浮任意一个组件，来查看其相应的文档：  
![在这里插入图片描述][075804e189484b4892449eec9f2b1bf3.png]

1.  对象树/素材面板  
    工作区的右侧为对象树/素材窗格。二者可通过顶部标签进行切换，默认状态展示对象树窗格。

· 对象树  
对象树是进行对象管理的重要窗口。当前开发环境中添加的每种组件都会被对象树记录，以树状结构进行可视化的展示，例如下图：  
![在这里插入图片描述][962f25099bff469d8d893c5efe43263f.png]  
4. 属性面板  
当我们通过对象树或舞台任意点选一个对象时，可以看到工具栏右侧将对应显示该对象的属性窗格：  
![在这里插入图片描述][bbf33557cd5c4bacb33b397967c975f2.png]  
5. 菜单栏  
菜单栏可用于进行一些全局性操作。是iVX中非常重要的功能型区域。  
![在这里插入图片描述][5174a9f7830d49e9a1c9d7240671acae.png]菜单栏分为三个区域：

左侧区域：汇集了若干个下拉菜单。例如「文件」菜单，通过它可以完成新建、保存、另存为等操作：

![在这里插入图片描述][962706c0338b4ecea6264f396992ed17.png]  
其中还有一些功能按钮，对应于当前账号所建立的数据库、电商、用户、连接、SVG库。

中部区域：用于案例的预览和发布，以及多人协作开发。

![在这里插入图片描述][6f3a8fc3dd3d4d3aa067bf4dcb4810a4.png]  
右侧区域：用于定义编辑器的属性：![在这里插入图片描述][3c8459cb8780404fa5bc3fd7cf33b169.png]  
6. 逻辑工具栏  
逻辑工具栏位于对象树窗格右侧，用于为对象添加事件、自定义函数、动作组、服务等交互逻辑功能。  
![在这里插入图片描述][02b0e61d5c4f49eda6a97f01735280d9.png]

1.  辅助工具  
    当我们在使用中遇到任何问题时，都可以通过查看文档、教学视频或直接求助于客服来解答疑问。  
    ![在这里插入图片描述][5a1960a3bd3244c6a5be3a14516987fe.png]

### 1.2.舞台 ###

> 编辑器中间的白色区域即为舞台（也称为前台、编辑器窗口），是整个项目的在编辑过程中的展示界面，可以在上面预览页面的布局和样式、动效及动画的播放等。但是舞台并不是一个纯粹的展示窗口，通过舞台同样可以与应用交互并使得应用开发更加便捷。

舞台在应用开发中主要有以下两种用途：  
1.选中对象  
舞台上的内容为我们添加的所有组件构成的树形结构的具体展示，我们可以在舞台上找到每一个处于显示状态的组件并且通过点击来选中该组件，选中也直接反馈到对象树和属性面板——对应的组件会在对象树中被选中，同时属性面板切换为被点击的组件的属性面板。  
![在这里插入图片描述][edee18ad2f2041a8827fdd936f508733.png]

2.调整元素位置  
舞台中的元素处于相对定位环境时，位置相对固定，只能通过外边距来进行位置的调整；但处于绝对定位环境（例如H5应用环境、画布等），即元素通过X、Y坐标来进行定位时，我们可以直接在舞台中拖动这些元素来改变它们的位置  
![在这里插入图片描述][b76b0044307642b9adb6d84db8be5e18.png]

### 1.3.对象树 ###

> 对象树是 iVX 编辑器中直观呈现案例数据结构、管理对象的可视化体系。它具有非常强大的功能，尤其当案例中添加了数量众多的对象，数据结构繁杂时，借助于对象树可以更好地管理对象。在iVX中，对象树分为了前台和后台两个部分，前台为我们项目中可视的部分，各种页面的组件和模块都放在前台这个“根”的下方；后台则专门用于存放数据库，已及用于前台后台沟通的服务等，该部分主要是抽象的功能，并不具有可视的实体。下面将主要针对对象树前台根进行几种基本功能的详解：

对象树中的对象之间一般会存在以下两种特殊的关系：

层级关系  
是指对象之间的相对次序–在对象树上的排列顺序，层级关系在相对定位环境和绝对定位环境下表现会有较大差异。  
在相对定位的环境下，层级关系影响到的是两个对象之间的位置关系，层级处于对象树更下方的对象按照对象所处容器的排列方式排列在更前面（图中在前台下的正常排列从上到下，对象层级在下方的会显示在更上面）。

![在这里插入图片描述][4b93b5d92ceb422f8ce9dc024f09860f.png]

### 1.4.属性面板 ###

每添加一个对象，可以看到它同时出现在舞台和对象树中。点击该对象即可选中，编辑区右侧将出现该对象的属性窗格：  
![在这里插入图片描述][ef9220993ac14a9ebc0cb5bfaa2c49c4.png]  
通过重新定义各类属性，可以修改对象的尺寸、位置、外观、样式、数据内容及功能，从而定义对象的细节。

依照属性类别的不同，各个属性定义方式可能有所不同：

通过内容栏定义  
对于定量属性，通过在内容栏中填写固定值或绑定变量值来进行定义。例如，宽度、高度等属性，需要在内容栏中填写数字或百分比进行定义。除了直接使用键盘键入外，也可借助于窗格右侧的控制杆进行上下微调：  
![在这里插入图片描述][bad5979d20c143fdb67b158df0690bbe.png]

## 二、菜单栏 ##

### 2.1.项目的保存与另存为、回退 ###

项目保存

在项目编辑过程中，可以根据进度随时保存当前编辑状态，只需点击菜单栏右上角 -“保存”按钮即可完成保存：

![在这里插入图片描述][7d1d129ea44e430398b4443f4084b64f.png]  
或将鼠标指向菜单栏右上角“文件”按钮，在下拉菜单中点击“保存”按钮（也可以直接使用“ctrl+s”的快捷键），即可完成保存操作。![在这里插入图片描述][03bdcc53929e4352aafddf948bd1ba82.png]  
以上操作完全等效。

除了用户自主保存以外，系统将进行定期自动保存（每隔 5 分钟）。如果案例曾进行过预览、发布等操作，编辑进度也将自动保存。  
自动保存有时间间隔且只能看到最近一次自动保存的版本，但是每次手动保存都将生成一个历史版本，通过历史版本回溯可以加载先前保存过的的历史版本，为防止进度丢失，建议使用者养成定期手动保存的习惯。

项目另存为

在项目编辑过程中，如需对当前项目进行另存为操作，需将鼠标指向菜单栏右上角“文件”按钮，在下拉菜单中点击“另存为”按钮：  
![在这里插入图片描述][3dc6594c7a34498bb48ecd8ae2c54d9a.png]  
即可完成另存操作。系统将提示是否加载另存为的新案例，或点击取消，仍停留在当前界面：![在这里插入图片描述][e0fa7e9820f244d1a5923e41ab5a61f2.png]  
回溯历史版本

用户的每次保存都将以“历史版本”的形式暂存。历史版本包括一个由系统自动保存生成的存档，每次自动保存都将自动覆盖此存档；另外包括所有用户自主保存生成的历史版本。依照账号属性的不同，可回溯的历史版本数量不同：

![在这里插入图片描述][5ecd7db3ea064f6c887731e29dcb2ad2.png]

### 2.2.多人开发与版本管理 ###

多人开发说明

在构建结构较为庞大的项目时，不可避免需要一个团队共同协作，在此场景下就可以使用到iVX提供的多人开发的功能。  
使用多人开发，项目的开发者可以各自开发单独的模块，最后再通过推送将自己的工作内容上传到主分支（类似于Git的项目版本管理，主分支为所有人开发的远程稳定版本）。

多人开发和版本管理  
1.项目成员邀请

每一个案例舞台的正上方都会有一个“多人开发”的按钮，点击打开邀请面板，随后输入要邀请成员的账号，同时在邀请时可以选择被邀请成员的职责（开发者可以对案例进行修改和开发，管理员则在这个基础上可以进行项目成员的邀请与移除），同时发起人会自动成为该案例的所有者。  
![在这里插入图片描述][6ca8b76ba2714476a01a7ef377a6b330.png]  
在发送邀请之后，该案例会自动转换为一个多人开发的案例，此时舞台正上方的多人开发后面会多出两个“拉取”和“推送”的按钮，此时点击“多人开发”则可以看到拉入案例的项目成员名单并进行成员管理。  
![在这里插入图片描述][930cc5a97a044bf2842ce039bdf55749.png]  
2.多人开发的拉取和推送

在加入多人开发之后，我们在多人开发–历史记录中看到如下图所示各个版本的历史记录，并能通过这里的历史记录进行版本的回溯。  
在案例转为多人开发之后，系统会自动添加一个非本地的主分支（master）用作项目开发的远程稳定版本，每个成员也会有自己的本地分支用于个人开发任务的进行，任意选择分支图里面的一个圆点，右侧的版本信息会高亮显示，我们可以通过这个分支图加载多人开发成员列表内所有存在的历史版本，无论其是否被推送到了主分支  
![在这里插入图片描述][f88856c4c8c7456dbbe9dafc5890e436.png]  
当我们需要获取项目组最近整个的开发成果，在他人开发的基础上进行自己的任务，我们需要通过“拉取”来实现，该功能总会帮我们拉取到主分支上最新的版本并与本地版本进行合并生成一个新的本地版本作为个人后续开发的基础。  
当我们想要提交自己已完成的开发任务，也就是将开发的成果上传到最终的项目中去，我们则通过“推送”来实现，该功能会帮助我们将自己的本地分支上传为主分支版本，在主分支上生成一个新的版本；需要注意的是，推送需要本地版本是主分支最新版本的克隆版本，否则需要重新拉取最新的主分支版本与自己的本地版本进行合并后才能进行推送。  
![在这里插入图片描述][823950c3b2584a5199f6e3c7a81d204f.png]  
多人开发冲突

多人开发不可避免地会在合并分支时产生冲突，不过由于推送合并分支时，本地的版本已经保证和主分支的最新版本进行了合并，后续的推送会直接推送到主分支。所以当不同的项目成员对相同的对象进行了修改时，冲突会在拉取合并时报出

![在这里插入图片描述][81d5bf72e01c4098873e707af33b67ae.png]

### 2.3.项目环境配置 ###

案例环境配置说明

iVX 允许我们对案例环境进行全局配置并保存配置方案，可以在开发中快速调用，避免重复配置。

案例环境配置步骤

1.打开配置面板

进入编辑器，通过“配置”按钮打开配置面板。

![在这里插入图片描述][fc514d37f27644919df3c6a542285b5b.png]  
2.填写配置信息

填写预置配置信息。其中，配置名称就是当前配置方案的名称。  
微信公众号的配置信息可以用于H5案例下调用微信的登录等功能；  
微信小程序/小游戏的配置用于在微信上预览发布相应类型的案例并获取微信登录、分享等功能；  
微信开放平台的信息配置则用于移动应用、网站应用、第三方平台等开发提供微信登录、分享、支付等相关权限和服务；  
商户号则专门针对微信支付，如果APP或者公众号需要接入支付功能，那么就需要在公众平台申请公众平台商户，或者在开放平台申请开放平台商户。

![在这里插入图片描述][34bdcabfb13b4b57a6487853da0ce6c9.png]

3.保存

勾选“保存时添加至预存配置”，之后点击保存会将您的配置信息保存至预存配置，如下图：  
![在这里插入图片描述][10f11888ea9744539cb6848bbf85775a.png]  
4.预存配置操作详解

修改：会对该预存配置进行修改  
删除：会删除该预存配置  
设为默认配置：即您新建案例时，默认使用的配置。  
设为当前配置：即如果该案例使用的不是您所想要的配置时，点击该按钮，会修改当前案例的配置信息。  
注：设为当前配置仅仅会让当前案例使用该配置，新建案例依然会使用默认配置。另外每次设为当前配置的时候记得点击保存（不要勾选设置为预存配置），此刻你所使用的才是当前配置。

## 三、iVX做一个投票应用 ##

![在这里插入图片描述][3935b7d0dd324177b91f5f79d2c07b29.png]  
![在这里插入图片描述][3f1ef78cb05848abbd9e3a9e771ff59a.png]  
用下来超级方便

## 四、教程心得 ##

博主整个使用下来 发现ivx真的做到了快速学习、快速开发、快速运行、快速维护 对新手真的友好 作为开发者的角度 永远是动手>理解的 所以说 大家可以大胆尝试下哦

[https_www.ivx.cn_extend_baidaguo]: https://www.ivx.cn?extend=baidaguo
[iVX]: https://editor.ivx.cn/
[b8c6963cc7a849d09061e06fc1e374f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/328e4f6a7e4b43ba93234a31192d936f.png
[iVX_ _]: https://blog.csdn.net/weixin_45735355/article/details/125446770?spm=1001.2014.3001.5501
[iVX_ _ 1]: https://blog.csdn.net/weixin_45735355/article/details/125828663?spm=1001.2014.3001.5501
[iVX_ _ 2]: https://baidaguo.blog.csdn.net/article/details/126358755?spm=1001.2014.3001.5502
[iVX_ _ 3]: https://baidaguo.blog.csdn.net/article/details/126954083?spm=1001.2014.3001.5502
[3c79e51117e8450196a215de79b47051.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/46554c41099c4590a421a19a070f65a4.png
[d2240ee4ddc84379b6b97c39b2c4b0aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3a3f74f82e9e470c90ec487be194f67f.png
[075804e189484b4892449eec9f2b1bf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/dec709cf5b2e41d4a6c196044de45ce3.png
[962f25099bff469d8d893c5efe43263f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/acc388d1646541f6a8ca4a68732d5ed9.png
[bbf33557cd5c4bacb33b397967c975f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5d6475335a6047f6903e561d3e1d5225.png
[5174a9f7830d49e9a1c9d7240671acae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/52edbbc3ed3d419482a6264bb9ed64ae.png
[962706c0338b4ecea6264f396992ed17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a984d31913e94b09823b73b721eca601.png
[6f3a8fc3dd3d4d3aa067bf4dcb4810a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3df96bbe5be940788302ccc35f31645e.png
[3c8459cb8780404fa5bc3fd7cf33b169.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/75f2d8fc958348b8a7493d480f2246ba.png
[02b0e61d5c4f49eda6a97f01735280d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ae0d2ac4b4df4ec38ffafd57dead0b11.png
[5a1960a3bd3244c6a5be3a14516987fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4d13d9fdb58b4c86ad0deca84b7f496e.png
[edee18ad2f2041a8827fdd936f508733.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/668fc0bf05d24e50b7687a0f8cf24128.png
[b76b0044307642b9adb6d84db8be5e18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3f4dbfa4354946d590e5ee3280a0eebd.png
[4b93b5d92ceb422f8ce9dc024f09860f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/18806a100e894f1f8f3fcd080f02adce.png
[ef9220993ac14a9ebc0cb5bfaa2c49c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c3ad2d2531e0417195042a872e77eef0.png
[bad5979d20c143fdb67b158df0690bbe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b4f0fb4f7d904694a754bb45cf69a7f8.png
[7d1d129ea44e430398b4443f4084b64f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0ea93add4f8e4d89bf002c86b7697fe9.png
[03bdcc53929e4352aafddf948bd1ba82.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/09feed4e63744425a68cba53a8a44d9b.png
[3dc6594c7a34498bb48ecd8ae2c54d9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a5ba7ff34b7141c996466f9231590042.png
[e0fa7e9820f244d1a5923e41ab5a61f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ef2fb18ef60e43038fe5774ac0c86ef7.png
[5ecd7db3ea064f6c887731e29dcb2ad2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/70709888bf624480aca9ab642550c80a.png
[6ca8b76ba2714476a01a7ef377a6b330.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/142a2b59d32943a4b664b1cfd2b3675b.png
[930cc5a97a044bf2842ce039bdf55749.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fbe18d6d6a654d288dce8d9a65c9daae.png
[f88856c4c8c7456dbbe9dafc5890e436.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/60a305bbe2f04f8eb33dc51a4417450b.png
[823950c3b2584a5199f6e3c7a81d204f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/eede4c5c40c44fca850e57bff4368d00.png
[81d5bf72e01c4098873e707af33b67ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4f6a6e8afb18474a97b0e98f3cf49f63.png
[fc514d37f27644919df3c6a542285b5b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e384084ba5804321ac67040d0c8309aa.png
[34bdcabfb13b4b57a6487853da0ce6c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/31164b0e5b714944a8b7e23e3fc82023.png
[10f11888ea9744539cb6848bbf85775a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/70ee6687ce9e4f8eadbd9387860cb280.png
[3935b7d0dd324177b91f5f79d2c07b29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/87e1cf4af637407f8035a665dbcba028.png
[3f1ef78cb05848abbd9e3a9e771ff59a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/685e4ec8f3f54629b009f8d2d6e3173f.png