sketch是什么？

Sketch是 Mac系统才有的软件，可以理解为精简版的PS ，比PS更适合 UI设计，Sketch 插件开发的语言是类Javascript ，而 Sketchup是一款三维建模软件，一般用于建筑设计、景观设计还有游戏场景设计等，插件开发是用的 ruby语言。完成 sketch的插件开发指南这个系列，我也会开始写Sketchup插件开发指南

sketch的主要对象

所有的关于 sketch对象的操作，都是通过 context 来的。context 的document 对象，oc 对应的是 MSDocument 对象。可以通过 log 命令打印出来查看

var doc = context.document,
plugin = context.plugin,
command = context.command,
page = doc.currentPage(),
artboards = page.artboards(),
selectedArtboard = page.currentArtboard(),// 当前被选择的画板
selection = context.selection; // 被选择的图层
console.log(doc);

Context

当输入插件定制的命令时，Sketch 会去寻找该命令对应的实现函数，并传入 context 变量。context包含以下变量

command: MSPluginCommand 对象，当前执行命令
document: MSDocument 对象，当前文档
plugin: MSPluginBundle 对象，当前的插件 bundle，包含当前运行的脚本
scriptPath: NSString 当前执行脚本的绝对路径
scriptURL: 当前执行脚本的绝对路径，跟 **scriptPath **不同的是它是个 NSURL 对象
selection: 一个 NSArray 对象，包含了当前选择的所有图层。数组中的每一个元素都是 MSLayer 对象

Sketch分析

sketch是用Objective-C构建的。sketch官方针对 Sketch Native API 封装了一套 JS API，目前还未涵盖所有场景，比如UI界面、组件拖放等，若需要更丰富的底层 API 需结合 CocoaScript 进行实现

OC是一种通用、高级、面向对象的语言，是C语言的严格超集，广泛用于IOS开发。

CocoaScript 是一种bridge，实现 JavaScript 运行环境到 Objective-C运行时的桥接功能，可通过桥接器编写 JavaScript 外部脚本访问内部 Sketch API 和 macOS 框架（AppKit）底层丰富的 API 功能。

AppKit是为macOS应用程序构建和管理事件驱动的图形用户界面

技术实现

UI层：采用Webview实现可以使用各种前端开发框架，比如React或者Vue等

逻辑层：负责调用sketch API 通过CocoaScript Bridge进行通信

可以通过一张图看下整个流程：

sketch插件

Sketch 插件是按照特定方式管理的一个文件夹，包含一个或多个 scripts，每个 script 含有若干扩展 Sketch 用途的命令

插件主要使用 Javascript 语言编写，支持 ES6 语法，但运行环境既不是浏览器也不是 Nodejs，而是 Hybrid SketchAPI for macOS Native 运行环境

sketch官方API

Actions API

该API用于监听用户操作行为而触发事件，例如 OpenDocumen（打开文档）、CloseDocument（关闭文档）、Shutdown（关闭插件）、TextChanged（文本变化）、TogglePresentationMode等。该API未来会被新的 Events API 替代。它代表了 Sketch App 内部触发的事件。具体可以参考官方文档：https://developer.sketch.com/reference/action/

订阅 Actions

manifest.json 文件，配置相应 handlers

"commands" : [ ... {   "script" : "action.js", "name" : "Action",  "handlers" : {    "actions": {  "OpenDocument": "onOpenDocument"    }   },  "identifier" : "my-plugin.my-command-identifier"    }   ... ]// action.js
export function onOpenDocument(context) {   context.actionContext.document.showMessage('Document Opened')
}

Action Context

Action事件会将context.actionContext 传递给handler。有些Action包含两个状态，begin和finished，比如SelectionChanged 。需分别订阅 SelectionChanged.begin 和 SelectionChanged.finished，否则会触发两次事件。

不知道应该订阅哪个 Action 时，可以使用通配符。但运行时性能开销很大，建议仅在开发阶段使用
```
// 终端打开通配符支持
defaults write com.bohemiancoding.sketch3 actionWildcardsAllowed -bool YES// manifest.json 文件配置通配符
{   ... "handlers": { "actions": {  "*": "onActionHandler"  }   }   ...
}
```

Javascript API

是针对 Native API 的封装，目前还未涵盖所有场景，官方承诺未来将覆盖90%。具体可以看官方文档：https://developer.sketch.com/reference/api/

Sketch插件开发大概有如下三种方式：

纯使用 CocoaScript 脚本进行开发
通过 Javascript + CocoaScript 的混合开发模式
通过 AppKit + Objective-C 进行开发

官方建议使用 JavaScript API 编写 Sketch 插件，且官方针对 Sketch Native API 封装了一套 JS API ，目前还未涵盖所有场景，若需要更丰富的底层 API 需结合 CocoaScript 进行实现。通过 JS API 可以很方便的对 Sketch 中 Document、Artboard、Group、Layer 进行相关操作以及导入导出等，不过可能需要考虑兼容性.

原理

CocoaScript

实现 JavaScript 运行环境到 Objective-C 运行时的桥接功能，可通过桥接器编写 JavaScript 外部脚本访问内部 Sketch API 和 macOS 框架底层丰富的 API 功能。

借助CocoaScript使用JavaScript调Objective-C 语法：

方法调用用 ‘.’ 语法
Objective-C 属性设置
- Getter: object.name()
- Setter: object.setName('Sketch')，object.name='sketch'
参数都放在 ‘ ( ) ’ 里
Objective-C中 ’ : '（参数与函数名分割符）转换为 ’ _ '，最后一个下划线是可选的
返回值，JavaScript 统一用 var/const/let 设置类型

开发环境

Skpm

是一个打包工具，用于快速上手插件开发。它基于 webpack，项目根目录下存放 webpack.skpm.config.js，用于工程配置修改

Dialog控件

skpm提供了一些供 JavaScript 调用的Native 控件，比如Dialog

import dialog from '@skpm/dialog'
console.log(    dialog.showOpenDialog({ properties: ['openFile', 'openDirectory', 'multiSelections']  })
)

代码调试

Safari 浏览器开发工具可用于插件的 Javascript 代码调试。

Developer > name of your machine > Automatically Show Web Inspector for JSContexts

同时启用选项 Automatically Pause Connecting to JSContext

Objective-C Classes

Sketch 对外暴露了全部内部方法的调用权限，其 Objective-C 类通过 Bridge 提供 Javascript API 调用。

Sketch 插件系统可以完全访问应用程序的内部结构和 macOS 中的核心框架。Sketch 是用 Objective-C 构建的，其 Objective-C 类通过 Bridge (CocoaScript/mocha) 提供 Javascript API 调用，简单的了解 Sketch 暴露的相关类以及类方法，对开发插件非常有帮助。

GUI

插件GUI的实现

skpm 提供了已封装好的基于 WKWebView 的 sketch-module-web-view，其 API 设计接近 Electron，具体见GitHub。

https://github.com/skpm/sketch-module-web-view/blob/master/docs/browser-window.md
CocoaScript GUI

Sketch 插件通过 Mohca / CocoaScript 连接到 Objective-C / Cocoa。Javascript 调用 Objective-C 方法，需要将方法名的冒号改为下划线，所有 selector 连接成一个连续的字符串。

打开文件对话框，使用 Appkit NSOpenPanel，详细官方文档见：https://developer.apple.com/documentation/appkit/nsopenpanel?language=objc
Native GUI
WebView GUI

Webview与Plugin之间需要实现双向通讯互操作。Webview通过 WKWebView delegates向Plugin发送消息，Plugin则通过webView.evaluateJavaScript_completionHandler() 触发Webview执行Javascript代码

可以做什么？

根据复杂的规则选择文档中的图层
操作图层属性
以所有支持的格式导出资产
与用户交互（要求输入，显示输出）
从外部文件和Web服务获取数据
与剪贴板交互
操作Sketch的环境（编辑指南，缩放等…）
通过从插件调用菜单选项来自动化现有功能
设计规格
内容生成
透视转换

webview

Sketch模块，用于使用webview创建复杂的UI。不用于一般的插件页面，可以使用webview模块加载一个复杂的Web应用，使其与Sketch进行交互。

BrowserWindow

// 在浏览器窗口中创建和控制Sketch
// plugin插件中
const BrowserWindow = require('sketch-module-web-view')let win = new BrowserWindow({ width: 800, height: 600 })
win.on('closed', () => {win = null
})// 加载远程url
win.loadURL('https://github.com')// 或者是加载本地文件
win.loadURL(require('./index.html'))

webContents

const BrowserWindow = require('sketch-module-web-view')
let win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('http://github.com')
let contents = win.webContents
console.log(contents)

sketch和webview通信

1. 从plugin命令向WebView发送消息// webview中
window.someGlobalFunctionDefinedInTheWebview = function(arg) {console.log(arg)
}
// 插件中
browserWindow.webContents.executeJavaScript('someGlobalFunctionDefinedInTheWebview("hello")').then(res => {// do somethingconsole.loh(res);})2.从WebView向插件发送消息// 插件中
var sketch = require('sketch')
browserWindow.webContents.on('nativeLog', function(s) {sketch.UI.message(s)
})// webview中
window.postMessage('nativeLog', 'Called from the webview')// 传递单个参数
window.postMessage('nativeLog', {a: b,
})// 传递多个参数
window.postMessage('nativeLog', 1, 2, 3)

浅谈sketch插件二