打开网站弹出视频js,上市公司的信息网站,成都小程序推广企业,wordpress弹窗下载| A consistent experience is a better experience.——Mark Eberman | 一致的体验是更好的体验。——Mark Eberman 《摘自设计师的16句名言》 背景 1.UI一致性项目 积木#xff08;Tangram#xff09;Sketch插件源于美团外卖UI的一致性项目#xff0c;该项目自2019年5月份… | A consistent experience is a better experience.——Mark Eberman | 一致的体验是更好的体验。——Mark Eberman 《摘自设计师的16句名言》 背景 1.UI一致性项目 积木TangramSketch插件源于美团外卖UI的一致性项目该项目自2019年5月份被提出是UI设计团队与研发团队共建的项目目的是改善用户端体验的一致性提升多技术方案间组件的通用性和复用率整体降低视觉改版的研发成本。 一直以来外卖业务都处于高速发展阶段人员规模在不断扩大项目复杂度在持续增加。目前平台承载了美团餐饮、商超、闪购、跑腿、药品等多个业务品类用户入口也覆盖了美团App外卖频道、外卖App、大众点评等多个独立应用。因为客户端一直比较侧重业务开发为了满足业务快速上线的需求UI组件并没有统一的实现而是分散到各个业务场景中在开发过程中因UI缺乏同一的标准而导致以下问题不断凸显 UI/UE层面 ① UI缺乏标准化的设计规范在不同App及不同语言平台上设计风格不统一用户体验不一致。 ② 设计资源与代码均缺乏统一的管理手段无法实现积累沉淀无法适应新业务的开发需求。 RD层面 ① 组件代码实现碎片化存在多次开发的情况质量难以得到保证。 ② 各端代码API不统一维护拓展成本较高变更主题、适配Dark Mode等需求难以实现。 QA层面 重复走查频繁回归每次发版均需验证组件质量。 PM层面 版本迭代效率低版本需求吞吐量低不能满足业务的快速拓展能力。 基于上述开发工作中的切实痛点以及未来可预见的对客户端能力的开发需求我们迫切需要一套统一的UI设计规范以此沉淀出设计风格建立统一的UI设计标准从而抽离成熟的业务场景提供高质量、可扩展、可统一配置的同时能基于Android/iOS/MRN/Mach组件开发的代码库且具备支持多业务高层次的代码复用能力提高UI业务的中台能力使项目具有高度一致性。 我们通过积木Sketch插件来落地设计规范可以保证设计元素均从既定设计标准中获取产出符合业务设计语言的设计稿而各平台UI组件库中也有对应实现从而使积木插件成为UI一致性的抓手最终可以减少开发成本提升交付质量服务好我们美团的多个业务团队。 2. Sketch Sketch Plugin 要想保持UI一致性就不能打破规则。从设计阶段颜色的选择、字体的规范、控件的样式到RD开发阶段代码的统一管理、API的制定、多端的实现方式都必须遵守一套规则而Sketch Plugin建设则是让规范落地执行的解决方案。 在讨论其重要性之前我们首先简单介绍一下SketchSketch是一个设计工具包由总部位于荷兰海牙的BohemianCoding团队开发该团队成员目前不足百人来自全球多个国家通过互联网远程协作开发属于典型的高效开发团队。 Sketch容易理解且上手简单可与团队中的每个人创建、更新和共享所有Symbol组件实现设计资源的共享和版本管理从此告别“final-final-final-1”其版本迭代速度非常快且能不断添加新功能满足用户的需求更符合互联网时代Sketch可以使用真实数据进行设计。目前我们设计团队已经全面使用Sketch进行设计。 设计语言包括Iconfont、色板、文字规范、话术、插画、动画、组件等。其实它并不是一个抽象的概念比如大家提到“美团”就会想起“美团黄”想到可爱的“袋鼠”想到那些骑着摩托车、穿着印有“美团外卖”亮黄色衣服的骑手小哥。通过设计语言我们可以更好地传达品牌主张和设计理念。UI团队逐步将设计语言沉淀为设计规范并将其量化内置于积木Sketch Plugin中使产出的设计稿和RD代码库中的组件一一对应从而形成一个完整的闭环进而可加速整个业务的交付流程。 3. 积木Sketch 插件项目 其实市面上已存在类似插件为什么我们还要自己动手开发呢因为UI设计语言与自身业务关联性很强不同业务的色彩系统、图形、栅格系统、投影系统、图文关系千差万别其中任意一环的缺失都会导致一致性被破坏。现有插件所提供的通用设计元素无法满足外卖设计团队的需求开发一款可以与业务强关联且功能可定制的插件显得尤为重要。 此外统一的品牌符号、品牌特征也有助于加深产品在用户心中的印象统一的颜色和交互形式能帮助用户加深对产品的熟悉感和信任感一个好的设计语言本身可以在体验上为产品加分也能够更好创造一致性的体验。 积木Sketch插件经过一段时间的建设目前已具备Iconfont、标准色板、组件库、数据填充、文字模板等功能。 我们通过Iconfont可以从美团的图标库中拉取设计团队上传的SVG图标并直接应用于设计稿标准色板可以限定设计师的颜色使用范围确保设计稿中的颜色均符合设计规范组件库中包含从外卖业务中抽离的基本控件与通用组件具有可复用和标准化的特点并与不同语言平台组件库中的代码一一对应使用组件库中的组件进行设计可以提升UI的设计效率、开发效率以及走查效率数据填充库可以实现图片填充和文本填充图片包含了商品及商家素材文字则包含了菜品、商铺名等信息通过数据填充可以使设计师采用真实数据进行填充让设计稿更为直观也更贴近线上环境文字模板中内置了Head、SubTitle、Body、Caption的使用规范根据设计稿中文字的位置点击文字图层即可直接应用字体、行高、字距等属性。 此外我们还根据设计同学的使用反馈不断增添新功能。同时也在拓展插件的使用场景增加业务线切换功能使积木插件可以为更多的团队服务并期待它能成为更多设计师的“贴心搭档”。 4. 为什么要写这篇文章 相信你读完上面的内容肯定迫不及待的想了解一下Sketch插件以此迅速提升自己团队开发效率了吧 其实在开始之前我们可先了解一些不利的条件。第一点由于Sketch更新速度极快但是官方文档却十分简单且陈旧因此很多知名的Sketch Plugin因每次API的变更过大纷纷放弃维护第二点由于开发技术栈混乱成熟项目一般还未开源而开源的项目基本上没有什么参考价值绝大多数都是“update 3 years ago”最后一点macOS开发资料更是少的可怜。 我们阅读了大量的文档却没有理清头绪仿佛很多Wiki讲到关键地方比如某个非常期待的功能是怎么实现的时候作者竟然一笔带过让人摸不到头脑。知乎上一篇Sketch Plugin的科普文很多网友会评论“求教学视频我可以花钱买的”。经过一步步踩坑我们就总结了一些开发经验为了避免大家“重复踩坑”晚上可以早点下班陪陪家人我们决定写一篇文章记录下开发的过程。虽然比起那些已经更新多版的成熟项目但还有不少的差距至少可以让大家不再那么迷茫。 当然即使你觉得自己是个“跟Sketch八竿子打不着”的开发同学我们也觉得这篇文章同样也值得阅读因为你会通过本文接触到前端、移动端、桌面端、服务端的各种开发知识。我们都知道越来越多的公司开始喜欢招全栈工程师像Facebook基本上只招全栈工程师。你心里是不是在想“是不是在搞笑啊不过一个插件而已”先别轻易下结论。 准备好了吗盘它 准备放手Coding之前 好先别着急敲击键盘。毕竟我们连使用哪种语言去开发都没决定这曾经也是困恼我们许久的一个问题。目前Sketch Plugin开发大概有两种方式 ① 使用JavaScript CocoaScript的混合开发模式Sketch团队官方维护了一套JS API并在开发者官网写了一句非常振奋人心的话“ Take advantage of ES6, access macOS frameworks and use the Sketch APIs without learning Objective-C or Swift.” 理想很美满但现实很骨感。这个API目前还不算完善很多功能无法实现因此我们需要搭配CocoaScript访问更丰富的内部API。 ② 直接采用Objective-C 或Swift并搭配macOS的UI框架AppKit进行开发简单粗暴并且可以利用OC运行时直接调用Sketch内部API。但这里要特别提醒一下你要承担的风险是随着Sketch的不断更新内部API的命名和使用方式可能会发生较大变化很多知名插件都因此放弃更新。 本文采用了“混合开发模式”进行讲解希望能够给你一些小启发。 1. Sketch Plugin开发流派 2. 环境配置 SkpmSketch Plugin Manager是Sketch提供的用于Plugin创建、Build以及发布的官方工具。Skpm采用Webpack作为打包工具当然如果你对前端知识足够熟悉也可以采用Rollup或者roadhog。但是为了防止遇到各种各样的报错这里并不建议你这么做。 Skpm提供了一系列帮助快速入门的模板最有用的莫过于skpm/with-webview它可以帮助我们创建一个基于WebView展示的Demo示例而且Skpm会在构建完成后自动创建一个Symbolic Link将插件添加到Sketch的安装目录使Plugin立即可用。 //基于webpack的Sketch官方打包工具skpm
npm install -g skpm
//创建示例工程
skpm create my-plugin --templateskpm/with-webview
//Install the dependencies
npm install
//构建插件
npm run build3. 项目结构 Plugin Bundle 按照上面的步骤操作完成后我们会得到如下插件目录它以标准化的分层结构存储了源码文件以及构建生成的Sketch插件安装包。这里没有使用官方文档中最简单的Demo而是使用目前开发中最为常用的With-Webview模板进行分析以免出现学完“11”后遇到的全是“微积分”问题并且大部分插件均是在此基础上进行拓展。 目录中的参数相信你在看完注释后马上就能明白。可是如果此前没有前端开发经验可能不了解在经过Webpack打包后脚本文件的文件名会发生变更比如resources中的webview.js经过打包后会储存在插件的Resources文件夹中而文件名则变更为resources_webview.js因此在进行代码编写时如果需要在html中引用此文件也要使用打包后的文件名即。这里有个小技巧如果你不知道脚本文件打包后的文件名及路径建议先使用Webpack进行编译然后查看其在打包后的Plugin中的位置和名称然后再进行引用。 ├── assets //资源文件夹如需更改需在package.json中的skpm.assets中设置
├── my-plugin.sketchplugin //skpm构建过程生成的插件包
│ └── Contents
│ ├── Resources
│ │ └── _webpack_resources
│ │ └── resources_webview.js
│ │ └── resources_webview.js.map
│ └── Sketch
│ ├── manifest.json
│ ├── __my-command.js
│ └── __my-command.js.map
├── package.json
├── webpack.skpm.config.js
├── resources //资源文件
│ ├── style.css
│ ├── webview.html
│ └── webview.js
└── src //需要被webpack打包的脚本文件以及manifest清单文件├── manifest.json└── my-command.jsManifest 你没有看错plugin中也有manifest.json它与其它平台比如Android开发中的清单文件意义相同。清单文件记录了作者信息、描述、图标以及获取更新的途径等等。想想看每天熬夜加班写代码总得有个地方把你的名字记录下来吧。但manifest最重要的作用其实是告诉Sketch如何运行插件以及如何将插件集成进Sketch的菜单栏中。 commands使用一个数组记录了插件所提供的所有命令。比如下面的例子当用户从菜单栏点击 “显示工具栏”这个条目时就会执行script.js中的function showPlugin() 。menu则提供了插件在Sketch菜单栏中的布局信息Sketch会在插件被加载时初始化菜单。 {commands: [{name: 显示工具栏,identifier: roo-sketch-plugin.toolbar,script: ./script.js,handlers: {run: showPlugin}}],menu: {title: 外卖积木SketchPlugin工具栏,items: [roo-sketch-plugin.toolbar]}
}package.json 简单来说只要你的项目中用到了NPM根目录下就会自动生成package.json文件。Node.js项目遵循模块化的架构package.json定义了这个项目所需要的各种模块以及配置信息。使用npm install命令会根据这个配置文件自动下载所需的模块也就是配置项目所需的运行和开发环境。 非常值得称赞的是Plugin开发中对于网络请求、 I/O 操作以及其它功能可以使用与Node.js兼容的polyfill其中许多常用modules已经预装到了Sketch中比如console、fetch、process、querystring、stream、util等。 这里你只需要知道以下几点 需要参与Webpack打包的脚本文件必须在resources目录下声明否则不会参与编译重点考试要考。assets目录需要配置在skpm.assets下。常用的命令可以定义在scripts中方便直接调用。dependencies字段指定了项目运行所依赖的模块devDependencies指定项目开发所需要的模块。{name: roo-sketch-plugin,author: hanyang,description: 外卖积木Sketch pluginUI同学好喜欢~,version: 0.1.0,skpm: {manifest: src/manifest.json,main: roo-sketch-plugin.sketchplugin,assets: [assets/**/*]},resources: [src/webview/template/webview.js],scripts: {build: rm -rf roo-sketch-plugin.sketchplugin NODE_ENVdevelopment skpm-build,},dependencies: {},devDependencies: {}
}4. API Reference Javascript API 由于使用了与Safari相同的JS引擎Plugin脚本可以获得完整ES6支持。官方的JavaScript API由Sketch团队维护并允许访问和修改Sketch文档通过API可以向Sketch用户提供数据并提供一些基本的用户界面集成。 //访问、修改和创建文档从color到layer再到symbol等方方面面
var sketchDom require(sketch/dom)
//对于异步操作JavaScript API提供了fibers延长contex的lifeTime
var async require(sketch/async)
//直接在Sketch中提供图像或文本数据DataSupplier直接与Sketch用户界面集成。
var DataSupplier require(sketch/data-supplier)
//无需重新build的情况下显示通知以及获取用户输入
var UI require(sketch/ui)
//保存图层或文档的自定义数据并存储插件的用户设置。
var Settings require(sketch/settings)CocoaScript Syntax CocoaScript通过赋予了JavaScript调用Sketch内部API以及macOS Cocoa frameworks的能力这意味着除了标准的JavaScript库外还可以使用许多很棒的类与函数。CocoaScript建立在苹果的JavaScriptCore之上而JavaScriptCore是为Safari提供支持的JavaScript引擎。 因此当你使用CocoaScript编写代码的时候你就是在写JavaScript。CocoaScript中的Mocha实现JS到Objective-C的Bridge虽然Mocha包含在CocoaScript中但文档仍保留在原始Github中。因此你在CocoaScript的Readme中看不到任何语法教程。这里一个诀窍是如果你想了解Mocha将原生的Sketch Objects通过bridge从Objective-C传递到JavaScript层的属性、类或者实例方法的信息可以将其通过console打印出来 let mocha context.document.class().mocha()
console.log(mocha.properties())
//OC
[executeOperation:withObject:error:]
//CocoaScript
executeOperation_withObject_error()通过CocoaScript 提供的Bridge使用JavaScript调用Objective-C的基本语法如下: Objective-C的方括号语法“[ ]”转换为JavaScript中的点“ . ”语法。Objective-C的属性导出到JavaScript时Getter为object.name() 而Setter为object.name ‘Sketch’。Objective-C的selectors被暴露为JavaScript 的代理方法。“” 冒号被转换为下划线“ _”, 最后一个下划线是可选的。调用带有一个下划线的方法需要加倍为两个下划线: sketch_method变为sketch__method。selector的每个component被连接成不带有分隔符的单个字符串。5. Actions 行为定义 Action指的是由于用户交互而在应用程序中发生的事件比如“打开文档”、“关闭文档”、“保存”等。Sketch所提供的了Action API可以使插件对应用程序中的事件做出反应有点类似Android开发中的的BroadCast或者Job Scheduler。官方文档列举了数百个可供监听的Action但最常用到的只有下面几个 监听回调 我们只需在插件的manifest.json文件中添加一个handler即可。比如下面的例子添加了对于“OpenDocument”的监听也就是告诉插件在新文档被打开时要去执行onOpenDocument这个function。 {script: action.js,identifier: my-action-listener-identifier,handlers: {actions: {OpenDocument: onOpenDocument}}
}当一个Action被触发时会回调JS中的监听方法与此同时Sketch可以向目标函数发送Action Context其中包含动作本身的一些信息。在下面例子中每次打开文档时都会弹出一个Toast。 function onOpenDocument(context) {context.actionContext.document.showMessage(Document Opened)
}6. Bridge双向通信 在常规的插件开发中UI层一般采用Webview实现因此你可以使用各种前端开发框架比如React或者Vue等而插件的逻辑层负责调用Skecth API显然不在WebView中因此需要通过Bridge进行通信。逻辑层将从服务器获取到的数据传递给UI层展示而UI层则将用户的操作反馈传递给逻辑层使其调用Sketch API更新Layers。 插件发送消息到WebView //On the plugin:
browserWindow.webContents.executeJavaScript(someGlobalFunctionDefinedInTheWebview(hello)).then(res {// do something with the result})
//On the WebView:
window.someGlobalFunctionDefinedInTheWebview function(arg) {console.log(arg)
}WebView发送消息给插件 //On the webview:
window.postMessage(nativeLog, Called from the webview)
//On the plugin:
var sketch require(sketch)
browserWindow.webContents.on(nativeLog, function(s) {sketch.UI.message(s)
})经过了以上步骤我们就得到了一个基础插件它以WebView作为内容载体并具有双向通信功能。打开插件时Webview会将页面加载完成的事件传递给逻辑层逻辑层调用Sketch API弹出Toast点击Get a random number可以从逻辑层获取一个随机数。 快来正式加入开发队伍 相信阅读完上面的部分制作一个简单的插件对于你来说已经有点“游刃有余”了。但这个时候疑惑也随之而来为什么Demo和我们常用插件的UI差别如此之大 没错官方文档只教给我们最基础的插件开发流程一个成熟的商业项目绝不仅仅是以上这些。一个功能完善的插件应该包括以下三部分工具栏、WebView容器以及业务数据。下面我们会一步步为你展示如何开发一个商业化插件UI同时也会演示美团外卖“填充功能”的实现注篇幅原因文档中仅保留关键代码。 1. 创建吸附工具栏 所谓吸附式工具栏就是展示在Skecth右侧Inspector Panel旁边的工具栏它以吸附的方式与Sketch操作界面融为一体这也是绝大多数插件的视觉呈现方式。工具栏中展示了当前插件可以提供的大部分功能方便我们在操作Document时快速选取使用。 开发工具栏主要使用NSStackView、NSButton、NSImage以及NSFont这几个类如果没有开发过macOS应用的同学可能对这些类有些陌生可以类比iOS开发中以UI作为前缀的控件类NS前缀主要是AppKit以及Foundation的相关类MS前缀则是Skecth的相关类CA、CF前缀为核心动画库和核心基础类。 下面的代码记录了创建工具栏的关键步骤更为详细的操作可以参考一些Github仓库比如sketch-plugin-boilerplate等。 const contentView context.document.documentWindow().contentView();
const stageView contentView.subviews().objectAtIndex(0);
//1.创建toolbar
const toolbar NSStackView.alloc().initWithFrame(NSMakeRect(0, 0, 27, 420));
toolbar.setBackgroundColor(NSColor.windowBackgroundColor());
toolbar.orientation 1;
//2.创建Button
const button NSButton.alloc().initWithFrame(rect)
const Image NSImage.alloc().initWithContentsOfURL(imageURL)
button.setImage(image)
button.setTitle(数据填充)
button.setFont(NSFont.fontWithName_size(Arial,11))
//3.将Button加入toolbar
toolbar.addView_inGravity(button, gravityType);
//4.将toolbar加入SketchWindow
const views stageView.subviews()
const finalViews []
for (let i 0; i views.count(); i) {finalViews.push(view)if(view[i].identifier() view_canvas){finalViews.push(toolbar)
}stageView.subviews finalViewsstageView.adjustSubviews()2. 创建WebView容器 除了通过CocoaScript创建原生NSPanel外这里推荐使用官方的sketch-module-web-view快速创建WebView容器它提供了丰富的API对窗口的展示样式和行为进行定制包括Frameless Window、Drag等同时还封装了WebView与插件层的通信的Bridge使你可以轻松在”frontend” the WebView和”backend” the plugin running in Sketch之间发送消息。 //(1)方法一原生方式加入webview
const panel NSPanel.alloc().init();
panel.setFrame_display(NSMakeRect(0, 0, panelWidth, panelHeight), true);
const wkwebviewConfig WKWebViewConfiguration.alloc().init()
const webView WKWebView.alloc().initWithFrame_configuration(CGRectMake(0, 0, panelWidth, panelWidth),wkwebviewConfig
)
panel.contentView().addSubview(webView);
webview.loadFileURL_allowingReadAccessToURL(NSURL.URLWithString(url),NSURL.URLWithString(file:///)
)
//(2)方法二使用官方的BrowserWindow
import BrowserWindow from sketch-module-web-view;
const browserWindow new BrowserWindow(options);
const webViewContents browserWindow.webContents;
webViewContents.executeJavaScript(someGlobalFunctionDefinedInTheWebview(${JSON.stringify(someObject)})).then(res {// do something with the result})browserWindow.loadURL(require(./webview.html))3. 创建内容页面 历尽千辛万苦我们终于拿到了WebView这下就可以发挥你“天马行空”的想象力了。不管是React还是Vue亦或只是一些简单的静态页面对于你而言应该都不在话下。在完成界面开发后只需通过Window向插件发送指令即可。下面的例子演示了积木插件的“数据填充”功能。 UI侧 import React from react;
import ReactDOM from react-dom;
//使用react搭建用户页面
ReactDOM.render(Provider store{store}App //Provider, document.getElementById(root));
//传递用户点击填充类目给插件层这里以填充文字为例
export const PostMessage (name, fillData) {try {window.postMessage(fill-text-layer, fillData);} catch (e) {console.error(name, 出现异常 fillData);}
}; 插件侧 browserWindow.webContents.on(fill-text-layer, function(s) {//找到当前页面documentconst document context.document;//获取用户选择的layersconst selection Document.fromNative(document).selectedLayers;layers.forEach(item {//判断layer类型是否为文字if (item.type Text) {//更新textlayeritem.text value;}});
})4. 还想加点出彩的功能 如果你还不满足于此说明你真的是个很爱学习也很有潜力的开发同学。一个完善的插件需要包括交互层、API层、业务层、调试层以及发布层每层各司其职它们都在默默干好自己的工作。 前面的步骤通过构件菜单栏、创建Webiew完成了交互层的开发通过Webview的Bridge传递用户操作到插件侧代码之后调用Sketch API对图层进行操作这是API层的工作而根据自身需求并依托交互层与API层的实现去编写业务代码则是业务层的工作至此你应该就拥有了一个可运行的插件了。 但除此之外在代码编写过程中还需要Lint组件辅助开发发现问题需要使用各类Dev工具进行调试通过QA验证后需要Cli工具打包并发布插件更新。这一小节我们将简单介绍一些基本的调试层和发布层知识。 Webpack配置 Skpm默认采用Webpack作为打包工具。Webpack是一个现代JavaScript应用程序的静态模块打包器Module Bundler。当Webpack处理应用程序时它会递归地构建一个依赖关系图Dependency Graph其中包含应用程序需要的每个模块然后将所有这些模块打包成一个或多个Bundle需要在webpack.config.js进行配置类似于Android中的Gradle同样支持各种插件。 由于插件的开发者未必是前端同学可能之前并没有接触过Webpack因此我们在这里介绍它的一些常用配置让你有更多的时间关注业务代码。第一次接触Webpack是在去年一次公司内部的技术培训上美团技术学院提供了很多技术培训课程加入我们就可以尽情地在知识的海洋中遨游了美团MRN项目的打包方案就是Webpack。 在前端圈有各种各样的打包工具比如Webpack、Rollup、Gulp、Grunt 等等。RN打包用的是Facebok实现的一套叫做Metro的工具而美团MRN打包工具的选型是Webpack因为Webpack具有强大的插件机制和丰富的社区生态可以完成复杂的流水线打包工作Webpack在Plugin开发中同样发挥了非常重要的作用。Webpack有五个核心概念 在插件开发中需要处理html、css、sass、jpg、style等各种文件只有在Webpack中配置相应的Loader后这些文件才能被处理。而且我们很可能遇到某些文件需要使用特定的插件而其它文件又无需处理的情况。下面的示例中列举了添加插件、对文件单独处理以及参数配置这三个常用的基本操作。 module.exports function (config, entry) { //常用功能1增加插件config.module.rules.push({test: /\.(svg)([\?]?.*)$/,use: [{loader: file-loader,options: {outputPath: url path.join(WEBPACK_DIRECTORY, url),publicPath: url {return url;}}}]});}//常用功能2对文件单独处理
if (entry.script src/script.js) {config.plugins.push(new htmlWebpackPlugin({ }));
}
//常用功能3定制js处理config.module.rules.push({test: /\.jsx?$/,use: [{ loader: babel-loader,options: {presets: [babel/preset-react,babel/preset-env],plugins: [//引入antd组件库[import,{libraryName: antd,libraryDirectory: es,style: css}]]}}]});ESLint配置 JavaScript是一门非常灵活的语言很多错误往往运行时才爆出通过配置前端代码检查方案在编写代码过程中可直接得到错误反馈也可以进行代码风格检查不仅提升了开发效率同时对不良代码编写习惯也能起到纠正作用。在ESLint中需要配置基础语法规则、React 规则、JSX规则等由于Sketch插件的CocoaScript语法较为特殊需要配置全局变量以此忽略AppKit中无法识别的类。 虽然我们曾在部门组会中被多次“安利”ESLint的强大作用这里给大家推荐一篇技术文章ESLint 在中大型团队的应用实践但如果不是做前端或者RN开发的同学可能对于ESLint的复杂配置并不熟悉。可以直接使用Skpm提供的ESlint Config里面配置了包含Sketch和macOS的头文件的全局变量而代码格式化则推荐使用Prettier。 npm install --save-dev eslint-config-sketch
//或者直接使用带prettier以eslint的skpm template工程
$ skpm create my-plugin --templateskpm/with-prettier 内容服务端化 Sketch推出的库Library功能对于维护设计系统或风格指南起到非常重要的作用可以给团队带来高效工作体验甚至改变设计团队工作方式和流程。我们通过组件库可以在整个设计团队中共享组件SymbolLibrary可以实现“一处更改处处生效”即使是关联了远程组件库历史的设计稿检测到更新时也会收到Sketch通知确保工作中使用的是最新组件。 库功能对美团外卖UI一致性起着至关重要的作用这主要体现在两方面首先是实现设计风格沉淀目前袋鼠UI已经形成了自己的独特风格外卖设计团队根据设计规范对符合UI一致性外卖业务场景的组件不断进行抽象及建设沉淀出越来越多的通用业务组件这些组件需要及时扩充到Library中供团队成员使用另外一个作用则是保持团队使用的均为最新组件由于各种原因组件的设计元素色彩、字体、圆角等属性可能会发生变更需要及时提醒团队成员更新组件保持所有页面的一致性。 库组件自动更新其实就是 “库列表” - “库 ID” - “外部组件原始 ID” 这三者的关联。Sketch内部是靠UUID进行对象识别的通过库组件的库ID从库面板的列表中按照添加的时间从新到旧依次检索所有未被禁用的、链接完好的库直到匹配到库的ID 然后查找该库文件内是否有与库组件SymbolID匹配的组件如果包含且内容有差异就提醒更新更新的过程实际上是内容替换。 我们通过以下步骤使用RSS技术共享Library供整个UI设计团队使用 将Library Document 托管到公司内网服务器上。创建一个XML文件记录版本信息和更新地址。最后使用Meyerweb URL编码器之类的工具或直接encodeURIComponent对XML feed URL进行编码并将其添加到以下内容sketch://add-library?urlhttps://***.xml。将此URI在浏览器中打开即可。?xml version1.0 encodingUTF-8?
rss version2.0 xmlns:atomhttp://www.w3.org/2005/Atom xmlns:contenthttp://purl.org/rss/1.0/modules/content/ xmlns:dchttp://purl.org/dc/elements/1.1/ xmlns:sparklehttp://www.andymatuschak.org/xml-namespaces/sparklechanneltitleMy Sketch Library/titledescriptionMy Sketch Library/descriptionimageurl/url/imageitemtitleMy Sketch Library/titlepubDateWed, 23 Jun 2019 11:19:04 0000/pubDateenclosure urlmysketchlibrary.sketch typeapplication/octet-stream sparkle:version1//item/channel
/rss5. 开发流程小结 前面一口气讲述了很多内容可能你一时无法消化这里对插件的开发流程作个简要的总结 首先利用JavaScript 或CocoaScript开发操作面板。使用NPM安装所需依赖。通过Bridge传递用户操作到插件逻辑侧通过调用Skecth API对文档进行处理。使用Webpack进行打包。通过测试后发布插件更新。 别人可能没告诉你的事儿 这部分主要记录了积木Sketch Plugin开发过程中的踩坑经历但是这里我们没有贴大段的代码没有直接告诉你答案而是把分析问题的过程记录下来。“授人以鱼不如授人以渔”相信只要你了解了这些分析技巧即使之后遇到更多的问题也可以轻jia松ban解决。 1. 与Xcode工程混合编译 首先我们要明确一个问题为什么要使用XCode工程 虽然官方提供了JS API并承诺持续维护但这项工作一直处于Doing状态而且官方文档更新缓慢没有明确的时间节点。因此对于某些功能比如我们想建一个具有Native Inspector Panel的插件就不得不使用XCode进行开发。使用Xcode开发对于iOS开发者也更加友好无需再学习前端界面开发知识。 这里推荐Invison的开发成员James Tang分享的博客文章《Sketch Plugin Xcode Template》里面详细描述了构建插件XCode工程的步骤这也成为很多插件开发者遵循的范本。当然随着Sketch的不断升级某些API已经不受支持但作者讲述的开发流程和思路依然没有改变具有很高的学习价值。 JavaScript
//利用 Mocha加载framework
var mocha Mocha.sharedRuntime();
[mocha loadFrameworkWithName:frameworkName inDirectory:pluginRootPath]除此之外Skpm中已经内置了skpm/xcodeproj-loader也可在JS中直接加载Framework。 JavaScript
//加载framework
const framework require(../xcode-project-name/project-name.xcodeproj/project.pbxproj);
const nativeClass framework.getClass(NativeClassName);
//获取nib文件
const ui framework.getNib(NativeNibFile);
//也可以直接加载xib文件
const NibUI require(../xcode-project-name/view-name.xib)
var nib NibUI()
let dialog NSAlert.alloc().init()
dialog.setAccessoryView(nib.getRoot())
dialog.runModal()当然你也可以直接使用Github上一些知名的开源项目有些会直接提供Framework供你使用比如更改原生的toolbar 2. 了解Electron 为什么在讲述Sketch Plugin的时候忽然会提到Electron这里有一个小故事某天上班打开大象美团内部沟通软件。 看到一条公众号推送是公司成立了Electron技术俱乐部美团技术团队内部自发成立了很多技术俱乐部经过了解发现Electron基于Chromium和Node.js可以使用HTML、CSS和JavaScript构建桌面应用程序Electron负责其中比较复杂的部分而开发者只需关心应用的核心需求即可。大象的Mac端就大量使用了Electron技术用Web框架去开发桌面应用可以直接复用Web现有的开发成果并获得出色的运行效率。 我们就进行了简单的学习在之后的一段时间并没有再去关注这项技术直到某天在插件开发的过程中忽然遇到一个问题在插件WebView显示的情况下在桌面空白处点击使Sketch软件失去焦点整个App就会被隐藏。试了几个流行的插件发现大部分均有此问题这给设计师的工作造成了诸多不便。试想我只是去打开Finder找一个文件你为什么要把我的软件最小化在Github上留言后很快得到了项目开发者Mathieu Dutour的官方回复原来只需要设置一个hidesOnDeactivate属性即可。 等等这不是Electron中的属性么仔细查看Readme才发现作者写道“The API is mimicking the BrowserWindow API of Electron.”这下可方便多了你想自定义窗口的表现只需按照Electron的API设置即可想想看其实Electron的工作方式是不是和Sketch Plugin如出一辙 3. 更新原生属性面板 为了更好地提升积木Sketch Plugin的使用体验UI同学通过建立公共Wiki记录我们设计团队在插件使用过程中的反馈建议其中有一条很奇怪“通过插件面板更新Layer属性后右侧面板不刷新。”和上一个问题一样经测试其它插件大部分也有此问题但是如何去更新右侧属性面板呢翻阅了Sketch的API文档还是“丈二和尚摸不着头脑”。这个时候想起了macOS开发的一个神器Interface Inspector它可以在运行时分析正在运行的Mac应用程序的界面结构和属性非常强大。 开心的下载下来后发现这个软件上次的更新时间是6年前忽然有了一种不祥的预感。果然Attach任何App时都会提示无法Attach在macOS Catalina版本已经无法运行。可是这怎么能难倒“万能”的程序员呢我们查看系统报错发现是mach_inject_bundle_stub错误查阅发现mach_inject_bundle_stub是Github上的一个开源库所以自己下载源码重新编译个Bundle包就可以了。 Attach成功后就可以对Sketch的面板进行属性分析了是不是忽然感觉打开了新世界的大门经过查阅发现右侧面板在MSInspectorController中。如下图所示 下一步需要用Class-Dump工具来提取Sketch的头文件查看可以对inspector面板进行操作的所有方法 不出所料我们发现了reload()猜测调用这个方法可以刷新面板测试一下发现问题被修复了。如果你使用Sketch的JavaScript API的话名称不一定能完全对应但是基本差不多稍加分析也可以找到。这里只是教大家一个思路这样即使遇到其它问题按照上面的步骤试试看没准就可以解决。 JavaScript
// reload the inspector to see the changes
var sketch require(sketch)
var document sketch.getSelectedDocument()
document.sketchObject.inspectorController().reload()未来等你加入 如你所见积木Sketch Plugin可以帮助设计团队提升设计效率、沉淀设计语言以及减少走查负担让RD同学面对新项目时可以专注于业务需求而无需把时间耗费在组件的编写上减少QA工作量保证控件质量无需频繁回归测试帮助PM提高版本迭代效率及版本需求吞吐量提供业务的快速拓展能力。 当然我们除了希望制作一流的产品也希望积木插件可以让你在繁忙的工作中得以喘息。我们会继续以设计语言为依托以Skecth Plugin为抓手持续进行UI一致性建设提高客户端UI业务中台能力。 可能对于一个前端工程师来说对React、Webpack等配置可以信手拈来对于一个iOS工程师来说XCode调试、Objective-C语法是开发前的基础对于一个桌面工程师来说对Electron、Hook分析已司空见惯。可Sketch Plugin开发就是这么有趣虽然只是一个小小的插件但它会让你接触各个端的技术提升技术视野但同样会让你在开发过程中遇到很多困难曾经困扰了我好几天的一个Webpack问题部门同事帮我们联系了一个开发经验丰富的前端妹子去咨询对方一行代码竟然就解决了。做你害怕做的事然后你会发现不过如此。 目前积木插件开发还处于较为初级的阶段包括Mach外卖自研动态化框架实时预览、模板代码自动生成、自建插画库等功能已经在路上。除此之外我们还规划了很多激动人心的功能需要制作更多精美的前端页面需要更完善的后台管理。 这里加个广告吧不管你是FE、Android、iOS、后端只要你对Bug毫不手软精益求精都欢迎你加入我们外卖技术团队跟我们一起完善Sketch插件生态让积木插件可以为更多业务场景提供服务为用户提供卓越的体验。让我们一起用“积木”拼出万千世界 嗯就先写到这里吧UI团队同学说我们的实现和设计稿竟然差了一个像素我们要回去改Bug了。 致谢 特别感谢优秀的设计师昱翰、沛东、淼林、雪美他们在插件开发过程中给予的帮助。 特别感谢技术团队的云鹏、晓飞在技术上给予的指导。 “前人栽树后人乘凉。”我们向优秀开源项目开发者致敬。 参考文献 Sketch Plugin开发官方文档深入理解Sketch库凹凸实验室高大师Sketch插件开发实践Sketch Plugin Xcode TemplateBeginning Sketch Plugins Development in Xcode携程机票Sketch插件开发实践招聘信息 美团外卖长期招聘 Android、iOS、FE 高级/资深工程师和技术专家欢迎加入外卖App大家庭。欢迎感兴趣的同学发送简历至techmeituan.com邮件标题注明美团外卖技术团队
