image.png

  1. 渲染区域 定义为 preview 组建，css 单独抽离方便h5端渲染使用，props部分保持传递

  2. 左边作为可配项 如下：

    1. {
    2.      component: 'notice', // 对应组件
    3.  text: '公告', // 组件名称
    4.  styleComponent: 'noticestyle', // 对应右边样式可配置组件
    5.  setStyle: {
    6.    ... 组件所需初始化样式，会在 styleComponent 配置组件中解析
    7.  },
    8. ...可以配置其他属性
    9. }

  3. 组件和右边样式组件可放入同一文件夹下例如（components -> notice-> [notice.vue ; noticeStyle.vue] ）方便查找。

    配置数据

  • css级别
  • 字体属性
  • 文本属性
  • 背景属性
  • 容器属性
  • 边框属性
  • 定位属性
  • 鼠标属性

  • …

    使用Json Schema的好处:

  • 配置数据校验，避免编辑错误

  • 生成属性编辑区域
  • 组件与配置数据解耦
  • 组件与设计器解耦
  • 数据趋于标准化，降低后期维护的差异性

image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png

image.png

马克可视化

好看的可视化搭建(可参考)

鲁班H5

有赞(可参考)

json1

  1. [
  2.     {
  3.         "color":"#f9f9f9",
  4.         "description":"",
  5.         "type":"config",
  6.         "title":"test",
  7.         "category":[
  9.         ],
  10.         "is_global_setting":"1"
  11.     },
  12.     {
  13.         "sub_entry":[
  14.             {
  15.                 "type":"image_ad_selection",
  16.                 "title":"test奥术大师",
  17.                 "image_id":"1934772533",
  18.                 "image_url":"http://img.yzcdn.cn/upload_files/2020/05/13/FqoMR23-ESyNk_DplY3NALcwb6th.jpg",
  19.                 "image_thumb_url":"upload_files/2020/05/13/FqoMR23-ESyNk_DplY3NALcwb6th.jpg!100x100.jpg",
  20.                 "image_width":2560,
  21.                 "image_height":1440,
  22.                 "link_id":"",
  23.                 "link_type":"",
  24.                 "link_title":"",
  25.                 "link_url":"",
  26.                 "alias":""
  27.             },
  28.             {
  29.                 "type":"image_ad_selection",
  30.                 "title":"特同时",
  31.                 "image_id":"1934772966",
  32.                 "image_url":"http://img.yzcdn.cn/upload_files/2020/05/13/Fv2z0Ji2F3mWLw9SvbPOdlzdp6oF.png",
  33.                 "image_thumb_url":"upload_files/2020/05/13/Fv2z0Ji2F3mWLw9SvbPOdlzdp6oF.png!100x100.jpg",
  34.                 "image_width":800,
  35.                 "image_height":533,
  36.                 "link_id":"",
  37.                 "link_type":"",
  38.                 "link_title":"",
  39.                 "link_url":"",
  40.                 "alias":""
  41.             }
  42.         ],
  43.         "show_method":"5",
  44.         "count":"6",
  45.         "image_fill_style":"1",
  46.         "border_width":0,
  47.         "image_style":"2",
  48.         "corner_type":"2",
  49.         "indicator":"3",
  50.         "page_margin":0,
  51.         "type":"image_ad"
  52.     },
  53.     {
  54.         "image_fill_style":"1",
  55.         "border_width":0,
  56.         "show_method":"5",
  57.         "size":"0",
  58.         "count":6,
  59.         "sub_entry":[
  60.             {
  61.                 "link_type":"",
  62.                 "image_height":140,
  63.                 "image_url":"http://img.yzcdn.cn/upload_files/2017/12/20/Fn1QagHCS-YmOSxedC8dn5abkQ3j.png",
  64.                 "link_url":"",
  65.                 "alias":"",
  66.                 "link_title":"",
  67.                 "image_width":750,
  68.                 "type":"image_ad_selection",
  69.                 "title":"",
  70.                 "image_id":1006290070,
  71.                 "image_thumb_url":"upload_files/2017/12/20/Fn1QagHCS-YmOSxedC8dn5abkQ3j.png!100x100.jpg",
  72.                 "link_id":""
  73.             }
  74.         ],
  75.         "type":"image_ad"
  76.     },
  77.     {
  78.         "image_fill_style":"1",
  79.         "border_width":0,
  80.         "show_method":"5",
  81.         "size":"0",
  82.         "count":6,
  83.         "sub_entry":[
  84.             {
  85.                 "link_type":"",
  86.                 "image_height":140,
  87.                 "image_url":"http://img.yzcdn.cn/upload_files/2017/12/20/FlUFkXVnIBYn993LV3Se4O3yKmyO.png",
  88.                 "link_url":"",
  89.                 "alias":"",
  90.                 "link_title":"",
  91.                 "image_width":750,
  92.                 "type":"image_ad_selection",
  93.                 "title":"",
  94.                 "image_id":"1006287221",
  95.                 "image_thumb_url":"http://img.yzcdn.cn/upload_files/2017/12/20/FlUFkXVnIBYn993LV3Se4O3yKmyO.png!100x100.jpg",
  96.                 "link_id":""
  97.             }
  98.         ],
  99.         "type":"image_ad"
  100.     },
  101.     {
  102.         "type":"paid_content",
  103.         "show_title":"1",
  104.         "show_title_all":"1",
  105.         "title":"最新内容",
  106.         "content_from":"newest",
  107.         "sub_entry":[
  109.         ],
  110.         "sub_entry_bak":[
  112.         ],
  113.         "default_image_url":""
  114.     },
  115.     {
  116.         "type":"paid_content",
  117.         "show_title":"1",
  118.         "show_title_all":"1",
  119.         "title":"最新内容",
  120.         "content_from":"newest",
  121.         "sub_entry":[
  123.         ],
  124.         "sub_entry_bak":[
  126.         ],
  127.         "default_image_url":""
  128.     }
  129. ]

json2

  1. [
  2.     {
  3.         "type":"config",
  4.         "title":"微页面标题",
  5.         "color":"#f9f9f9",
  6.         "is_global_setting":"1",
  7.         "category":[
  9.         ],
  10.         "description":""
  11.     },
  12.     {
  13.         "sub_entry":[
  14.             {
  15.                 "x":0,
  16.                 "y":0,
  17.                 "width":1,
  18.                 "height":1,
  19.                 "type":"cube_selection",
  20.                 "title":"",
  21.                 "image_id":"1934772533",
  22.                 "image_url":"http://img.yzcdn.cn/upload_files/2020/05/13/FqoMR23-ESyNk_DplY3NALcwb6th.jpg",
  23.                 "image_thumb_url":"upload_files/2020/05/13/FqoMR23-ESyNk_DplY3NALcwb6th.jpg!100x100.jpg",
  24.                 "image_width":2560,
  25.                 "image_height":1440,
  26.                 "link_id":"",
  27.                 "link_type":"",
  28.                 "link_title":"",
  29.                 "link_url":"",
  30.                 "alias":""
  31.             },
  32.             {
  33.                 "x":1,
  34.                 "y":0,
  35.                 "width":1,
  36.                 "height":1,
  37.                 "type":"cube_selection",
  38.                 "title":"",
  39.                 "image_id":"1934772966",
  40.                 "image_url":"http://img.yzcdn.cn/upload_files/2020/05/13/Fv2z0Ji2F3mWLw9SvbPOdlzdp6oF.png",
  41.                 "image_thumb_url":"upload_files/2020/05/13/Fv2z0Ji2F3mWLw9SvbPOdlzdp6oF.png!100x100.jpg",
  42.                 "image_width":800,
  43.                 "image_height":533,
  44.                 "link_id":"",
  45.                 "link_type":"",
  46.                 "link_title":"",
  47.                 "link_url":"",
  48.                 "alias":""
  49.             }
  50.         ],
  51.         "layout_width":2,
  52.         "layout_height":1,
  53.         "width":2,
  54.         "height":1,
  55.         "show_method":0,
  56.         "page_margin":0,
  57.         "border_width":0,
  58.         "type":"cube_v3"
  59.     },
  60.     {
  61.         "type":"goods_recommend",
  62.         "titleComponents":{
  63.             "title":"猜你喜欢",
  64.             "type":0,
  65.             "showMethod":"0",
  66.             "subTitle":"",
  67.             "backgroundColor":"#f9f9f9",
  68.             "showTitleComponent":1,
  69.             "source":0
  70.         },
  71.         "goodsComponents":{
  72.             "countType":"0",
  73.             "goods":[
  75.             ],
  76.             "goods_list":{
  78.             },
  79.             "goods_from":"0",
  80.             "display_scale":"0",
  81.             "goods_number_v2":"6",
  82.             "size":"1",
  83.             "size_type":"0",
  84.             "buy_btn":"1",
  85.             "buy_btn_type":"1",
  86.             "buy_btn_express":"0",
  87.             "button_text":"",
  88.             "title":"1",
  89.             "show_sub_title":"1",
  90.             "price":"1",
  91.             "show_corner_mark":"0",
  92.             "corner_mark_type":"0",
  93.             "corner_mark_image":"",
  94.             "default_image_url":"",
  95.             "image_fill_style":"1",
  96.             "page_margin":15,
  97.             "goods_margin":10,
  98.             "border_radius_type":"1",
  99.             "text_align_type":"left",
  100.             "text_style_type":"2"
  101.         }
  102.     },
  103.     {
  104.         "color":"#f9f9f9",
  105.         "hot_search_keys":[
  107.         ],
  108.         "hot_search_keys_new":[
  110.         ],
  111.         "position_type":"0",
  112.         "position_show_method":"0",
  113.         "border_style_method":"0",
  114.         "border_style_color":"#fff",
  115.         "text_color":"#969799",
  116.         "text_align_method":"0",
  117.         "show_search_component":"1",
  118.         "border_style_height":40,
  119.         "type":"search"
  120.     },
  121.     {
  122.         "color":"#f9f9f9",
  123.         "hot_search_keys":[
  125.         ],
  126.         "hot_search_keys_new":[
  128.         ],
  129.         "position_type":"0",
  130.         "position_show_method":"0",
  131.         "border_style_method":"0",
  132.         "border_style_color":"#fff",
  133.         "text_color":"#969799",
  134.         "text_align_method":"0",
  135.         "show_search_component":"1",
  136.         "border_style_height":40,
  137.         "type":"search"
  138.     },
  139.     {
  140.         "action_text":"进入店铺",
  141.         "type":"store"
  142.     },
  143.     {
  144.         "type":"notice",
  145.         "content":"hjhjhjh",
  146.         "bg_color":"#fff8e9",
  147.         "color":"#646566"
  148.     },
  149.     {
  150.         "type":"oriented_poster"
  151.     }
  152. ]

搭建能力整理对比

政采云前端团队

项目：前台页面可视化搭建系统
技术栈：Vue + Node.js + MySQL
功能板块：

  1. 开箱即用的脚手架环境
  2. 统一组件规范及管理平台
  3. 便捷的页面搭建及数据配置能力
  4. 多环境便捷的一键式操作
  5. 多系统能力间的横向打通
  6. 多平台搭建支持（PC/H5/数据大屏）

技术难点：

  1. Schema 规范设计与可视化配置
  2. 动态组件页面的 SSR 渲染
  3. 页面静态分发与动态路由

实现成本：系统大概 100 人日，持续迭代中
使用人数：80+（前端、运营、产品）
已搭建页面数量：500 多张页面
项目价值：随着公司业务不断发展，营销活动需求与日俱增，不同地区定制化需求日渐增加，为保证同等的开发资源支撑逐步增加的运营需求，可视化搭建孕育而生。它在一定程度上规范了前端开发模式，提升前端效率的同时，更为业务赋能，为运营、产品等业务方提供了页面生成、数据配置、快速发布的能力，从而更快速响应业务需求。

image.png

淘系前端搭建服务团队

项目：《淘系技术部-天马搭建服务介绍》
技术栈：React + Node.js(midway) + Java
功能板块：

  1. 基础抽象的搭建模型 CURD
  2. 统一的前端模块规范和管理平台
  3. 统一的渲染引擎
  4. 开箱即用的搭建脚手架

技术难点：

  1. 面向多端、国际化的模块研发、搭建和渲染能力，包括搭建一个小程序
  2. 多终端的缓存架构
  3. 搭建和投放之间的协议和数据能力

实现成本：大概1000人日
使用人数：4w+
已搭建页面数量： 将近 1 百万张页面
项目价值：阿里集团领域最深，范围最广的搭投技术体系，已服务集团 10 个以上 BU 的搭建应用

image.png

京东前端团队

项目：MPM 卖场可视化搭建系统
技术栈：Vue + Node + MySQL + Redis
功能板块：

  1. 丰富的搭建物料：30+ 个组件、500+ 个模板
  2. 强大的配置能力：楼层 BI 排序、自动化埋点、页面健康诊断
  3. 多端渲染：支持 H5 客户端、直出端、小程序端三套渲染

技术难点：

  1. 可自由组合的数据模型；
  2. 高效可维护的多端渲染引擎；
  3. 搭建场景下的页面加载优化

实现成本：大概 1200 人日
使用人数：1400+
已搭建页面数量： 19000+ 张页面
项目价值：历年来参与日常活动及多次大促，承载了京东深圳业务 80%+ 的卖场页面。

image.png

淘系 imgcook 前端团队

项目：《imgcook - 智能代码生成平台》
技术栈：React
功能板块：UI生成引擎、逻辑生成引擎、可视化干预平台
技术难点：

  1. 如何借助机器学习解决前端业务问题
  2. 如何用智能化手段尝试解决搭建最为关注的效能问题

实现成本：大概500+人日，持续迭代中
使用人数：7000+（内部 + 外部用户）
已搭建页面数量： 2w+张页面（模块）

image.png

淘系前端营销活动团队

项目：方舟
技术栈：React + Node.js(midway)
功能板块：

  1. 面向营销场景的搭建物料体系：模块中心、模型中心、楼层中心、主题中心
  2. 面向营销场景的两套搭建解决方案：人工搭建、智能化搭建
  3. 面向营销场景的多角色线上协同管理解决方案

技术难点

  1. 面向营销场景的模块标准化和低代码生产方案
  2. 面向营销场景的智能化页面生产方案
  3. 面向营销场景的跨页面统一模块管理升级方案
  4. 面向营销搭建场景的终端秒开性能优化方案

实现成本：700+人日，持续迭代中
已搭建页面数量：2w
使用人数：2500+
项目价值：

  1. 业务侧：针对包含双11在内的高频次，大规模，高投入的阿里营销活动体系，解决大量页面的生产效率和面向消费者的效能问题
  2. 技术侧：针对营销搭建场景里的物料生产瓶颈，生成的页面消费者端体验，解决前端的研发效率和消费者端极致体验问题

image.png

淘系飞冰前端团队

项目：iceluna中后台低代码搭建中台
技术栈：React + Nodejs(Midway) + Mysql + Tair
功能板块：

  1. 低代码引擎
  2. 低代码编辑器
  3. 开箱即用的PaaS平台服务
  4. 搭建物料的生产与管理平台；

技术难点：

  1. 如何构建中后台低代码搭建hpaPaaS平台
  2. 如何搭建大型复杂工程
  3. 如何构建完备的物料生态等。

实现成本：大概 1000 人日
使用人数：1000+ (有效用户)
已搭建页面数量： 6000+上线页面
项目价值：研发提效、赋能(后端/外包/测试)、构建低代码开发生态。

image.png

阿里妈妈前端团队

项目：广告二跳页面搭建系统
技术栈：NodeJS(midway)
功能板块：

  1. 面向内部小二的搭建平台
  2. 面向外部商家的搭建平台
  3. 页面渲染和物料部署方案
  4. 面向开发者的物料生产方案

技术难点：

  1. 可靠的高性能页面实时渲染引擎
  2. 海量页面和组件等物料的部署和生效机制
  3. 日常的稳定性保障

实现成本：500+人日
使用人数：30W+
已搭建页面数量：200W+
项目价值：积木式的页面管理方式提升内部开发和运营活动效率，也赋能外部商家进行自己的广告设计

image.png

有赞微界面 有赞

image.png