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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。