Sketch webView方式插件开发技术总结

Sketch作为一款广受欢迎的矢量图形设计工具，其功能远不止基础的矢量设计，它的真正实力部分源自其丰富的插件生态系统。Sketch向开发者提供了官方的第三方插件接口，这使得整个社区能够创建和分享众多功能各异的插件，极大地拓展了Sketch的核心功能集。用户可以便捷地探索数百种精心设计的插件，以契合个人工作流的独特需求，并能够简单快捷地获取和安装这些插件。

尤其值得一提的是，Sketch采用JavaScript API作为插件开发的主要手段，这一机制允许开发者利用JavaScript编写插件代码，借助CocoaScript桥梁与Sketch的内部API以及macOS框架无缝对接。因此，即便是熟悉Web前端技术的开发者也能相对轻松地涉足Sketch插件开发领域，创造出更多提升设计效率和功能性的插件解决方案。

一、Sketch插件可以做什么？

Sketch中的插件可以做任何用户可以做的事情（甚至更多）。例如：

二、插件简介

Sketch 插件都是 *.sketchplugin 的形式，其实就是一个文件夹，通过右键显示包内容，可以看到最普通的内部结构式是这样的：

manifest.json用来声明插件配置信息，commands 定义所有可执行命令，每条 command 有唯一标志符，identifier，menu 定义插件菜单，通过 identifier 关联到执行命令。

my-commond.js是插件逻辑的实现代码实现文件。

三、Javascript API for Sketch

这是Sketch的原型Javascript API。原生Javascript，Sketch的完整内部结构的一个易于理解的子集。它仍然是一项正在进行中的工作。

Javascript API for Sketch 原理：

四、开发文档

1、开发文档

Sketch Developer — Build something beautiful

2、API

Sketch Developer — API Reference

3、Action API

Redirecting…

Sketch Developer — Actions Reference

4、Sketch Source

SketchAPI/Source at develop · sketch-hq/SketchAPI · GitHub

5、Demo

SketchAPI/examples at develop · sketch-hq/SketchAPI · GitHub

五、Sketch webView

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

1、BrowserWindow

在浏览器窗口中创建和控制Sketch：

// In the plugin.
const BrowserWindow = require('sketch-module-web-view');
const identifier = "identifier";//webview 标识
let win = new BrowserWindow({identifier, width: 800, height: 600, alwaysOnTop: true})
win.on('closed', () => {
  win = null
})
// Load a remote URL
win.loadURL('https://github.com')
// Or load a local HTML file
win.loadURL(require('./index.html'))

2、获取已存在的BrowserWindow

import { getWebview } from 'sketch-module-web-view/remote';
const = identifier = "identifier";
const existingWebview = getWebview(identifier);
if (existingWebview) {
  if (existingWebview.isVisible()) {
  // close the devtool if it's open
    existingWebview.close()
  }
}

3、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)

4、skech与webview的通信

1）Sending a message to the WebView from your plugin command

On the WebView:

window.someGlobalFunctionDefinedInTheWebview = function(arg) {
  console.log(arg)
}
On the plugin:
插件启动向WebView发送数据：
browserWindow.webContents
  .executeJavaScript('someGlobalFunctionDefinedInTheWebview("hello")')
  .then(res => {
    // do something with the result
  })

动态向WebView发送数据：

import {getWebview, isWebviewPresent, sendToWebview} from 'sketch-module-web-view/remote';
var existingWebview = getWebview(identifier);
if (isWebviewPresent(existingWebview.id)){ 
 sendToWebview (existingWebview.id , `someGlobalFunctionDefinedInTheWebview(${sentData})` ) 
}

2）Sending a message to the plugin from the WebView

On the plugin:

var sketch = require('sketch')
browserWindow.webContents.on('nativeLog', function(s) {
  sketch.UI.message(s)
})

On the webview:

window.postMessage('nativeLog', 'Called from the webview')
// you can pass any argument that can be stringified
window.postMessage('nativeLog', {
  a: b,
})
// you can also pass multiple arguments
window.postMessage('nativeLog', 1, 2, 3)

六、构建开发工程

1、确立技术栈

使用Sketch webView的方式开发插件。用户通过操作插件界面，webview与Sketch通信解决用户的问题。这样插件界面可以使用现今所有的前端框架与组件库。

1）webView框架选择Umi + Ant Design

注：WebView框架也可以单独的工程与部署。

2）使用Sketch 官方skpm插件工程

3）调试工具

A、使用官方的sketch-dev-tools sketch内作为调试工具

下载代码，代码运行安装插件即可：

npm install
npm run build

调试界面如下：

B、使用浏览器的开发者模式调试webView。

在sketch webView中右击显示调试器即可：

4）服务端技术方案

轻量级服务器部署方案 -（阿里云CenOS+宝塔）

2、构建工程

1)创建Sketch插件基础工程

首先，创建sketch-webview-kit插件工程：

npm install -g skpm
skpm create sketch-webview-kit //创建sketch-webview-kit插件工程

其次，依赖sketch-module-web-view：

npm install sketch-module-web-view

2）创建webView工程（Umi + Ant Design）

首先，创建webView工程目录，

$ mkdir webapp && cd webapp

然后，创建webView工程

yarn create umi

依次：

选择 app, 然后回车确认；

选上 antd 和 dva，然后回车确认；

最后，安装依赖：

$ yarn

3）配置webView工程

A.部署打包配置

.umirc.js文件中，添加：

outputPath:'../src/dist', //打包后的目录
exportStatic: {
  htmlSuffix: true,
 dynamicRoot: true //静态自由部署
},

B.HTML 模板

由于Umi生成没有Html文件，可以自己配置。新建 src/pages/document.ejs，umi 约定如果这个文件存在，会作为默认模板，内容上需要保证有 <div id="root"></div>，比如：

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Your App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

C.添加新页面

直接在pages文件夹下建立页面的js与css样式文件即可。

D.《基于 umi 的 React 项目结构介绍》

3、sketch加载webView工程与联调

1）sketch加载webView

第一种方法：

直接部署webView工程，通过Url加载：

win.loadURL('https://github.com')

第二种方法：

加载webView工程打包后的文件：

win.loadURL(require('./dist/index.html'))

注意：

此方法，由umi打包后的静态资源（css、js）需要拷贝到

pannel3/pannel3.sketchplugin/Contents/Resources/_webpack_resources下。

2）联调加载方法：

本地启动webView工程，本地webView工程会在8000端口起一个服务，加载此服务即可：

const Panel = `http://localhost:8000#${Math.random()}`;
win.loadURL(Panel)

4、项目成果

文件目录如下：

七、发布sketch 插件

前提确保manifest.json的version参数已经修改为想要发布的版本。

{
  "name": "Whale Kit",
  "identifier": "whale-sketch-webview-kit",
  "description": "A quick prototype tool library for sketch. ",
  "author": "jingwhale",
  "authorEmail": "jingwhale@yeah.net",
  "compatibleVersion": 3,
  "bundleVersion": 1,
  "icon": "icon.png",
  "version": "0.4.3",
  "commands": [
    {
      "name": "Efficient design spec",
      "identifier": "sketch-webview-kit.my-command",
      "script": "whaleHomepage.js"
    },
    {
      "name": "Make Layout",
      "identifier": "sketch-webview-kit.my-command2",
      "script": "makeLayoutCommand.js",
      "shortcut" : "shift control a"
    },
    {
      "name": "Generate Button",
      "identifier": "sketch-webview-kit.my-command3",
      "script": "generateButtonCommand.js",
      "shortcut" : "shift control z"
    },
    {
      "name": "Operate Image",
      "identifier": "sketch-webview-kit.my-command4",
      "script": "operateImageCommand.js",
      "shortcut" : "shift control q"
    },
    {
      "name": "Flow Page",
      "identifier": "sketch-webview-kit.my-command5",
      "script": "flowPageCommand.js",
      "shortcut" : "control option shift p"
    },
    {
      "name": "Screen Shot",
      "identifier": "sketch-webview-kit.my-command6",
      "script": "screenshotCommand.js",
      "shortcut" : "control option shift j"
    },
    {
      "name": "Toggle State",
      "identifier": "sketch-webview-kit.my-command7",
      "script": "toggleStateCommand.js",
      "handler" : "onRun",
      "shortcut" : "control option shift k"
    },
    {
      "name": "Convert to Grayscale",
      "identifier": "sketch-webview-kit.my-command8",
      "script": "convertToGrayscaleCommand.js",
      "handler" : "onRun",
      "shortcut" : "control option shift g"
    },
    {
      "name": "Generate QR Code",
      "shortcut": "ctrl shift option q",
      "identifier": "sketch-webview-kit.my-command9",
      "script": "generateQrcode.js",
      "handler" : "onRun"
    },
    {
      "name": "Generate Cover",
      "shortcut": "ctrl shift option c",
      "identifier": "sketch-webview-kit.my-command10",
      "script": "generateCover.js",
      "handler" : "onRun"
    },
    {
      "name": "Generate Radar Chart",
      "shortcut": "ctrl shift option f",
      "identifier": "sketch-webview-kit.my-command11",
      "script": "generateRadarChart.js",
      "handler" : "onRun"
    },
    {
      "name": "Generate Tags",
      "shortcut": "ctrl shift option t",
      "identifier": "sketch-webview-kit.my-command12",
      "script": "generateTags.js",
      "handler" : "onRun"
    },
    {
      "name": "Generate Signifiers",
      "shortcut": "ctrl shift option s",
      "identifier": "sketch-webview-kit.my-command13",
      "script": "generateSignifiers.js",
      "handler" : "onRun"
    }
  ],
  "menu": {
    "title": "Whale Kit",
    "items": [
      "sketch-webview-kit.my-command",
      "-",
      "sketch-webview-kit.my-command2",
      "sketch-webview-kit.my-command3",
      "sketch-webview-kit.my-command4",
      "sketch-webview-kit.my-command7",
      "-",
      "sketch-webview-kit.my-command12",
      "sketch-webview-kit.my-command13",
      "-",
      "sketch-webview-kit.my-command6",
      "sketch-webview-kit.my-command8",
      "sketch-webview-kit.my-command9",
      "-",
      "sketch-webview-kit.my-command5",
      "sketch-webview-kit.my-command10"
    ]
  }
}

首先，需要把你的插件代码放到 Github仓库；

其次，使用开通GitHub Token；

因为，skpm需要一个GitHub令牌才能发布版本，需要`repo`权限才能创建版本。

设置完后，使用命令：