1.代码参考的是页面可视化搭建框架 pipeline,
项目地址是 https://github.com/CntChen/cntchen.github.io/issues/17 总结文档地址
- 项目地址: https://github.com/page-pipepline
- 体验地址: https://page-pipepline.github.io/pipeline-editor/dist/#/
- 项目文档: https://github.com/page-pipepline/pipeline-document
页面可视化搭建工具在业务中的落地, 需要根据不同的业务场景进行业务组件和页面模板的自定义开发. 这对页面可视化搭建工具提出3个要求:
-
页面可视化搭建工具要支持业务现有的前端框架.
避免后续组件和模板自定义开发时的工作量和割裂感. 我们是希望复用现有前端框架组件, 而不是用另一个前端框架重写一遍.
-
组件和模板的编写方式需遵循较简单的编写约定, 避免开发人员难上手和写起来不舒服.
-
自定义模板和组件和在开发模式下进行调试和测试.
页面可视化搭建工具必然会对页面模板和页面组件的编码方式进行限定. 这要求就页面可视化工具在页面模板和页面组件上的约束较少, 减少对前端框架代码组织方式的入侵点.
2。可视化页面搭建几个技术要点
- 页面组件化
- 页面模板
- 页面可视化编辑
- 组件层级关系
- 页面打包
- 实时预览
- 页面组件开发
2.1页面组件化
2.1.1 常用的基础组件 封装
2.1.2 常用的一些业务 组件的封装
2.1.3 组件应该适配组内的开发框架
2.2页面模板
2.2.1页面模板包含完整的业务逻辑, 有助于快速生成业务页面. 不同的页面模板适用于不同的业务功能, （主要是用于快速生成页面 大体布局，适用于广告业 ，后台模块，等等）
2.3页面可视化编辑 页面编辑包含2个部分: 编辑页面组件和编辑页面内容
2.3.1 编辑页面组件 组件树 动态组件、
2.3.2 组件化页面的页面内容编辑, 是对页面中各个组件的组件属性(Props)进行配置.
2.3.2.1 组件配置数据
2.3.2.2 组件差异化 组件配置表单 技术难点: 如何用最简单的方式生成配置数据编辑表单
2.3.3 组件层级关系 层级关系对数据流和布局的影响 技术难点: 如何组织页面组件的层级关系. 不嵌套的前端框架组件
在移动端, 使用非嵌套组件层级规则的页面可视化搭建工具有: 阿里云凤蝶、pipeline 等.
2.4页面预览 实现页面预览有两种方式: 页面挂载和后台渲染.
2.4.1 页面挂载 页面挂载指在编辑器前端页面的某个元素节点(div)上渲染出用户编辑的效果
页面挂载方式有以下特点:
实现页面预览技术方案可行, 实时渲染速度快.
为实现渲染, 编辑器的技术选型需和组件库前端框架一致.
编辑器源码和组件库源码耦合.
组件库组件渲染后的代码逻辑和样式布局, 可能会污染编辑器页面.
2.4.2 后台渲染
使用后台渲染的预览方式, 编辑器前端页面并不需要渲染组件库的组件; 甚至不需要组件源码, 只需知道各个组件的描述信息. 后台渲染有以下特点:
可以实现编辑器和组件库前端框架的分离.
可以实现编辑器和组件库各组件的分离.
可以避免预览页面的逻辑和样式污染编辑器环境.
要求后台和组件库提供页面后台渲染能力, 并要求后台渲染速度快, 用户需要"实时"预览.
难点: 如何实现组件库的快速后台渲染, 从而实现编辑器和组件库前端框架的分离.
页面预览可以用你提到的两种方式的结合体，即iframe+dom挂载的方式，通过iframe来隔离框架样式上的问题，用postMessage来通信就好了（网友总结 ）
自动生成配置表单 （网友总结 ）
-
表单项间的关联没做处理过. 比较期望的情况是配置项之间是正交的, 不会相互关联.
一些关联感觉可以在组件内维护关系, 不在配置项上维护. 比如姓名的姓氏和名字, 可以有两个配置项, 但其关系在组件内维护.
另一种情况, 数据就是有关联, 配置项A的输入影响配置项B的合法输入. 这种用JSON Schema 比较难覆盖, 不过 JSON Schema 支持多选一的配置项, 就是整个配置数据可以在多个数据结构中选一个. -
表单项的异步数据获得是请求网络数据作为表单项吗，比如获取一个优惠券id, 然后填入表单中? 如果是这种场景, 很好做的, JSON Editor 会暴露表单的修改方法, 用一个浮层去加载需要的配置项值, 然后用修改方法修改配置项.