页面可视化搭建工具技术要点
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">（给</span><span style="color: black;">前端大全</span><span style="color: black;">加星标，<span style="color: black;">提高</span>前端技能</span><span style="color: black;">）</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">作者：陈韩杰</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://github.com/CntChen/cntchen.github.io/issues/17</span></p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">背景</span></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面可视化搭建工具, 是互联网<span style="color: black;">机构</span>中<span style="color: black;">平常</span>的运营工具, 实现了运营人员快速生成和发布页面, <span style="color: black;">提高</span>页面上线效率; 且无需<span style="color: black;">研发</span>人员介入, 节省<span style="color: black;">研发</span>人力.</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面可视化搭建工具搭建出的页面示例:</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqiaDg5eXIeEVqGN7u31OiamCfDZE7aK6JU1DqPXZiczBE9afzynJJXxrLQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">但从零<span style="color: black;">起始</span>设计和<span style="color: black;">研发</span>出这种工具并不简单. 作者<span style="color: black;">守护</span>的页面可视化搭建框架 pipeline, <span style="color: black;">供给</span>了页面可视化搭建的核心功能, 免去从零实现页面可视化搭建工具的困难.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">本文<span style="color: black;">重点</span><span style="color: black;">包括</span>以下内容:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">活动页面重复<span style="color: black;">研发</span>的痛点.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">研发</span>可视化搭建工具的技术要点.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">理想的运营页面可视化搭建工具.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">开源页面搭建框架 pipeline 介绍.</span></p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">活动页面<span style="color: black;">研发</span>之痛</span></h3><span style="color: black;">活动页面特点</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">前端业务中, 经常需要<span style="color: black;">研发</span><span style="color: black;">制品</span>介绍页/营销页/活动页/<span style="color: black;">照片</span>展示页等页面. 这类<span style="color: black;">需要</span>有以下几个特点:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面类似: 页面布局和业务<span style="color: black;">规律</span>较固定.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">需要</span>高频: 每周<span style="color: black;">乃至</span><span style="color: black;">每日</span>有多个这种<span style="color: black;">需要</span>.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">迭代快速: <span style="color: black;">研发</span>时间短, 上线时间紧.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">研发</span>性价比低: <span style="color: black;">研发</span>任务重复, 消耗各方的沟通时间和人力.</span></p><span style="color: black;">活动页面常规<span style="color: black;">研发</span>流程</span><span style="color: black;">活动页面常规<span style="color: black;">研发</span>流程图</span><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqg2HpWzicicfzPPgT8dNoGp8LoySFwnqSEAfz3x6EN1pNM4PfQKfR43NA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">流程</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运营/<span style="color: black;">制品</span>提出页面<span style="color: black;">需要</span>.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">走项目流程进入<span style="color: black;">研发</span>环节.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">研发</span><span style="color: black;">按照</span>设计稿完成页面<span style="color: black;">研发</span>.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">测试进行页面测试.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运维进行页面上线.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运营/<span style="color: black;">制品</span>进行页面验收.</span></p><span style="color: black;">痛点</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">多方参与, 反复沟通, <strong style="color: blue;">串行流程</strong>.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面上线周期长, <span style="color: black;">没法</span>快速响应活动<span style="color: black;">需要</span>.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">人力陷入重复工作泥潭, 忙碌而低效.</span></p><span style="color: black;">更优的流程</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>高频和重复的活动页面<span style="color: black;">研发</span>, 业界<span style="color: black;">通常</span>将页面做成配置化, 配置工作从<span style="color: black;">研发</span>人员交接给<span style="color: black;">制品</span>/运营等<span style="color: black;">需要</span>方; <span style="color: black;">研发</span>和设计人员只需<span style="color: black;">供给</span>配置化页面支持. 更优的活动页面生成流程依靠页面可视化搭建系统来实现.</p>现.
<span style="color: black;">更优的活动页面<span style="color: black;">研发</span>流程图</span><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqhZ8QyZiabOgeQttcFBZIIyqSHIeIbHcFUed6xcjsg0tteGgZubDibjIQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">流程</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运营/<span style="color: black;">制品</span>提出页面<span style="color: black;">需要</span>.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运营/<span style="color: black;">制品</span>在页面可视化搭建系统中<span style="color: black;">选择</span>合适的页面模板进行页面搭建.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面自动化发布上线, <strong style="color: blue;">页面<span style="color: black;">需要</span>完成</strong>, 流程完结.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">倘若</span>运营/<span style="color: black;">制品</span><span style="color: black;">无</span>找到合适的模板.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">研发</span>进行页面模板<span style="color: black;">研发</span>, 并将页面模板添加到页面可视化搭建系统中.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运营/<span style="color: black;">制品</span>继续</span><span style="color: black;">流程2</span><span style="color: black;">.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">同期</span>, 随着页面可视化搭建系统中的页面模板<span style="color: black;">持续</span>丰富, 新的页面<span style="color: black;">需要</span>对<span style="color: black;">研发</span>人员的依赖<span style="color: black;">逐步</span>减低, 可由运营/<span style="color: black;">制品</span>直接完成.</span></p><span style="color: black;">页面可视化搭建工具</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">更优的活动页面<span style="color: black;">研发</span>流程依靠页面可视化搭建系统实现, 重点是要有页面可视化搭建工具<span style="color: black;">供给</span>技术支持. 页面可视化搭建工具<span style="color: black;">经过</span>填写配置数据表单, 拖拉页面组件等可视化的页面编辑方式, 实现页面的生成或修改.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">但从零<span style="color: black;">起始</span>设计和<span style="color: black;">研发</span>出页面可视化搭建工具并不简单, 有几个需要<span style="color: black;">认识</span>和关注的技术点.</span></p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">页面可视化搭建工具的技术要点</span></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从技术<span style="color: black;">方向</span>, 设计和<span style="color: black;">研发</span>一个页面可视化搭建工具时, 需要<span style="color: black;">思虑</span>以下几个技术要点:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面组件化</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面模板</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面可视化编辑</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件层级关系</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面打包</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">实时预览</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面组件<span style="color: black;">研发</span></span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqZnzl6uywM0WbtVpnl8tYyic9VT1ibgUAWjKdTEtic4vhrRkpmgw7iav55g/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">页面组件化</span><span style="color: black;">组件化的优点</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面的基本单元是 HTML 元素, <span style="color: black;">然则</span> HTML 元素<span style="color: black;">没法</span><span style="color: black;">包括</span>业务<span style="color: black;">规律</span>, 且由 HTML 元素直接组合出页面, 过于繁杂和低效.</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqpjgv5nzdSVr28xSzibiauXERtvuetun2EtqkXdW2c6Oc1fcwIlRtgECQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">照片</span><span style="color: black;">源自</span>: </span><span style="color: black;">https://vuejs.org/images/components.png</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面较好的组织方式是组件化, 如上图所示. 组件是对 HTML 元素、元素布局和样式、业务<span style="color: black;">规律</span>的封装. <span style="color: black;">经过</span>组件封装业务<span style="color: black;">规律</span>, 并<span style="color: black;">经过</span>组件属性(Props)向外暴露组件的配置字段. 采用页面组件化, <span style="color: black;">繁杂</span>的页面可视化搭建<span style="color: black;">能够</span>转化为2个较简单的操作:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件树组合, 页面可视化搭建变成页面组件的可视化组合.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件配置编辑, 将对页面内容的编辑转化为对组件的配置属性(props)修改.</span></p><span style="color: black;">页面前端框架</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面组件化需依靠前端框架来实现. 页面可视化搭建工具的架构方式对页面前端框架有限制: 需<span style="color: black;">选取</span>页面可视化搭建工具支持的前端框架. 如: 页面可视化搭建工具只支持基于 vue 的页面, 那页面组件化的前端框架只能<span style="color: black;">选取</span> vue.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">然则</span>前端技术团队<span style="color: black;">选择</span>的前端框架, <span style="color: black;">通常</span>已用于支持现有业务, 并沉淀了<span style="color: black;">必定</span>数量的技术组件和业务组件. <span style="color: black;">倘若</span>需要针对页面可视化搭建工具进行前端框架的切换, 成本将会很大.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">因此</span>理想的页面可视化搭建工具, 应该和页面的前端框架解偶, 如下图所示. 技术团队在某前端框架中沉淀的技术组件和业务组件, 可在页面可视化搭建工具的页面中复用.</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqq4gTCv9F6bYZgmlqcuj1DVeAzXSJIj7LcJh5sPKCHQAED4CTJIYjrQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">技术难点1:页面可视化搭建工具与页面前端框架解偶.</strong></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">当然, 前端业务已<span style="color: black;">选择</span>了某前端框架, <span style="color: black;">研发</span>专门支持该前端框架的页面可视化搭建工具, <span style="color: black;">亦</span>是<span style="color: black;">有效</span>实现<span style="color: black;">目的</span>的<span style="color: black;">选取</span>.</span></p><span style="color: black;">页面模板</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面模板<span style="color: black;">包括</span>完整的业务<span style="color: black;">规律</span>, 有助于快速生成业务页面. <span style="color: black;">区别</span>的页面模板适用于<span style="color: black;">区别</span>的业务功能, 从模板库中<span style="color: black;">选取</span>合适的页面模板并派生出默认业务页面, 再对默认页面进行可视化编辑, 从而生成<span style="color: black;">目的</span>业务页面.</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqEOm1Njv3ywrpANJtOJ1gGBgSttslGZmW26R0vkicmhNwgvZW9GHUgJA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">云凤蝶的页面模板列表:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqKzbeoJ8G0ZKGarpdqmLLAaMib0TsicvO8bzFn2ibjWdaMIqrgibOuTFGXA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">图片<span style="color: black;">源自</span>:</span><span style="color: black;">https://www.yunfengdie.com/</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">模板带有页面的默认数据; <span style="color: black;">针对</span>组件化的页面, 模板是从组件库中<span style="color: black;">选择</span>部分组件, 并带有各个组件的默认配置数据.</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqpZSXKZvA4sobzCHtUib9GEVbCkvbbvwrZib5wLBo5zErKfHC7QicLibWdg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">如上图所示, 页面组件库中有组件A, 组件B, 组件C, 组件D, …, 组件X等. 页面模板一由组件库中的组件A, 组件B和组件C<span style="color: black;">构成</span>, 实现了一个完整的业务功能; 页面模板二由组件库中的组件A, 组件B和组件X<span style="color: black;">构成</span>, 完成另一个完整的业务功能.</span></p><span style="color: black;">页面编辑</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面由页面组件组合而成, 页面的编辑其实是对页面组件进行重新组合, 并编辑各页面组件的内容. 页面编辑<span style="color: black;">包括</span>2个部分: 编辑页面组件和编辑页面内容.</span></p><span style="color: black;">编辑页面组件</span><span style="color: black;">组件树</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">运用</span>组件化的方式来组织页面, 页面<span style="color: black;">能够</span>认为是一棵组件树, 如下图所示, 树中的节点为页面组件, 页面组件<span style="color: black;">能够</span><span style="color: black;">包括</span>子组件.</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqdTDXxhJwJyia5GYdibPIubOvQEwZNI62tGITDXnLceqAszichXNzOAWVw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">在代码编写上, <span style="color: black;">经过</span>组件标签的组合来声明一棵组件树, 并在打包时生成页面资源, 在运行时加载页面资源渲染出页面.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">react 和 vue 的组件树声明示例:</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqB0mel7TwADJU500GPhgTTSMDY0pMdwyVxQswqLzfB2QOqmficicMEqrw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">编辑页面组件的一个可行方式是: 动态地给页面源码添加组件, <span style="color: black;">而后</span>重新打包生成页面. 如<span style="color: black;">经过</span>可视化的方式替换</span><span style="color: black;">Left组件</span><span style="color: black;"> 为 </span><span style="color: black;">NewLeft组件</span><span style="color: black;"> 后, 对源码的组件树声明做替换, 将 </span><span style="color: black;">Left</span><span style="color: black;"> 标签替换为 </span><span style="color: black;">NewLeft</span><span style="color: black;"> 标签.</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqztB7hnGd6T87EEIoAuhianDPVxB2nOILpG1D2AInPsUaWoshJ4uzicJw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqN3ic0Y6murJjJYvYNBUv7LOjXBKH5HL9e3oykS9RL9EpUjvoKUf4b6Q/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">动态组件</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">有些</span>前端框架支持动态组件, <span style="color: black;">能够</span><span style="color: black;">按照</span>组件树声明动态渲染出组件, 而无需在构建前就定义好页面的组件树结构. 对动态组件页面实现可视化组件编辑时, <span style="color: black;">能够</span>只编辑组件树声明文件, <span style="color: black;">而后</span>将组件树声明传入提前打包好的页面中进行渲染. 采用动态组件<span style="color: black;">能够</span>避免重新打包的耗时, 快速生成新页面.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Vue <span style="color: black;">按照</span>组件树声明动态地渲染组件示例如下图, vue 动态组件<span style="color: black;">运用</span> </span><span style="color: black;">compontent</span><span style="color: black;"> 关键字来声明, 并<span style="color: black;">经过</span> </span><span style="color: black;">is</span><span style="color: black;">属性来决定实例化的<span style="color: black;">详细</span>组件. <span style="color: black;">针对</span> react, 组件是一个 js 对象, 直接在 jsx 中<span style="color: black;">根据</span>组件名<span style="color: black;">叫作</span>返回对应组件就<span style="color: black;">能够</span>了.</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqQibBqxtk2VjBtwatWgc5NGsIDaQ4HOFqjzlJib9VG3JL9kfDB4vhDTDg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">编辑页面内容</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件化页面的页面内容编辑, 是对页面中各个组件的组件属性(Props)进行配置.</span></p><span style="color: black;">组件配置数据</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">一个组件<span style="color: black;">包括</span>组件属性(Props), 组件状态(State), 组件HTML模板(Template), 组件业务<span style="color: black;">规律</span>(Javascript), 组件样式布局(Style)等几个部分.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件的配置数据<span style="color: black;">经过</span>组件暴露的 Props 注入到组件中, 在组件内部 Props <span style="color: black;">做为</span>常量分发给 State, Template, Javascript, Style 等其他组件内容, 由组件内容渲染出视图.</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vqdISjjmxDnjc6vfAC21mgA3932icYjKGzUibBgmWxJlnpedoQT7pJbKfg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">组件差异化</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件是业务内容的呈现载体, <span style="color: black;">区别</span>的业务内容, 封装在<span style="color: black;">区别</span>的业务组件中. <span style="color: black;">因此</span>页面模板中的组件是差异化的, 差异点<span style="color: black;">表现</span>在组件的 Props, State, Template, Javascript, Style 等组件内容上. 在编辑<span style="color: black;">区别</span>组件内容时, 组件配置数据的数据结构是<span style="color: black;">亦</span>是差异化的.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">如下图示的页面<span style="color: black;">包括</span>3个组件: 头部组件, 间隔区组件和天气组件. 头部组件的配置数据为头部标题和头部<span style="color: black;">照片</span>等; 间隔去组件的配置数据为间隔提示文本等; 天气组件的配置数据为城市名<span style="color: black;">叫作</span>. <span style="color: black;">区别</span>的组件需要<span style="color: black;">区别</span>的配置数据.</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/meG6Vo0MeviarQXnEQ2u7rXibzC9old6vq6mcnpicLkSgII33QC3XMDQNTz3gThWA2zXX88ZxYm8SNiaNic3tJic954A/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">需要为各组件差异化的配置数据定义数据结构和字段类型, 理想的配置数据格式为 JSON, <span style="color: black;">由于</span>其格式灵活, 支持数据嵌套, 且前端友好.</span></p><span style="color: black;">组件配置表单</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面可视化搭建工具的<span style="color: black;">重点</span><span style="color: black;">运用</span>人员是运营/<span style="color: black;">制品</span>, <span style="color: black;">倘若</span>让运营/<span style="color: black;">制品</span>人员直接编辑文本格式的组件配置数据, 操作不友好并且容易出错. 需<span style="color: black;">供给</span>可视化的编辑方式 — <span style="color: black;">运用</span> Form 表单来填入配置数据. Form 表单是页面中数据交互的基本形式, 非<span style="color: black;">研发</span>人员<span style="color: black;">运用</span><span style="color: black;">亦</span><span style="color: black;">无</span>技术门槛. <span style="color: black;">运用</span>配置表单来填入配置数据有2个好处:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">配置表单交互功能完善, 容易<span style="color: black;">运用</span>.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">配置表单<span style="color: black;">能够</span>添加校验<span style="color: black;">规律</span>, 避免填入错误的配置数据.</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">如上图所示, <span style="color: black;">因为</span>组件配置数据的差异化, 组件配置表单<span style="color: black;">亦</span>是差异化的, 需为组件库中的<span style="color: black;">每一个</span>组件<span style="color: black;">供给</span>相应的配置表单. <span style="color: black;">倘若</span>为<span style="color: black;">每一个</span>组件都编写一个表单页面, 工作量<span style="color: black;">很强</span>; <span style="color: black;">针对</span><span style="color: black;">繁杂</span>的配置项, 表单页面的编写工作量可能会大于页面组件的<span style="color: black;">研发</span>工作量. 需要重点<span style="color: black;">思虑</span><span style="color: black;">供给</span>配置表单的方式.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">技术难点2: <span style="color: black;">怎样</span>用最简单的方式生成配置数据编辑表单.</strong></span></p><span style="color: black;">组件层级关系</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件树定义了组件间父子兄弟的层级关系, 父子组件<span style="color: black;">经过</span>数据流和事件进行<span style="color: black;">相关</span>: 数据从父组件的 State 传递到子组件的 Props; 子组件的变更触发 Event <span style="color: black;">通告</span>父组件.</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">层级关系对数据流和布局的影响</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面可视化搭建工具编辑组件树时, 会修改组件数据流. 而<span style="color: black;">区别</span>组件的 Props 和 State 是异构的, 在编辑组件树时, 需要处理<span style="color: black;">区别</span>组件产生层级关系后对数据流的影响. 如下图, 父组件的 State 只<span style="color: black;">包括</span></span><span style="color: black;">子组件A</span><span style="color: black;">的 Props, 将</span><span style="color: black;">子组件B</span><span style="color: black;">挂载为父组件的子组件, 父组件<span style="color: black;">无</span></span><span style="color: black;">子组件B</span><span style="color: black;">的 Props, 会<span style="color: black;">引起</span><span style="color: black;">没法</span>渲染</span><span style="color: black;">子组件B</span><span style="color: black;">.</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">同理, <span style="color: black;">区别</span>的组件有<span style="color: black;">区别</span>的样式布局, 编辑组件树时, 需要处理<span style="color: black;">区别</span>组件产生层级关系后带来的布局影响.</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">照片</span><span style="color: black;">源自</span>: </span>https://alligator.io/react/using-this-props-children/</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">如下图, 一个父组件为行内组件, 给其添加一个块级组件<span style="color: black;">做为</span>子组件, 渲染后可能会<span style="color: black;">引起</span>行内组件被块级组件撑开.</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">因此</span>设计页面可视化搭建工具的组件树编辑功能时, 需要重点关注组件树的层级关系, <span style="color: black;">处理</span>组件间数据依赖和组件间布局适配问题. 页面可视化搭建工具需要制订组件嵌套的规则和约束, <span style="color: black;">经过</span>组件嵌套规则来<span style="color: black;">保证</span>可视化编辑后的组件树正常渲染.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">技术难点3: <span style="color: black;">怎样</span>组织页面组件的层级关系.</strong></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">运用</span>组件嵌套的搭建工具示例:</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">照片</span><span style="color: black;">源自</span>: </span><span style="color: black;">https://github.com/jaweii/Vue-Layout</span></p><span style="color: black;">不嵌套的前端框架组件</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">能够</span>想象, 组件的嵌套会加大页面可视化搭建工具的架构设计和开发难度.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">咱们</span><span style="color: black;">重视</span>到, 营销活动的<span style="color: black;">重点</span>平台是移动端, 移动端页面的常用的布局策略是: 宽度铺满, 高度滚动. <span style="color: black;">倘若</span>前端框架组件都设置为铺满宽度, 页面展示时组件只需在浏览器垂直方向上<span style="color: black;">次序</span><span style="color: black;">摆列</span>, 则组件组合时不需要嵌套 — 所有组件互为兄弟节点.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这种铺满页面宽度的组件, 非常适合搭建移动端页面的场景: 在承载页面<span style="color: black;">规律</span>的<span style="color: black;">同期</span>, 使得页面的编辑更加简单, <span style="color: black;">运用</span>者只需处理组件的<span style="color: black;">次序</span>, 无需处理组件的嵌套.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">在移动端, <span style="color: black;">运用</span>非嵌套组件层级规则的页面可视化搭建工<span style="color: black;">拥有</span>: 阿里云凤蝶、pipeline 等.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">阿里云凤蝶图示:</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">可视化搭建PC端中后台系统页面的工具, <span style="color: black;">一样</span><span style="color: black;">能够</span>采用不嵌套组件层级规则, 如阿里的飞冰:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p><span style="color: black;">页面预览</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面实时预览是页面可视化搭建工具的必要部分, <span style="color: black;">运用</span>人员<span style="color: black;">能够</span>在<span style="color: black;">经过</span>页面预览来查看和验证可视化编辑的效果.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面预览示例:</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">用户的可视化编辑<span style="color: black;">包含</span>修改组件树和修改组件配置数据. 如下图, 用户修改页面后, 需要重新渲染页面组件, 得到新的预览页面.</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">实现页面预览有两种方式: <strong style="color: blue;">页面挂载</strong>和<strong style="color: blue;">后台渲染</strong>.</span></p><span style="color: black;">页面挂载</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面挂载指在编辑器前端页面的某个元素节点(div)上渲染出用户编辑的效果. 页面挂载流程图如下:</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">运用</span>页面挂载的预览方式, 编辑器前端页面需要<span style="color: black;">供给</span>组件库组件渲染环境(组件库前端框架); 为实现前端渲染, 编辑器前端源码需引入组件库组件源码, 后续组件库更新, 编辑器需要同步更新. 页面挂载方式有以下特点:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">实现页面预览技术<span style="color: black;">方法</span>可行, 实时渲染速度快.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">为实现渲染, 编辑器的技术选型需和组件库前端框架一致.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">编辑器源码和组件库源码耦合.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件库组件渲染后的代码<span style="color: black;">规律</span>和样式布局, 可能会污染编辑器页面.</span></p><span style="color: black;">后台渲染</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">后台渲染指在后台进行用户编辑结果页面的渲染和生成, 编辑器前端页面<span style="color: black;">经过</span> iframe 加载和展示结果页面. 后台渲染流程图如下:</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">运用</span>后台渲染的预览方式, 编辑器前端页面并不需要渲染组件库的组件; <span style="color: black;">乃至</span>不需要组件源码, 只需<span style="color: black;">晓得</span>各个组件的描述信息. 后台渲染有以下特点:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">能够</span>实现编辑器和组件库前端框架的分离.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">能够</span>实现编辑器和组件库各组件的分离.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">能够</span>避免预览页面的<span style="color: black;">规律</span>和样式污染编辑器环境.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">需求</span>后台和组件库<span style="color: black;">供给</span>页面后台渲染能力, 并<span style="color: black;">需求</span>后台渲染速度快, 用户需要”实时”预览.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">难点4: <span style="color: black;">怎样</span>实现组件库的快速后台渲染, 从而实现编辑器和组件库前端框架的分离.</strong></span></p><span style="color: black;">页面构建</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面构建是组件化前端源码生成页面资源的必要环节: 在<span style="color: black;">研发</span>时需要进行<span style="color: black;">研发</span>构建来进行页面调试; 在可视化编辑后可能需要重新构建来生成预览页面; 在发布前需要进行生产构建.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">在可视化搭建页面时需要“实时”预览, <span style="color: black;">需求</span>页面页面构建效率高, 实现快速的构建和打包. 更进一步, 后台渲染其实和服务端渲染很像, 能否借鉴服务端渲染的技术思路.</span></p><span style="color: black;">自定义模板和组件<span style="color: black;">研发</span></span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面可视化搭建工具在业务中的落地, 需要<span style="color: black;">按照</span><span style="color: black;">区别</span>的业务场景进行业务组件和页面模板的自定义<span style="color: black;">研发</span>. 这对页面可视化搭建工具提出3个<span style="color: black;">需求</span>:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面可视化搭建工具要支持业务现有的前端框架.</p>避免后续组件和模板自定义<span style="color: black;">研发</span>时的工作量和割裂感. <span style="color: black;">咱们</span>是<span style="color: black;">期盼</span>复用现有前端框架组件, 而不是用另一个前端框架重写一遍.
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件和模板的编写方式需遵循较简单的编写约定, 避免<span style="color: black;">研发</span>人员难上手和写起来不舒服.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">自定义模板和组件和在<span style="color: black;">研发</span>模式下进行调试和测试.</p>页面可视化搭建工具必然会对页面模板和页面组件的编码方式进行限定. 这<span style="color: black;">需求</span>就页面可视化工具在页面模板和页面组件上的约束较少, 减少对前端框架代码组织方式的入侵点.
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">理想的活动页面可视化搭建工具</span></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面可视化搭建工具, 需要对页面做<span style="color: black;">有些</span>约定和约束, 在可视化搭建时遵循工具约定和约束来编辑页面. 从页面可视化搭建工具的技术要点中, <span style="color: black;">能够</span>归纳出活动页面可视化搭建工具的理想形态.</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面可视化搭建工<span style="color: black;">拥有</span><span style="color: black;">区别</span>的框架设计和实现方式, <span style="color: black;">区别</span>的功能有<span style="color: black;">区别</span>的适用场景, <span style="color: black;">仔细</span><span style="color: black;">归类</span><span style="color: black;">能够</span>参考笔者以前的<span style="color: black;">文案</span>: </span><a style="color: black;"><span style="color: black;">【第1282期】页面可视化搭建工具前生今世</span></a><span style="color: black;">.</span></p><span style="color: black;">概述</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运营页面搭建工具, 实现基于模板的页面生成; 将页面的逻辑功能封装在组件内, 声明页面配置数据并<span style="color: black;">供给</span>配置表单, <span style="color: black;">经过</span>对配置表单的数据填充, 进行少量页面编辑就<span style="color: black;">能够</span>完成业务页面搭建.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p><span style="color: black;">不嵌套的组件</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">在编辑自由度的<span style="color: black;">选取</span>上, <span style="color: black;">选择</span>不嵌套的组件.各组件铺满页面宽度, 在页面高度方向<span style="color: black;">次序</span><span style="color: black;">摆列</span>.<span style="color: black;">处理</span>组件嵌套带来的数据流问题. 不嵌套的组件如下图各个红框框起来的部分所示.</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">配置表单自动生成</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">配置表单的<span style="color: black;">功效</span>是生成和约束 JSON 配置数据, 业界已有对 JSON 进行描述和自动生成表单的<span style="color: black;">方法</span> — JSON Schema. <span style="color: black;">根据</span> JSON Schema 规范对 JSON 数据进行描述, <span style="color: black;">能够</span>动态渲染出配置表单; 且 JSON Schema <span style="color: black;">能够</span>对编辑后的数据做格式校验, 避免编辑错误. 这比编写一个表单页面更加简单和<span style="color: black;">有效</span>.</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">照片</span><span style="color: black;">源自</span>: </span></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">https://github.com/json-editor/json-editor</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">JSON Schema 的语法并不是很精简, 云凤蝶的 Schema 语法 等<span style="color: black;">方法</span>更简洁, <span style="color: black;">然则</span>云凤蝶的语法<span style="color: black;">无</span>开源的表单生成库支持, 在开源实践上还是 JSON Schema 最佳.</span></p><span style="color: black;">理想活动页面搭建工具特点</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">采用组件化和页面模板实现页面生成效率的<span style="color: black;">提高</span>.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">采用不嵌套的组件层级简化数据流和样式布局.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">采用 JSON Schema 声明配置数据, 自动生成配置表单.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">采用后台渲染, 使编辑系统与组件前端框架解耦.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">在遵循编辑系统约定下, 组件<span style="color: black;">能够</span>自由拓展, 前端框架<span style="color: black;">能够</span>自由<span style="color: black;">选取</span>.</span></p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">页面可视化搭建框架 Pipeline</span></h3><span style="color: black;">简介</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Pipeline 是一个开源的页面可视化搭建框架, <span style="color: black;">重点</span>由笔者在<span style="color: black;">守护</span>. Pipeline 意为流水线, 期望 pipeline 像工厂流水线<span style="color: black;">同样</span><span style="color: black;">能够</span><span style="color: black;">有效</span>地组装活动页面.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">所说</span>框架, 是它实现了页面可视化搭建的基本功能, <span style="color: black;">处理</span>了页面可视化搭建的基本难点, <span style="color: black;">能够</span>让<span style="color: black;">研发</span>者快速<span style="color: black;">持有</span>页面搭建的能力, 并支持私有<span style="color: black;">安排</span>和二次<span style="color: black;">研发</span>.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">项目信息:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">项目<span style="color: black;">位置</span>: https://github.com/page-pipepline</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">体验<span style="color: black;">位置</span>: https://page-pipepline.github.io/pipeline-editor/dist/#/</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">项目文档: https://github.com/page-pipepline/pipeline-document</span></p><span style="color: black;">功能 Demo</span><span style="color: black;">可视化编辑</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">如动图所示, pipeline 的可视化编辑能力有:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">可视化修改页面全局配置, 如修改页面主题颜色.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">可视化修改页面组件内容, 如修改组件的<span style="color: black;">照片</span>和替换组件文本.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">实时预览页面编辑效果, 即刻<span style="color: black;">得到</span>搭建后的页面.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面支持用户交互.</span></p><span style="color: black;">组件编辑</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">如动图所示, pipeline 的组件编辑能力有:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">动态增删页面组件.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">可视化的组件拖拽, 拖拽组件库组件<span style="color: black;">插进</span>到页面组件列表中.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件<span style="color: black;">能够</span><span style="color: black;">包括</span>业务<span style="color: black;">规律</span>(网络请求和用户交互).</span></p><span style="color: black;">支持的前端框架</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Pipeline 实现了编辑器和页面前端框架的分离, <span style="color: black;">能够</span>支持<span style="color: black;">区别</span>的前端框架. <span style="color: black;">所说</span>支持的前端框架, <span style="color: black;">便是</span>对某个前端框架<span style="color: black;">根据</span> pipeline 的约束规则进行组件编辑方式和工程构建方式的改造, 使得前端框架页面<span style="color: black;">能够</span>在 pipeline 中可视化搭建.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">日前</span><span style="color: black;">已然</span>支持 Vue, React, 和 Omi, 理论上<span style="color: black;">能够</span>支持任意前端框架.</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">image<span style="color: black;">框架特点</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">开源页面可视化搭建框架.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">自定义页面可配置字段.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件动态增减, 组件拖拽.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">从页面模板快速生成业务页面.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">模板工程/编辑器/后台服务解偶.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">模板工程前端框架无关: 支持 vue 和 react 等.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">支持自由拓展页面组件, 不限制组件样式布局, 接口调用等.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">前端工程约束少, 不限制<span style="color: black;">运用</span>其他技术(Redux, SSR, UI库等).</span></p><span style="color: black;">与云凤蝶的对比</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">阿里云凤蝶 是<span style="color: black;">日前</span>市场上可见中<strong style="color: blue;">最棒</strong>的页面可视化搭建服务, pipeline 的<span style="color: black;">非常多</span>方面和云凤蝶<span style="color: black;">类似</span>, 做个简单对比:</span></p><span style="color: black;">云凤蝶</span><span style="color: black;">pipeline</span><span style="color: black;"><span style="color: black;">商场</span>化<span style="color: black;">处理</span><span style="color: black;">方法</span>, 直接可用</span><span style="color: black;">开源系统, <span style="color: black;">基本</span>的页面搭建框架, 需要<span style="color: black;">自动</span><span style="color: black;">安排</span></span><span style="color: black;">生成的页面, 上传的<span style="color: black;">照片</span>等只能托管在阿里, <span style="color: black;">亦</span>限定域名</span><span style="color: black;">资源落地和周边功能需要<span style="color: black;">自动</span>搭建, <span style="color: black;">然则</span><span style="color: black;">能够</span>100%掌控所有资源</span><span style="color: black;">配置表单功能比较完善</span><span style="color: black;">配置表单比较<span style="color: black;">基本</span>, 需要<span style="color: black;">提高</span></span><span style="color: black;">模板前端框架采用 Nunjucks</span><span style="color: black;">前端框架采用<span style="color: black;">无</span>约束, <span style="color: black;">已然</span>支持 vue 和 react 等, 业务迁移成本低</span><span style="color: black;"><span style="color: black;">隐匿</span>了模板的构建处理过程, <span style="color: black;">供给</span>制定的 IDE</span><span style="color: black;">采用 webpack 构建, 模板<span style="color: black;">研发</span>与正常前端项目开发一致</span><span style="color: black;">不支持自定义页面级别的配置项</span><span style="color: black;">支持自定义页面级别的配置项</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">总的<span style="color: black;">来讲</span>: 云凤蝶是完整的<span style="color: black;">商场</span>化页面可视化搭建系统, 适合偏业务运营的<span style="color: black;">机构</span>; pipeline 是开源的页面可视化搭建框架, 适合需要自建页面可视化搭建系统且有技术人员支持的<span style="color: black;">机构</span>.</span></p><span style="color: black;">下一步工作</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">完善技术实现文档, <span style="color: black;">运用</span>文档, 系统<span style="color: black;">安排</span>文档和模板<span style="color: black;">研发</span>文档.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">供给</span>对<span style="color: black;">更加多</span>前端框架的支持.</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">供给</span>更加丰富的可视化交互方式.</span></p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">总结</span></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文讨论了活动页面<span style="color: black;">研发</span>的痛点, 总结出页可视化搭建工具的7个技术要点和4个技术难点, 并整理出理想的运营页面可视化搭建工具, 最后介绍页面可视化搭建框架 pipeline.</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">行文<span style="color: black;">匆忙</span>, 对页面可视化搭建<span style="color: black;">专题</span>或开源项目 pipeline 感兴趣, 欢迎讨论.</span></p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">References</span></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">pipeline:https://github.com/page-pipepline</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">页面可视化搭建工具前生今世:</span><span style="color: black;">https://github.com/CntChen/cntchen.github.io/issues /15</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Vue2.0学习笔记：组件数据传递:</span><span style="color: black;">https://www.w3cplus.com/vue/component-data-and-props-part1.html</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">阿里云凤蝶:</span><span style="color: black;">https://i.yunfengdie.com/</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">举荐</span>阅读</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（点击标题可<span style="color: black;">转</span>阅读）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">页面可视化搭建工具的前生今世</span></a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">H5页面快速搭建之高级字体应用实践</span></a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">一次 Web 端大</span></a>量<span style="color: black;">照片</span><span style="color: black;">同期</span>加载卡顿问题的优化之旅</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">觉得本文对你有<span style="color: black;">帮忙</span>？请分享给<span style="color: black;">更加多</span>人</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">关注「前端大全」加星标，<span style="color: black;">提高</span>前端技能</span></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">好<span style="color: black;">文案</span>，我</span><span style="color: black;">在看</span><span style="color: black;">❤️</span></p>
谢谢、感谢、感恩、辛苦了、有你真好等。 “板凳”（第三个回帖的人） 祝福你、祝你幸福、早日实现等。
页:
[1]