江苏龙网

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

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


onClickListener:sender => { const threadDictionary = NSThread.mainThread().threadDictionary(); const currentButton = threadDictionary[identifier]; if (currentButton.state() === NSOnState) { currentButton.setBackgroundColor(NSColor.colorWithHex('#E3E3E3')); } else { currentButton.setBackgroundColor(NSColor.windowBackgroundColor()); } }图片加载
Sketch插件既支持加载本地图片 ， 也支持加载网络图片 。 加载本地图片时 ， 可以通过context.plugin的方法获取一个MSPluginBundle对象 ， 即当前插件bundle文件 ， 它的url()方法会返回当前插件的路径信息 ， 进而帮助我们找到存储在插件中的本地文件；而加载网络图片则更加简单 ， 通过NSURL.URLWithString( )可以获得一个使用图片网址初始化得到的NSURL对象 ， 这里要格外注意的是 ， 对于网络图片请使用https域名 。
//本地图片加载 const localImageUrl = context.plugin.url() .URLByAppendingPathComponent('Contents') .URLByAppendingPathComponent('Resources') .URLByAppendingPathComponent(`${imageurl}.png`); //网络图片加载 const remoteImageUrl = NSURL.URLWithString(imageUrl); //根据ImageUrl获取NSImage对象 const nsImage = NSImage.alloc().initWithContentsOfURL(imageURL); nsImage.setSize(size); nsImage.setScalesWhenResized(true);2. 执行效率优化
只有在设计稿中尽可能多地使用组件进行设计 ， 并且将已有页面中的内容通过设计师的走查梳理逐渐替换成组件 ， 才能真正通过建设组件库来进行提效 。 随着设计团队逐步将设计语言沉淀为设计规范 ， 并将其量化内置于积木插件中 ， 组件的数量越来越多 ， 积木插件组件库作为UI同学使用最频繁的功能 ， 需要格外关注其运行效率 。
前置组件库加载
将组件库的加载逻辑前置 ， 在打开文档时对远程组件库进行订阅操作 。 Sketch所提供的了Action API可以使插件对应用程序中的事件做出反应 ， 监听回调只需在插件的manifest.json文件中添加一个handler即可 ， 添加了对于“OpenDocument”的监听 ， 也就是告诉插件在新文档被打开时要去执行addRemoteLibrary这个function 。
{ ''script'': ''./libraryProcessor.js'', ''identifier'': ''libraryProcessor'', ''handlers'': { ''actions'': { ''OpenDocument'': ''addRemoteLibrary'' } } }增加缓存逻辑
组件库的处理需要将Library文件转换为带有层级信息的JSON文件 ， 并且需要将Symbol导出为缩略图显示 。 由于这个步骤较为耗时 ， 因此可以将经过处理的Library信息缓存起来 ， 并通过持久化存储记录已缓存的Library版本 。 若已缓存的版本与最新版本一致 ， 且缩略图与JSON文件均完整 ， 则可以直接使用缓存信息 ， 极大的提高Library的加载速度 。 以下非完整代码 ， 仅作示例：
verifyLibraryCache(businessType, libraryVersion) { const temp = Settings.settingForKey('libraryJsonCache'); const libraryJsonCache = temp ? JSON.parse(temp) : null; // 1.验证缓存版本信息 if (libraryJsonCache.version.businessType !== libraryVersion) { return null; } // 2.验证缩略图完整性 const home = getAssertURL(this.mContext, 'libraryImage'); const path = join(home, businessType); if (!fs.existsSync(path) || !fs.readdirSync(path)) { return null; } // 3.验证业务库Json文件完整性 if (libraryJsonCache[businessType]) { console.info(`当前${businessType}命中缓存`); return libraryJsonCache; } else { return null; } } }3. 自定义Inspector属性面板
与Objective-C工程混合开发
随着各个设计组的组件库建设不断完善 ， 抽离的组件数量不断增多 ， 不少UI同学反馈Sketch原生组件样式修改面板操作不够便捷 ， 无法约束选择范围 ， 希望可以提供一种更有效的组件overrides修改方式 ， 并且当修改“图片”、“图标”、“文字”等图层时 ， 可以和积木插件的这些功能模块进行联动选择 。 实现自定义Inspector面板功能既可以使操作更便捷 ， 又可以对修改项进行约束 。


推荐阅读


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

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