Skip to content
/ juggle Public

基于 vue + vant 实现的json页面渲染框架。使用json描述页面结构,从而实现页面的模板化、配置化。思路来源:双11活动广告页

License

Notifications You must be signed in to change notification settings

Cc-Edit/juggle

Repository files navigation

juggle

公告:

项目目前只是一个简单的渲染工具,我希望它未来应该是一个功能更强大,配置更灵活的开发工具。
目前能想到还未实现的大功能点如下:

  1. 静态配置文件的防缓存
  2. 组件的按需打包,按需加载
  3. 全局状态的约定以及管理
  4. 拖拽布局后台实现
  5. 复交互类型页面的配置
学习讨论小组🍻 打赏(赠送学习资料:webNote) 🎊
wechat.png img.png

介绍

阿里推出飞冰来进行页面搭建,但是飞冰的物料开发不是想象中的简单。   
开发此项目,可以直接使用市面上线程的组件库(iview, vux, Element),也可以基于现有组件库封装自定义组件。  
通过拖拽布局,生成页面配置 json 文件,再通过json动态渲染页面。  
此项目包含两部分,report.html模板渲染页面以及一个页面配置服务。  
页面配置服务用来拖拽生成页面配置json文件,目前还在实现中,初期直接使用本地配置文件。   
report.html模板渲染页面已经实现并已在线上进行验证   

方案说明:

在一个页面上承载多个页面,使页面配置化。首先想为什么这么做?这么做有什么好处?
第一: 减少重复开发成本,多个页面,多个项目共有的自定义组件,需要有一套公共的仓库来进行维护。
第二: 将简单工作交给PM或者运营。
第三: 提高开发效率,以往做一个新页面的开发时间,使用配置生成只需要10分钟。

抽象的看我们日常开发的页面,可以分为以下几类:

  1. 活动页 特点是动画样式丰富,活动可复用性高,配置灵活。
  2. 录入页 特点是表单校验,输入项校验。
  3. 回显页 特点是请求单向,没有用户操作。

我们把按钮,输入框,日期选择等称为 元素,
由不同的组合而成的具有特定功能的集合称为 组件,
最终不同的组件集合起来就是一个页面模板。

我们这次的项目目的就是实现页面模板化,基于现有的element,vuex,iview作为元素库。
基于元素库封装自定义组件。然后通过组件的灵活配置,实现页面模板化。

页面模板的载体是 report.html 页面
页面模板文件为一个json文件,位于 public/pageConfig 目录下,以 config 开头的js文件。
通过script标签异步引入,配置参数挂载到 window.pageConfig 中,再通过Vue实例向下传递。

页面由不同的组件搭建而成,按照组件用途分为以下三类:

  1. collection 容器级别组件,例如:下拉列表容器,展开收起容器,tab切换容器,侧边栏容器等
  2. block 块级别组件,用来展示数据的最小单元,例如:多行内容块,左右两列内容块, flex等分内容块等
  3. public 公共组件,例如:全局的提示窗,全局的页头页尾,全局的loading等

以上组件分类位于/src/components目录下。
再来思考一个问题,如果一个页面可配置,就要满足以下要求,我称之为约定:

  1. 同一个位置有可能放置任意组件,要求所有组件接受相同的参数。
  2. 基于第一点,要求每个组件对prop参数的要求应该是统一的。
  3. 组件之间应该有层级关系,容器级别组件(collection)拥有承载块级组件的能力(block)并且容器之间可以嵌套。
  4. 容器组件应该拥有自主获取数据的能力,例如三个tab标签切换时,每个tab都对应单独的接口以及列表。

选型

首先此项目支持各种基于vue的前端ui组件库,例如:
PC端:

Element(https://github.com/ElemeFE/element)
iview(https://github.com/iview/iview)
muse-ui(https://github.com/museui/muse-ui)
ant-design-vue(https://github.com/vueComponent/ant-design-vue)

移动端:

mint-ui(https://github.com/ElemeFE/mint-ui)
vant(https://github.com/youzan/vant)
cube-ui(https://github.com/didi/cube-ui)

因为vux对vue-cli2.0以上版本不支持,所以不再支持的组件库中。 此项目使用有赞团队的 vant 作为基础组件库,vant在组件数量,对新版本vue/cli的支持程度,以及更新维护的频率都优于其他框架。 如果你有自己喜欢的组件库,可以手动安装,直接使用即可。

demo:

之前实现的组件因为太定制化了,所以不太适合开源出来给大家看。 所以在这里我们从头开始重新实现,具体实现的是一个电商平台的落地页。 最近是双十一,各个电商平台开始做大量的活动,与之对应的是大量的落地页。 我印象中之前看到过一篇文章,大致是讲阿里的落地页都是自动生成的。 细粒度的组件化,加上服务端渲染是可以实现动态生成页面的。 由渲染服务器根据接口内容来判断用什么组件。 由于只是demo,很多细节不会做的很细,只是给大家演示一下工作方式。 真正的组件需要结合业务进行整理,抽象出自己的组件库,电商多是展示,B端多是列表,场景不同通用组件就不同。

新增组件步骤:

每次接触到新需求时,应该尽可能抽象出来成为独立组件,不论是从提高开发效率的角度还是提高测试效率的角度看,这么做都是必要的。 juggle不关注组件,只关注结构。所以你可以直接引入组件库的组件,也可以基于组件库二次开发封装一个新的组件。 新的组件放在 /src/components/ 目录下。按照组件类型区分为block,container,public。 在对应目录下新增组件文件即可。 第二步是将新添加的组件注册到 /src/htmls/main/report.js 入口的mixin中即可 简单两步就可以在配置中使用该组件了:

   {
       "templateId": "BlockFlexBox",
       "prop": {
         "dataKeyChain": "bannerList",
         "styleOptions":{}
       },
       "childItem": []
   }

要注意,juggle的结构对组件的prop进行了约定,只有:prop,childItem,baseData 三个参数。 也就是说,新组件的所有参数都要包含在 prop 下,在组件内部进行拆解。

本地运行:

clone 此项目,依次执行以下命令

	$ npm install 
	$ npm run serve

打开页面即可查看:http://localhost:8080/report.html?pageCode=0001

About

基于 vue + vant 实现的json页面渲染框架。使用json描述页面结构,从而实现页面的模板化、配置化。思路来源:双11活动广告页

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published