使用ivx开发web全栈项目 初探（一）

一、前言

本人是一枚喜欢探索黑科技的web前端，没事喜欢研究研究框架，了解网络技术/工具等等。最近在研究saas和paas的时候在知乎专栏有大佬提到了一款在线页面编辑系统——ivx。看到这里在做的大佬估计表示不屑，不就是在线编排h5的工具网站嘛，这种东西国内不多得是：135编辑器、秀米、易点，大同小异都是集成的富文本编辑器，允许你使用封装好的事件触发器、动画效果、自定义css样式，感觉没什么技术含量，都是公司的运营人员在使用。当然，简单的系统根本引不起技术工作者的研究兴趣，那么ivx的难度可以满足你对“黑科技”的兴趣。

二、工具简介

调查了一下ivx的技术团队，还真是来头不小，是ih5团队（国内非常知名的硬核h5编辑器）。ih5在业内名气着实不小，尤其是在设计界，让无数设计师不用再到处找前端程序员转而自己开发。ivx正是在ih5基础上进行的大迭代，支持微信小程序、微信h5、企业级网站的开发。进入官网，点击使用，不用注册直接跳转到编辑器页面…看来对自己的产品很有信息啊，编辑器页面出现的时候，我的内心是奔溃的。

三、初体验

emmm…androidStudio是你吗?？没事没事，大概只是看着多而已，随便点一点，添加点元素进去就好了。添加了，然后呢，怎么绑定事件，怎么让元素动起来，布局好不习惯啊，想用flex。还好有视频教程和文档，点开发现这视频教程也太多了吧，86个视频，看日期貌似还在持续更新…这时候我发现有数据库和微信登录？！我有一个大胆的想法：用这个建站岂不是什么都可以自己做，不用再叫个后端和我分钱，嘻嘻。秉承着格物致知（捞更多钱）的精神，我开始了长达3h的视频学习，不学不知道，有很多的技术亮点，感觉看视频学了个七七八八，开始实践。接下来用实例给大家介绍一下这个工具的一些基本操作。

四、开始开发

（一）界面模块说明

首先是对于界面中各