D2C&低代码在腾讯音乐人业务中的探索实践_朱明鹏.pdf

1、D2C&D2C&低代码在腾讯音乐人低代码在腾讯音乐人业务的探索实践业务的探索实践腾讯音乐腾讯音乐 /TMETME研发部研发部 /朱明鹏朱明鹏现任腾讯音乐人平台前端组长现任腾讯音乐人平台前端组长从业从业1111年，专注于年，专注于效能工具的设计研发效能工具的设计研发曾出版企业低码实践书籍曾出版企业低码实践书籍活动中台活动中台大纲大纲1 1、优化前端开发模式优化前端开发模式&流程流程2 2、D2C D2C 转码转码技术技术的关键实现的关键实现3 3、低码与、低码与D2CD2C合力完成合力完成“端到端端到端”4 4、总结与展望、总结与展望1.1.优化前端开发模式优化前端开发模式&流程流程1.11.1

2、 现状前端模式现状前端模式1.21.2 发现的问题发现的问题1.31.3 探索方案探索方案1.41.4 流程链路流程链路现状前端开发模式现状前端开发模式低代码开发低代码开发工程化开发工程化开发类型：存量项目、体系的项目。特点：逻辑复杂、复用性低、低配置性。类型：B端管理系统、C端运营页特点：组件、模版可复用、逻辑可配置、高配置性。发现的发现的问题问题设计师要设计师要“效果效果”好好“研发还原度低，很明显的问题很明显的问题没有发现。”“设计走查太太浪费时间浪费时间，细节问题多，按时上线都有风险。”研发要研发要“效率效率”高高“哪种开发模式都绕不开切图还原设计稿，过程过程成就感低成就感低。”“一些

3、显而易见的业务和组件，能不能自动生成自动生成？”“还要用走查工具去细节比较，我想专注更有价值的工作专注更有价值的工作。”探索方案探索方案设计稿图层节点设计稿图层节点DesginDesgin to to DesginDesgin to to 识别识别组件图层组件图层计算节点计算节点训练模型训练模型UIUI 代码代码组件组件代码代码流程链路流程链路设计稿设计稿上架低码上架低码转码转码组件识别组件识别本地工程本地工程D2CD2C2.2.D2C D2C 转码转码技术技术的关键实现的关键实现2.12.1 设计稿清洗设计稿清洗2.22.2 图标合并图标合并2.32.3 还原空间关系还原空间关系2.42.4

4、 分行分列分行分列2.52.5 提取循环节点提取循环节点2.62.6 转化样式转化样式2.72.7 构建骨架构建骨架2.82.8 多平台生成多平台生成完全遮挡元素完全遮挡元素D D2C 2C 转码关键实现转码关键实现 /1.1.设计稿清洗设计稿清洗 /去除干扰元素去除干扰元素识别无效元素，确保生成的结构不包含冗余代码。识别无效元素，确保生成的结构不包含冗余代码。视觉干扰元素视觉干扰元素透明元素透明元素宽高异常元素宽高异常元素隐藏、空元素隐藏、空元素非可视区域非可视区域1 1.去除干扰元素去除干扰元素歌手歌手D D2C 2C 转码关键实现转码关键实现 /1.1.设计稿清洗设计稿清洗 /合并合并&

5、转换节转换节点点将设计稿中的图层将设计稿中的图层，统一封装成标准的四种元素。，统一封装成标准的四种元素。2.2.合并合并&转换节点转换节点1.1.原始节点合并原始节点合并 3.3.标记切图标记切图#ICON#IMG2.2.节点增加类型节点增加类型图标图标图片图片容器容器文本文本D D2C 2C 转码关键实现转码关键实现 /2.2.图标合并图标合并图标二次合并图标二次合并多元素组成图标的情况多元素组成图标的情况合并策略合并策略尺寸阈值尺寸阈值&类型类型 +（相切、相交、包相切、相交、包含含 ）现实现实问题问题实际合并后，层级发生不正确覆盖实际合并后，层级发生不正确覆盖解决方案解决方案检测检测图标

6、图标组成元素的组成元素的层级，二次裁剪后合并层级，二次裁剪后合并D D2C 2C 转码关键实现转码关键实现 /3.3.还原空间关系还原空间关系子子元素需要矫正透明度元素需要矫正透明度、旋转旋转、背景等属性。背景等属性。任意定位元素有相对父级任意定位元素有相对父级相交相交 任意定位任意定位包含包含 -父子关系父子关系相离相离 正常定位正常定位相离的节点，进入分行分列计算相离的节点，进入分行分列计算D D2C 2C 转码关键实现转码关键实现 /4.4.分行分列分行分列A AB BC C求多个连续区间在某个方向上的并集rowrowcolcolcolcolA AC CB BD D2C 2C 转码关键实