可视化页面生成工具

1,113 阅读2分钟

一、介绍

通过拖拽可视化组建从而生成html单页,其中涵盖了图片、文字、轮播图、视频播放、视频直播、tab切换、组合组建、上传组建以及优秀主题模版收录。

image.png

image.png

二、工作原理

1、简单的功能交互

image.png

2、内部运行机制

image.png

当页面开始运行的时候会注册基础数据池、配置数据池、视图组件池;
当页面进行交互的时候,通过菜单进行触发点击事件会同时区视图组件池和基础数据池拉取对应的内容,并同步到view(注:不会修改任何的基数数据值),同时拉取对应的配置组件池中的组件和基础数据进入config层
当所用的交互完成后触发保存或者查看的时候会把view层中的所有数据,处理到的一个队列中,筛出所用的css,html,js 形成一个json和一个html 形成一个单页。

三、上传组建

组件上传 其实是一个组件包的管理,组件包中涵盖了html,css,js ,config.json,将所有的组件进行管理,好处是迭代周期快、组件避免了编辑器和视图页面两次开发的成本

1、html

   <div class="body"><input type="text"/></div>

1、css

.body{}

3、js

 // 代码块
 const submit = ()=>{
    // 代码块
 }

4、config.json

 [{
   type:'input/textarea/radio/checkbox/video/imgupload',
   tile:'手机号',
   name:'phone',
   value:'',
   required:true/false,
   reg:/\d{11}/
 }]

image.png

当页面初始化注册时候会把上传的组件包集合同步到基数数据池中、当交互的时候 数据包中的css/html/js 会先进行一个融合 然后进入到一个承载器中并把这个承载器放同步经view,包config.json中的配置数据与配置组件中的数据进行合成,并进入到config