江苏龙网

  1. 首页 > 资讯 > 科技 > >

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


通过一段时间的平台化建设 ， 目前美团已经有7个设计团队接入了积木插件 ， 覆盖了美团到家事业部大部分设计同学 ， 未来我们会持续推进积木插件的平台化建设 ， 不断完善功能 ， 期望能将积木插件打造成业界一流的品牌 。
3. Sketch插件开发进阶
第一篇文章可能是为数不多的入门教程 ， 而本篇可能是你能找到的唯一一篇进阶开发文章 。 进阶开发主要涉及如何切换业务方数据 ， 即选择所属业务方后 ， 对应的组件、颜色等设计素材切换为当前业务方在物料市场中上传的元素；将承载组件库的Library文件转化为插件可以识别的格式 ， 并在插件上展示 ， 以供设计师在绘制设计稿时选择使用；一些优化运行效率 ， 提升用户体验的方法 。
Sketch插件代码由于和业务强相关 ， 且实现方式较为复杂 ， 可能存在部分敏感信息 ， 所以基本没有成熟的插件开源 。 在进行一些复杂功能开发时 ， 我们也常常“丈二和尚摸不到头脑” ， “要不这个功能算了吧”的想法也不止一次出现 ， 可是每当开会看到旁边的设计同学在使用“积木”插件认真作图时 ， 又一次次坚定了我们的信念 ， 要不加班再试试吧 ， 没准就能实现了呢？一次“委曲求全” ， 后面可能导致整个项目慢慢崩塌 ， 所以我们一直以将积木插件打造成为业界领先的插件为信念 。
如果说看过了第一篇文章你已经知道了如何开发一款插件 ， 那么通过本篇文章的学习你就可以真正实现一款可以与业务强关联且功能可定制的成熟工具 ， 与其说是介绍如何开发一个进阶版的Sketch插件 ， 不如说是分享给大家完成一个商业化项目的经验 。
|美团积木Sketch插件进阶开发指南
本文插图

支持多业务切换
为了当面对“我们可以接入积木插件吗”这种灵魂拷问时不再手足无措 ， 平台化进程迅速启动 。 平台化的核心其实就是当发生业务线变更时 ， 物料市场中的素材整体同步切换 ， 因此我们需要进行如下几个操作：首先建立全局变量 ， 存储当前用户所述业务方信息及鉴权信息；用户选择功能模块后 ， 根据用户所述业务方 ， 拉取对应素材；处理Library等素材并渲染页面展示；根据素材信息变更画板中的相关Layer 。 这部分主要介绍如何依靠持久化存储来实现业务切换的功能 ， 就像在第一篇启蒙文档中说的那样 ， 这里不会贴大段的代码 ， 只会帮你梳理最核心的流程 ， 相信你亲自实践一次之后 ， 以后的困难都可以轻松解决 。
|美团积木Sketch插件进阶开发指南
本文插图

1. 定义通用变量
功能模块展示的素材与当前选择的业务相关 ， 因此需要在每个功能模块的Redux初始化状态中增加一些全局状态变量 。 比如所有模块都需要使用businessType来确定当前选择的业务 ， 使用theme进行主题切换 ， 使用commonRequestParams获取用户鉴权信息等 。
export const ACTION_TYPE = 'roo/colorData/index'; const intialState = { id: 'color', title: '颜色库', theme: 'black', businessType: 'waimai-c', commonRequestParams: { userInfo: '', }, }; export default reducerCreator(intialState, ACTION_TYPE);2. 实现数据交换
第一步：WebView侧获取用户选择 ， 将所选的业务方数据通过window.postMessage方法传递至插件侧 。
window.postMessage('onBusinessSelected', item);第二步：Plugin侧通过webViewContents.on( )方法接收从WebView侧传递过来的数据 。 Sketch官方通过Settings API提供了一些类的方法来处理用户的参数设置 ， 这些设置在Sketch关闭后依然会保存 ， 除了存储一段JSON数据外 ， Layer、Document甚至是Session variable都是支持的 。
webViewContents.on('onBusinessSelected', item => { Settings.setSettingForKey('onBusinessSelected', JSON.stringify(item)); }); // 除此之外 ， 插件侧也可以通过localStorage向WebView注入数据 browserWindow.webContents.executeJavaScript( `localStorage.setItem(''${key}'','${data}')` );第三步：当用户通过工具栏选择某一功能模块（例如“插画库”）时 ， 会回调NSButton的点击事件监听 ， 此时除了需要要让WebView展示（Show）以及获取焦点（Focus）外 ， 还需要将第二步存储的业务方信息传入 ， 并以此加载当前业务方的物料数据 。


推荐阅读


上一篇：|首届“中国地理标志产品活力指数发布颁奖盛典”即将举行

下一篇：趣投稿|「新书推荐」前沿科技评论——全球视野下的创新发展与选择