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

时间 2019-11-26

标签 sketch webview 方式插件开发技术总结繁體版

原文原文链接

相信你们都对Sketch有必定的了解和认识。除了基础的矢量设计功能之外，插件更是让Sketch保持强大的独门秘籍。Sketch开放了第三方插件接口，设计师能够在几百种的插件中轻松找到适合本身工做方式的插件，而且他们都很是容易得到和安装。这里主要介绍使用Javascript API for Sketch开发Sketch插件。

Sketch成为梦想中的“设计师工具箱”。可是每一个人都有不一样的需求，也许你须要一个咱们尚未实现的功能。不要担忧：插件已经能够知足您的需求，或者你能够轻松建立一个插件。javascript

1、Sketch插件能够作什么？

Sketch中的插件能够作任何用户能够作的事情（甚至更多！）。例如：css

根据复杂的规则选择文档中的图层html

操做图层属性前端

建立新图层java

以全部支持的格式导出资产react

与用户交互（要求输入，显示输出）webpack

从外部文件和Web服务获取数据git

与剪贴板交互github

操做Sketch的环境（编辑指南，缩放等...）web

经过从插件调用菜单选项来自动化现有功能

设计规格

内容生成

透视转换

2、插件简介

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

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

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

3、Javascript API for Sketch

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

Javascript API for Sketch 原理：

4、开发文档

一、开发文档

二、API

三、Action API
https://developer.sketchapp.com/guides/action-api/
https://developer.sketchapp.com/reference/action/

四、Sketch Source

五、Demo

5、Sketch webView

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

一、BrowserWindow

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

// In the plugin.
const BrowserWindow = require('sketch-module-web-view')

let win = new BrowserWindow({ width: 800, height: 600 })
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'))

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

三、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:

browserWindow.webContents
  .executeJavaScript('someGlobalFunctionDefinedInTheWebview("hello")')
  .then(res => {
    // do something with the result
  })

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)

6、构建开发工程

一、确立技术栈

使用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+宝塔）

二、构建工程

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: {
  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>

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

四、项目成果

文件目录以下：

7、拓展

一、React - SketchApp

是一个开源库，为设计系统量身定制。它经过将 React 元素渲染到 Sketch 来链接设计和开发之间的鸿沟。

Sketch Javascript API 是源生代码，React - SketchApp 使用react对Javascript API 进行了二次封装。

1)API

http://airbnb.io/react-sketchapp/docs/API.html

2)Demo

https://www.yuque.com/jingwhale/blog/do37mc