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

//用户打开的功能模块 const button = NSButton.alloc().initWithFrame(rect) button.setCOSJSTargetFunction(() => { initWebviewData(browserWindow); browserWindow.focus(); browserWindow.show(); }); // 注入全局初始化信息 function initWebviewData(browserWindow) { const businessItem = Settings.settingForKey('onBusinessSelected'); browserWindow.webContents.executeJavaScript(`initBusinessData(${businessItem})`); }WebView侧功能模块收到初始化信息，开始进行页面渲染前的数据准备。 Object.keys( )方法会返回一个由给定对象的自身可枚举属性组成的数组，遍历这个数组即可拿到所有被注入的初始化数据，之后通过redux的store.dispatch方法更新state即可。至此实现业务切换功能的流程就全部结束了，是不是觉得非常简单，忍不住想亲自动手试一下呢？
ReactDOM.render(, document.getElementById('root') ); window.initBusinessData = http://news.hoteastday.com/a/data => { const businessItem = {}; Object.keys(data).forEach(key => { businessItem[key] = { $set: initialData[key] }; }); store.dispatch(update(businessItem)); }; const update = payload => ({ type: ACTION_TYPE, payload, });3. 小结
有小伙伴会问，为什么WebView与Plugin侧需要数据传递呢，它们不都属于插件的一部分么？根本原因是我们的界面是通过WebView展示的，但是对Layer的各种操作是通过Sketch的API实现的， WebView只是一个网页，本身与Sketch并无关系，因此必须使用bridge在两者之间进行数据传递。别担心，这里再带你把整个流程梳理一遍：

在插件启动后会从服务端拉取业务方列表。
用户在WebView中选择自己所属的业务方。
将业务方数据通过bridge传递至Plugin侧，并通过Sketch的Settings API进行持久化存储，这样就可以保证每次启动Sketch的时候无需再次选择所属业务方。
用户点击插件工具栏的按钮选择所需功能（例如色板库、组件库等），从持久化数据中读取当前所属业务方，并通知WebView侧拉取当前业务方数据。至此，整个流程结束。

本文插图

Library库文件自动化处理
这部分将介绍如何将Library库文件转化为插件可以识别的JSON格式，并在插件上展示。
如果要问Sketch插件最重要的功能是什么，组件库绝对是无可争议的C位。在长期的版本迭代中，随着功能的不断增加以及UI的持续改版，新旧样式混杂，维护极为困难。设计师通过将页面走查结果归纳梳理，制定设计规范，从而选取复用性高的组件进行组件库搭建。通过搭建组件库可以进行规范控制，避免控件的随意组合，减少页面差异；组件库中组件满足业务特色，同时具有云端动态调整能力，可以在规范更新时进行统一调整。
目前，我们将组件集成进Sketch供UI使用大致分为两个流派：一个是基于Sketch官方的Library库文件，设计师通过将业务中复用性高的Symbol组件归纳整理生成库文件（后缀.sketch），并上传至云端，插件拉取库文件转化为JSON并在操作面板展示供选取使用；另一个则是采用类似Airbnb开源的React-Sketchapp这样的框架，它可以让你使用React代码来制作和管理视觉稿及相关设计资源，官方把它称作“用代码来绘画” ，这种方案的实施难度较大，因为本质上设计是感性和理性的结合，设计师使用Sketch是画，而非带有逻辑和层级关系的写，他们对于页面的树形结构很难理解，上手成本较高，而且代码维护成本相对较大。我们不去评价哪种方案的好坏，只是第一种方案可以更好地满足我们的核心诉求。