使⽤ivx开发web全栈项⽬初探（⼀）
⼀、前⾔
本⼈是⼀枚喜欢探索⿊科技的web前端，没事喜欢研究研究框架，了解⽹络技术/⼯具等等。最近在研究saas和paas的时候在知乎专栏有⼤佬提到了⼀款在线页⾯编辑系统——。看到这⾥在做的⼤佬估计表⽰不屑，不就是在线编排h5的⼯具⽹站嘛，这种东西国内不多得是：135编辑器、秀⽶、易点，⼤同⼩异都是集成的富⽂本编辑器，允许你使⽤封装好的事件触发器、动画效果、⾃定义css样式，感觉没什么技术含量，都是公司的运营⼈员在使⽤。当然，简单的系统根本引不起技术⼯作者的研究兴趣，那么ivx的难度可以满⾜你对“⿊科技”的兴趣。
⼆、⼯具简介
调查了⼀下ivx的技术团队，还真是来头不⼩，是ih5团队（国内⾮常知名的硬核h5编辑器）。ih5在业内名⽓着实不⼩，尤其是在设计界，让⽆数设计师不⽤再到处前端程序员转⽽⾃⼰开发。ivx正是在ih5基础上进⾏的⼤迭代，⽀持⼩程序、h5、企业级⽹站的开发。进⼊官⽹，点击使⽤，不⽤注册直接跳转到编辑器页⾯…看来对⾃⼰的产品很有信息啊，编辑器页⾯出现的时候，我的内⼼是奔溃的。
三、初体验
emmm…androidStudio是你吗?？没事没事，⼤概只是看着多⽽已，随便点⼀点，添加点元素进去就好了。添加了，然后呢，怎么绑定事件，怎么让元素动起来，布局好不习惯啊，想⽤flex。还好有视频教程和⽂档，点开发现这视频教程也太多了吧，86个视频，看⽇期貌似还在持续更新…这时候我发现有数据库和登录？！我有⼀个⼤胆的想法：⽤这个建站岂不是什么都可以⾃⼰做，不⽤再叫个后
端和我分钱，嘻嘻。秉承着格物致知（捞更多钱）的精神，我开始了长达3h的视频学习，不学不知道，有很多的技术亮点，感觉看视频学了个七七⼋⼋，开始实践。接下来⽤实例给⼤家介绍⼀下这个⼯具的⼀些基本操作。
四、开始开发
（⼀）界⾯模块说明
⾸先是对于界⾯中各个部分的说明，要寄出我的千年⽼ps技术了，各位看官请看下图：
1. 可视化部分，对象树最终会渲染到这个部分，如果使⽤了循环组件（for）或条件组件（if）则预览部分会与成品出现⼀定差异，这个
案例由于是数据驱动⽣成的，最终的浏览器效果是这样组件的具体使⽤⽅法下⽂再说；
2. 前后端对象树
1. 对于前台⽽⾔，对象树是页⾯、dom、⾃定义⽅法/函数、系统（包含⼀部分window对象⽅法、封装的路由⽅法等）、对
象（⽤于配置分享链接缩略图、获取⽤户位置等）；
2. 对于后台⽽⾔，对象树包括服务（类似⼀套⾃定义的数据库操作流程，可定义参数和返回值，供前台调⽤）、数据库（关系型数
据库表，每当有数据写⼊可以在表内查看、⼿动修改、删除）、⽤户数据库（平台封装好的⼀套⽤户表，包括图形验证码校验，短信注册，密码哈希存储）、商城数据库（封装好的商城功能套件，有购物车，具有完备信息的商品表，交互函数等）、红包数据库等；
3. 变量，有⽂本、数值、布尔、数组、对象、⼆维数组、对象数组、时间。这⾥单独提变量是因为这也是web开发的基础，贯穿于前后
端；
web后端是指什么
4. 可⽤组件，点⼀下就会在对象树⾥添加组件；
5. 舞台控制，选择舞台设备型号及⼤⼩；
6. 预览及发布控件；
7. 出问题了就对着客服⼩（貌似）喊救命，她会很耐⼼地教你如何使⽤。
（⼆）开始开发——基本操作
选中前台->点击页⾯，可以看到右侧对象树中有了页⾯，在页⾯中添加元素就构成了我们常见的单页效果。
页⾯中的元素包括页⾯本⾝可以绑定事件，如图：
点击这个叹号，让我们对它进⾏编辑，这⾥要强调⼀下，这个便是低代码编程的具体实现，⽤可视化组件代替代码逻辑
1. ⽩⾊的点表⽰本⾏及内部是否启⽤，相当于代码中的//；
2. 钩⼦/事件监听条件；
3. 条件判断组件，中间有封装好的条件，可以添加并列的&&以及||逻辑
4. 有这个箭头的地⽅可以选中右侧对象树中的组件或变量，并可做进⼀步的操作，可以做到很复杂的逻辑：
从图中可以看出可以嵌套js语法，结合起来开发项⽬，速度简直要飞起来。不过当项⽬越来越⼤，迭代的功能越来越复杂，这些组件看起来可能就没这么清晰了，还好ivx的团队考虑到了这点，可以将动作事件进⾏封装调⽤：
（三）开始开发——循环组件/条件组件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。