|美团积木Sketch插件进阶开发指南( 四 )

本文插图

Sketch组件库处理效果示意
1. 订阅远程组件库
Library库文件实际上是一个包含components的文档， components包括了Symbols、Text Styles以及Layer Styles三类，将Library存储在云端就可以在不同文档甚至不同团队间共享这些components 。由于组件库实时指向最新，因此当其维护者更新库中的components时，使用了这些components的文档将会收到通知，这可以保证设计稿永远指向最新的设计规范。
订阅云端组件库的方式很简单，首先创建一个云端组件库，具体可以参照上一篇文章，如果需要服务多个设计部门，则需要创建多个库，每个库有唯一的RSS地址；在插件中获取到这些RSS地址后，可以通过Library.getRemoteLibraryWithRSS方法对其进行订阅。
// 启动插件时添加远程组件库 export const addRemoteLibrary = context => { fetch(LibraryListURL, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }) .then(res => res.json()) .then(response => response.data) .then(json => { const { remoteLibraryList } = json; _.forEach(remoteLibraryList, fileName => { Library.getRemoteLibraryWithRSS(fileName, (err, library) => { }); }); return list; }); };2. Library库文件转换JSON数据
将Sketch的Library文件转换为JSON的过程，实际上就是转换为WebView可以识别格式的过程。因为积木插件是将组件按照一定分组展示在面板中供设计师选取，因此需要根据组件分类组织其结构。 Sketch原生支持采用 ''/'' 符号对其进行分组：Group-name/Symbol-name ，比如命名为Button/Normal和Button/Pressed的两个Symbols会成为Button Group的一部分。

本文插图

Symbol分组结构
实际中可以根据业务需要采用三级以上分组命名的方式，通过split方法将Symbol名称通过 ''/'' 符号拆分为数组，第一级名称、第二级名称等各级名称作为JSON结构的不同层级即可，具体操作可以参照如下示例代码：
const document = library.getDocument(); const symbols = []; _.forEach(document.pages, page => { _.forEach(page.layers, l => { if (l.type && l.type === 'SymbolMaster') { symbols.push(l); } }); }); // 对symbol进行分组处理，并生成json数据 for (let i = 0; i 经过以上操作后，一个简化版的JSON文件如下方所示：{ ''美团外卖C端组件库'': { ''icon'': [{ ''symbolID'': ''E35D2CE8-4276-45A1-972D-E14A06B0CD23'', ''name'': ''28/问号'' },{ ''symbolID'': ''E57D2CE8-4276-45A1-962D-E14A06B0CD61'', ''name'': ''27/花朵'' }] } }3. Symbol缩略图处理
WebView默认是不支持直接显示Symbol供用户拖拽使用的，解决该问题的方案有两种：

通过dump分析Sketch的头文件发现，可以采用MSSymbolPreviewGenerator的imageForSymbolAncestry方法导出缩略图，该方法支持图片大小、颜色空间等多种属性设置，优势是较为灵活，可以根据需要进行任意配置，不过要承担后期API变更的风险。
直接采用sketchDOM提供的export方法，将Symbol组件导出为缩略图，之后在WebView中显示缩略图，当拖拽缩略图至画板时，再将其替换为Library中对应的Symbol即可。

import sketchDOM from 'sketch/dom'; sketchDOM.export(symbolMaster, { overwriting: true, 'use-id-for-name': true, output: path, scales: '1', formats: 'png', compression: 1, });4. 小结