c++可视化界⾯设计_活动可视化搭建系统——你的KPI被我承 包了-李⽂杨
前⾔
对于C端业务偏多的公司来说，在增长、运营等各⽅同学的摧残下永远绕不过去的⼀个坑就是⼤量的H5页⾯开发，它可能是⼀个下载、需求告知、产品介绍、营销活动等页⾯。此类需求都有⼏个明显的缺点：透明模块
·开发性价⽐极低、上线时间紧，每次需要指派单独同学⽀持。·沟通成本⾼，⽽业务逻辑⾼度相似。·⾼频次的需求 有句话怎么说来着，世界是"懒⼈"创造的，当我们烦透了⽆休⽌的重复⼯作时，⼀些"偷懒"的想法就会蹦出来。对研发⽽⾔我们不想花费过多的时间在此类简单重复的⼯作上；对运营⽽⾔他们需要活动更快的迭代、发版，脱离研发的排期等限制；于公司⽽⾔节省⼈⼒成本就是节省财务成本，更⼤的提⾼效率就可以⽀撑配合更多增长营销策略。
所以从技术赋能业务的⾓度出发，⼀套可视化活动编辑系统是每个中⼤型公司必备的⽣产利器。
⾸先让我们来挑⼏个代表性的页⾯简单分析⼀下...
如下图：
精准的失控先从页⾯上做个分析：
·图1、3都属于简单的引流下载页·图2、4属于普通活动页·图5⽆任何交互逻辑，只是单纯的⼀个静态告知页·图6从页⾯结构和业务逻辑来说，属于复杂活动页
v型钢接下来抛开UI细节层⾯不谈，对页⾯进⾏⼀个拆解
·图1、3 组合⽅式 ( 背景图 + 按钮 + [ ios、安卓 ]下载链接 )
·图2、4 组合⽅式 ( 背景 + 按钮 + 活动规则 + 领券逻辑 )·图5 组合⽅式 ( 背景 + 活动规则 )
·图6 组合⽅式 ( 背景 + 业务模块 + 活动规则 )
洗肾机
综上分析可见，每个页⾯由多个⼩模块构成，可以是基础UI组件，也可以是⼀个复杂的业务组件，且组合⽅式多种多样，可以预想到当我们将这些不同组件像组件库那样整合在⼀起且可以在页⾯进⾏可视化的编辑操作时，不同的组件不同的排列即可⽣成⼀个全新的活动，就像积⽊⼀样拥有⽆限种可能，开发效率将会⼤⼤提⾼，本⽂将这两个⽉⿎捣lego活动可视化搭建系统(以下简称lego)从0到1的⼼路历程整理出来供各位有相关需求的⼩伙伴参考，也欢迎⼤神交流指正。 核⼼⽅案
Lego采⽤Vue框架开发，通过对组件物料进⾏拆分再统⼀管理，形成⼀个可编辑的组件库。JSON schema 来定义组件JSON规范，配合Vue的动态组件特性来实现动态的页⾯渲染。动态表单⽤于根据不同组件特性⽣成对应配置表单。最后打包并优化多页⾯，每个页⾯单独配置域名，⼀个负责内部编辑、⼀个负责对外展⽰。通过活动id获取对应活动JSON数据动态渲染在活动展⽰页⾯。夜光标牌
渲染流程：
多页⾯流程：
关于最后的活动页⾯展⽰除了多页⾯外其实还有特别多种⽅案可选，选择最合适⾃⼰业务的就好，后边内容会细说这⼏种展⽰⽅案。关键词：JSON schema、动态渲染、动态表单、组件管理、多页⾯
技术⽅案
动态渲染
is
如何将不同的组件打散后再重新拼装并渲染在页⾯上是整个技术⽅案最核⼼的点，好在Vue提供了动态渲染组件⽅案，通过内置组件conpontent，渲染⼀个“元组件”为动态组件并根据 is 的值，来决定哪个组件被渲染。
props
⼤部分组件的可配置项⽆⾮就样式、链接、事件、⽂案这⼏种，我们将它们抽离成⼀个config对象，通过props的⽅式传递给⼦组件⽤于渲染样式或者加⼀些点击事件等，⽐如bind绑定传进来的style样式，当然在这之前⼀定要定好基础config的规范。
渲染函数
一次性拖鞋
由于⼀些业务的原因，Lego除基础组件外其它部分开放的⾃由度并不算⾼，所以props的⽅案⽬前可
以满⾜我们的需求，但如果你想开放更⾼的⾃由度，释放系统的完全编程能⼒，⽐如配置⼀些点击事件，事件执⾏交互等等。那可以试试Render渲染函数。根据官⽹对它的描述，它⽐模板要更接近编译器。⽽它的可配置对象⾜够你肆意发挥了。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议