添加对象
进行项目创作的基础是通过组件栏向舞台中添加对象。在所有的对象中，有一类特殊的对象为容器对象，在其内部可以添加其他的实体对象。其他的组件可以理解为对象树的“叶子节点”，其下不能添加更多的“树枝”，但是容器对象则是对象数的“枝干”，其下还能容纳下“树枝”和“叶子”。类似于文本、图片等非容器对象组件，其下只能添加动效组和动效这样的非实体对象。
在iVX中，容器对象主要有以下几种：
另外，在扩展组件中，也有部分容器类组件用作更为针对性的布局排版：
容器对象下可以添加对象，但是不同的容器对象具有不同的属性和用法，不同容器对象内部所能添加的组件会有所差异，因而在使用时需要注意某些特定的组件只能在特定的父级容器下使用。例如横幅组件就不能添加在行、列等内部：
此外，在 iVX 编辑器中，依照所选取的开发环境，系统将自动加载匹配的组件以供选取。对象分为绝对定位对象和相对定位对象，依照所选取的父对象（相对定位还是绝对定位）自动适配。
对于图片、视频、音频等媒体组件，所添加的对象为空对象，还需要通过上传或指定URL地址为之添加素材。
下面以图片组件为例，讲解如何添加对象并为其设置素材。
1.对于相对定位图片对象
只需单击组件栏中的「图片」组件按钮即可生成一个图片对象。此时该对象为空白图像，还需要为其上传素材。
系统将弹出对话框，要求选取本地资源位置，选取后点击“打开”按钮（对于WIndows操作系统）即可完成自动上传。也可以取消选取，暂时不上传图片素材，则该图像对象也视为创建成功，但是素材为空，可以后续为其指定素材。
2.对于绝对定位图片对象
点击图片对象，需要使用鼠标在舞台中拖拽框选一个矩形区域，未来所上传的素材将自动被填充进该区域内。
松开鼠标左键完成框选。系统将自动弹出对话框要求从本地文件中选取素材进行上传。选取本地资源位置，选取后点击“打开”按钮（对于WIndows操作系统）即可完成自动上传。所上传的素材将会被自动填充进框选区域内，图片宽度匹配框选区域，图片高度按照图片原始比例自动拉伸。
同样可以点击取消，暂时不上传素材。
对于绝对定位图片，除了采用上述方法外，也可首先在对象树中指定目标父对象，直接将图片素材从文件浏览器中拖拽至舞台中，系统将自动生成一个与图片素材原始尺寸匹配的图片对象。
其他类别的对象添加方法与图片对象类似，即对于绝对定位对象需要框选对象区域，对于相对定位对象点击即可完成添加。
对象调整
单纯的将对象添加进应用只会让对象以默认的样式和功能出现在系统所默认的位置；要让对象能够真正用于发布和运行，我们在大多数时候都需要对对象进行一些后续的操作：
- 层级关系调整，当我们想让某个组件只出现在特定页面下，在对象树上选中并将其拖动至特定的页面，该对象就会归属为这个页面；继续拖动调整对象与其同层级的对象的相对位置，保证对象可以以正确的顺序呈现。
- 属性调整，添加的新组组件往往会以一个默认的样式呈现，但是我们往往并不希望使用默认样式，而是将其进行调整以符合我们整体的设计，属性面板此时就可以发挥作用。利用属性面板上提供的属性值，我们便可以自定义对象的功能及外观。
在实际开发的过程中，针对对象的调整会运用得非常多，针对其的操作也不仅限于演示的内容，其他更加详细的内容可以分别参照对应界面功能的文档。
组件
组件布局
组件布局规则
添加完组件之后，我们就需要对组件进行布局，即设置各组件的位置。
在ivx中，有两种UI组件的布局规则：相对定位规则与绝对定位规则。
1. 相对定位规则
所谓相对定位规则，就是html天然的文档流，新添加的对象，会从上到下或从左到右自动排列在舞台上，比如，我们直接在页面下添加几个按钮：
在所有的相对定位容器组件中，除了行组件，其他容器下的对象，都是从上到下排列。如果希望对象是从左向右排列，则可以添加一个行：
以上的例子中，行的“自动换行”属性默认是打开的，因此当按钮超出行的宽度时，会自动换行。如果我们不希望自动换行，也可以关掉这个属性开关：
2. 绝对定位规则
绝对定位规则，即完全通过x、y坐标来定位对象，在ivx中，绝对定位规则下的对象，可以通过在舞台上拖拽的方法来改变其大小和位置。比如，我们在H5应用的舞台下添加一个按钮：
3. 两种规则的适用场景
两种规则都可以用来对UI组件进行布局，但每一种规则各有其优势：
- 相对定位规则，可以对组件进行自动布局，包括居中、等间距分布、自动换行等，只需要设置容器组件的布局规则，无需对每个内部组件独立设置x、y坐标位置，因此更适合用来做各种列表的展示；同时，相对定位规则的容器（行、列）能够针对不同的屏幕宽度进行自适应，更适合作为PC应用的外层容器来适配不同浏览器窗口的大小。（详见行、列组件说明文档）
- 绝对定位规则，允许我们对每个元素单独设置x、y，且可以直接在舞台上拖拽操作。相比相对定位规则，能够让我们更自由的对组件的大小、位置进行编辑。其更适合制作动画、游戏、交互展示等非常规列表布局的应用。
4.两种规则的使用
在ivx中，每一个容器组件，都自带布局规则：
- 小程序与网站系统类的应用，其容器组件默认使用相对定位规则，即前台、页面、标签页等容器默认为相对定位。但我们可以通过在相对定位环境中，添加绝对定位容器，来使用绝对定位规则；
- H5类的应用，默认使用绝对定位规则，即前台、页面等容器，默认为绝对定位，我们也可以绝对定位环境中，添加相对定位的行和列，来使用相对定位规则。
- 小游戏类的应用，由于是纯画布环境，因此是绝对定位环境，且无法添加相对定位容器。
项目
项目预览
预览功能介绍
使用预览功能可以生成一个专用于预览的项目版本，可完整呈现当前编辑所产生的实际效果，以供调试。该预览版本带有预览版图文字样，不能直接用于传播或服务，仅供开发者测试使用(按云服务收费标准根据实际使用量扣费，新用户赠送20元余额用于测试)。
iVX针对不同环境开发的案例提供了多种预览方式，为了确保案例能够在其将来要运行的环境正常运行，一定要选取适合自己开发案例的预览方式。
1.在网站系统和H5的案例中，iVX所提供的预览方式分为以下两种：
- PC端预览
- 二维码预览
2.在小程序和小游戏的案例中，iVX所提供的预览方式多了一种将小程序/小游戏进行编译并在微信环境下预览的方式：
- PC端预览
- 二维码预览
- 小程序/小游戏预览
在上述给出的两张图中，细心的你可能还会发现PC端预览还会有一个当前页的选项，这个选项仅在我们在对象树上选中了某一页面或者某一页面下的组件时才会出现，它的作用为预览我们当前所在页面的内容，以当前页面为整个案例的起点。如果我们选中对象树最下方的页面，那么此时的“当前页”和“全部”选项就是相同的功能，因为“全部”选项下的PC端预览总会打开最下方的页面。
+
iVX开发规范
基本原则
1. 程序正确；2. 程序可维护，不和1冲突；
3. 较高运行效率且不给其他开发者带来麻烦，不和12冲突。
一、综合
1.1 优化/提升应用性能
1.1.1 大量临时数据处理时用fx
如果开发者有编程基础，在处理大量数据，不推荐使用ivx-loop语法，推荐在fx组件里使用js原生循环语句。这里注意是原生for循环，而不是map/each等api语法，经测试在ivx中处理样本长度较大的数组数据，处理时间等比例换算，for循环:jsapi:ivxloop = 1:10:100。在数据样本底，不需要多层循环的情况下才考虑ivxloop的做法。
1.1.2 选择性引入部资源
部分引入的外部资源较大，比如外部库和字体文件，中文字体文件可能达到10mb。ivx的加载策略是资源加载完成后进行应用渲染，因此这些外部资源会阻塞页面生成。尽力减少体积过大的外部资源引用。
1.1.3 变量/UI/事件复用
比如：一个弹窗如果仅是提供的logo或提示语不同，可以通过设置动态变量的方式控制显示内容。多个地方都用到的相同事件可打包成动作组，进行重复利用。
1.2 提高开发效率
1.2.1 添加的组件进行命名
尽量减少使用默认的变量名或默认的对象名，提高可维护性
1.2.1.1 推荐的命名规则
组件命名中应在符合组件功能、语义的同时方便搜索查找，如
1.2.2 做语法判断时用静态变量的方式
所谓静态变量就是不会改变的变量，比如一个商品的状态，0是已下单，1是已发货。上述的状态不会因为商品的不同而出现其他值。这时我们可以创建一个静态变量itemStatus，值是{“已下单”:0,”已发货”:1}
在使用的过程中有很好的可读性，且使用静态变量的方法易于后期维护
1.2.3 写好注释！！！
iVX的注释/备注分为三种，行内备注、行间备注和分组备注。相比行内备注，行间备注可读性更强，使用行间备注可对后续动作逻辑起到总结/解释或分段的作用；对于逻辑连接较为紧密的动作，可以将其归为一个组并使用分组备注，这个逻辑分组可以作为整体被移动或删除。
1.2.4 避免多层回调嵌套
同一个事件下内嵌的”回调”动作不要超过14个，会影响编辑器排版
建议：通过拆分”回调”动作到多个动作组处理；如果有很多数据筛选造成的层级嵌套，建议适当使用一些筛选函数来完成部分的工作(简单的如filter、map….等函数)
1.2.5 数据绑定的运算尽量简洁
对于需要数据绑定显示的内容，最佳实践应该是将数据处理转换为显示绑定的数据后再将其进行绑定显示，尽量避免在数据绑定处进行复杂的函数调用运算等操作，这样对异常数据结果的调试排查，以及数据绑定修改维护等都会更加方便
如：有一个统计按时出勤的出勤率百分比数据，那我们应该在查询到出勤数据后，计算好出勤率百分比后再赋值到相应的数据显示数组中，而不应该直接在数据绑定中进行百分比的运算
1.2.6 基于数据驱动的数据绑定渲染方法和基于对象驱动的属性修改避免混用
对于需要数据绑定显示的内容，那组件中的相关变化属性都应该由数据绑定来进行渲染，应避免直接在动作中对该组件进行设置属性的操作，避免渲染冲突
1.2.7 逻辑分组和复用
逻辑单元：小模块（可复用），函数（可复用），事件组（可复用），动作分组（不可复用）
1.3 安全问题
1.3.1 API尽可能放后台调用
1.3.2 上架版不要展示调试内容
可以初始化判断域名并调用函数console.log=function(){}来改写调试
1.4 代码可读性
1.4.1 三元表达式，最多一层
不要写成这样子：
多于一层，可以用变量绑定链来处理
变量绑定链：把每一个（或两个）判断拆分到一个变量里面（每个变量都有实际意义），即用多个变量去逐步实现复杂的三元表达式
优点：结构清晰，方便调试
举例：根据时间判断帖子发布于X秒/X分钟/X小时前
1.用变量分别记录时间差的秒数以及分钟数：
2.先判断是否在60秒以内：
3.然后判断是否在60分钟内：
4.最后绑定底层判断的变量：
二、前端
2.1 页面布局规范
2.1.1 尽量减少行列组件使用
不要单纯为了区分甚至占位而去使用行列组件2.1.2 绝对定位&相对定位
绝对定位：优化页面性能
相对定位：实现自适应和较复杂的布局，方便迭代
请根据具体情况取舍，大多数情况下推荐使用相对定位
2.2 前端编辑规范
2.2.1 不要用循环调用接口/服务
如确实需要，请使用触发器模拟循环
2.3 前端注意行为
2.3.1 完善页面刷新/回退逻辑
大部分使用浏览器的习惯为用浏览器自带回退键返回上一页，用F5/浏览器自带刷新按钮刷新当前页面。iVX制作的应用需考虑以上功能完善对应的逻辑，可使用路由做法/开启页面回退等解决。
2.3.2 不要在前端生成重要信息
比如红包，容易被黑客篡改中奖信息后提交到后台，建议使用后台去处理中奖的逻辑。
2.3.3 避免一个应用添加多个画布/3D世界
建议：不在多个页面添加画布，改成在画布内添加画布内页面来节约画布。
2.3.4 对于三个以上的表单类组件提交信息的，应使用表单容器
当某个提交功能如注册用户信息登记等，需要用到三个以上的表单类组件，如输入框，单选/多选，开关等，应使用表单容器，能高效对数据进行校验和归集，避免因校验等需求造成事件面板复杂的条件嵌套情况。
2.4 前端对象树结构
- 针对全局的动作组、变量等直接放到前台下；只在当前页面使用的动作组、变量等放到各自页面下；只在当前行/列下使用的动作组、变量等放到对应行/列下；只在当前动作组下使用的变量放到对应动作组下；且动作组、变量等都放置在组件前面；（如红线部分）
- 不同类型的对象分类放置：动作组放到一起，变量放到一起… 且>2的数量需用使用对象容器进行归类；（如绿线部分）
- 变量和常量需区分开；（如紫线部分）
- 建议：动作组在前，变量在后；
- 初始化获取数据，如果是某一个页面的数据，获取数据的逻辑直接做到对应页面上。
三、后台
3.1 鉴权方式
3.1.1 内部项目
ivx帐号体系统一使用userinfo接口获取当前用户登录信息
3.1.2 外部项目
三方系统根据需求定制，推荐方式：JWT TOKEN
1-用户输入登陆凭据（账户密码登录或者手机验证码登录等等）；
2-服务器验证凭据是否正确，然后返回一个经过签名的token加上过期时间；
3-客户端负责存储token，存在cookie中，过期时间设置比回传的实际少个几十秒；
4-之后的所有需要鉴权的API请求，header上带上这个token；
5-服务器对JWT进行解码，如果token有效，则处理该请求；
6-一旦用户登出，客户端销毁token。
3.2 服务/参数命名
3.2.1 服务命名
- 需做成公开服务/微服务的服务命名时带上路径内容（英文），方便搜索
3.2.2 参数命名 + 使用驼峰命名法，即首单词开头小写，后续单词开头大写，如：formTemplateName + 命名根据具体业务精确表示意思，比如某个根据用户所提交的某个表单实例的id查询该表单实例详情的服务，入参命名不要用id或formId，用formInstanceId表示表单实例id + ivx系统内部已经约定的通用参数名继续沿用，不在某个案例做特殊命名处理，如用户id：uid，案例id：nid + 参数是动宾或介宾词组合，风格可以参考https://unbug.github.io/codelf/ + 不要用拼音
3.3 基础参数说明
回参：- code：string/int，错误码，用来判断服务是否请求成功，如果出错根据错误码定位出错的地方。由于code可能和三方api有传递关系，所以类型可能是字符串或整数。通常约定利用ivx封装的服务返回值为200表示成功
- reason：string，老案例该参数名为detail，由于目前ivx系统占用了detail因此新建的服务命名用reason代替，该参数的值是当code不为200时的错误原因，可用于前端的错误提示和测试联调
- data：json，当需要服务返回数据时通常用data承载数据
入参：
- pageIndex：从0开始，表示页码索引
- limit：输出数量，所返回数据的长度
- 排序默认以创建时间倒序排列，如果需提供筛选，自行设定参数；
- 除以上参数，可根据实际需求增加其他参数
- 非必要参数不需要返回，一些比较私密的但需要参与逻辑处理的数据，尽可能在后台获取并处理，将处理后的结果返回给前台
3.4 数据库文档规范
- 每一个应用都应有数据库文档
- 文档中最好记录增删改查内容，如：
| 字段名称 | 字段类型 | 可能值 | 字段说明 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 编码类别 | int | 1 | 2 | 3 | 4 | 5 | 1-资产 2-负债 3-权益 4-成本 5-损益科目 | ||||
| 科目编码 | string | 此处只记录完整编码 | |||||||||
| 科目名称 | string | 只记录当前层级的科目名称 |
- 字段类型说明：
3.5 接口文档规范
- 每一个应用都应有接口文档
- 文档中最好记录增删改查内容
- 对于服务遵循以下格式：
路径：api/1000xxxx/getUserInfoByName（不做公开服务可不写）
入参 | 字段名称 | 字段类型 | 可能值 | 字段说明 | | :—- | :—- | :—- | :—- | | userName | string | | 用户名称 |
出参
| 字段名称 | 字段类型 | 可能值 | 字段说明 |
|---|---|---|---|
| code | string/int | 200 | 错误码 |
| reason | string | 错误详情，code不为200时返回 | |
| data | obj | {userName:”xx”,uid:xxx} | 对象数据，code为200时返回 |
3.6 后台注意行为
1. 事务中不要出现API调用 比如：我们开发系统A给用户使用，某些操作需要和用户自己的系统B进行数据一致的操作，在调用某个A系统服务的时候除了在A系统内要做到数据一致同时要同步给系统B，系统A/B交互靠api调用。由于在一个事务的开始阶段数据库会生成一个锁，当事务处理时间被api服务拉长的时候，这个时间内如果存在其他服务对数据表的读写进程，那么很容易造成死锁，事务会回退。 针对以上场景，如果AB系统交互的服务只涉及1个api调用，那么api调用应该放在服务中而不是事务中去进行。当1个服务涉及多个api调用时，推荐的做法是使用异步任务队列的方法：创建一个存api调用任务的表，当事务成功后将需要发送的api参数等存入任务表，然后在定时服务里去处理api发送的需求。任务队列的缺点是有延迟，优点是当api不在我们可控范围时能有效保证我方的数据同步义务完成。2. 不要在ivx-loop中循环进行读写操作 如果要处理数据库中的批量数据，可以在服务开始时获取所有数据，在使用js处理数据后，通过按id更新的方式覆盖原有数据
3. 区分冷热数据 常用的数据放一个表，不常用的放一个表，通过ID关联
4. 纵向关系数据可把所有父级ID都存储 比如：父级ID、父级的父级ID….优化数据接口，可提升数据查询效率
5. 多个数据库有写入请使用事务 多张表连续更新，会存在更新失败的情况，需要对之前的步骤进行回滚，所以一定需要事务
6. 数据库执行写入操作后不要立即输出/统计 原因：读写分离造成的，建议：可延迟0.2s进行输出/统计，又或者是回调动作里面获取提交结果/更新结果
7. 使用索引 当需要查询某个编号的数据的时候，可以给编号字段打开独立唯一索引 原因：打开独立唯一索引后，查询速度会很快
8. 不要在数据很多时修改字段类型 例如1万条以上的数据
9. 正确使用count和sum运算 每次插入操作的时候计算，另外存
3.7 **后台对象树结构**
后台通用的服务、动作组、变量放到通用模块容器下，如获取用户信息、鉴权等；数据库单独用一个对象容器进行归类；不同的业务模块用不同的对象容器进行归类；
e
若有收获，就点个赞吧
0 人点赞
