设计师编程指南之Sketch插件开发 10 - skpm & webview
设计师编程指南之Sketch插件开发 10 - skpm & webview
往期文章索引：
1 / 入门基本概念、page的相关操作
2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操作
3 / DIY一个Sketch插件，生成猫猫狗狗的全家福
4 / NSPasteboard 、text 的操作
5/ Shape 的一些操作，主要介绍 line 及 rect
6/ Shape的curve操作
7/ GUI
8/ Cocoa基础
9/ Shape中的oval
shadow：
“
本期由 CanisMinor 创作，他是一枚 UI / UX Designer & FE Developer 。base 北京，毕业于 CAA 中国美术学院，>5 年从业经验，专注于 Design » Code ，设计流程管理和 Atomic Design 及自动化设计，技术栈主要为 React/Vue ，阿里开源项目 Antd/Dva/Roadhog 重度用户，Sketch 第三方插件作者。
对了，CanisMinor 帅哥一枚～不信？请看个人 blog，微动效做得很棒：
https://canisminor.cc/about
请复制链接欣赏，技艺双全的 UED 全栈设计师～以下为正文
”
拿 Sketch 49 的新 JS API 重构了一遍 SketchSelect 插件（ 点击阅读原文下载体验 ），感受：Sketch JS API 文档比之前清晰太多，还带了示例代码片段，官方终于想起有这么个文档了 ?，但目前暴露的属性非常不全，只能说是阉割版，比如 TextLayer 的字体，ShapeLayer 的混合模式投影等，还有诸如导出，锁定，隐藏等状态都无法直接取到，还是得用其丑无比的 CocoaScript 方法。
除了换 API，Webview 方面也重构了一遍，skpm 提供了使用 webpack 的官方示例文件，这边我因为使用 roadhog/dva 全家桶，所以魔改了一遍。
1
安装
1） skpm:
是 sketch 第三方开发工具集，提供调试/打包/发布等开发插件常用的功能。
2） @skpm/builder:
skpm 开发包
3） sketch-module-web-view:
skpm 提供的 webview 包
4） roadhog / dva:
阿里 react/redux/webpack 全家桶
5） cross-env:
设置环境变量
6） concurrently:
进程多开
终端输入：
# 全局安装skpm包
$ npm i -g skpm
# 安装依赖,采用yarn进行包管理
$ yarn add @skpm/builder sketch-module-web-view dva
$ yarn add roadhog cross-env concurrently --dev2
package 配置
package.json 文件配置如下：
{
"engines": {
"sketch": ">=49.0"
},
"skpm": {
"name": "plugin-name",
"manifest": "src/manifest.json",
"main": "plugin.sketchplugin",
"assets": ["dist"]
},
"scripts": {
"start": "concurrently \"yarn start:panel\" \"yarn start:plugin\"",
"start:plugin": "cross-env NODE_ENV=development skpm-build --watch",
"start:panel": "roadhog dev",
"build": "yarn build:panel && yarn build:plugin",
"build:plugin": "cross-env NODE_ENV=production skpm-build",
"build:panel": "roadhog build",
"publish": "skpm publish",
"link": "skpm-link"
}}3
skpm 配置
1) name：
插件名称
2) manifest：
插件配置文件 manifest.json 的位置
3) main:
打包后输出的插件文件
4) assets ( 数组 ) :
资源文件，同 webpack 中的 public
ps : 这里把 webview 编译后的 dist 当做资源文件，编译插件时会自动复制过去。
4
roadhog 配置
webpackrc.js 文件配置如下：
export default {
entry: './panel/index.js',
ignoreMomentLocale: true,
html: {
'template': './panel/index.ejs'
},
define: {
'$dirname': __dirname,
'$isDev' : process.env.NODE_ENV === 'development'
}
};配置详情可以查看 roadhog 官方文档。
5
文件结构：
# webview资源文件(插件使用的也一并放入)
+ public
- icon/png ...
# webview目录
+ panel
+ components
+ models
+ routes
- index.js
- index.ejs
...
# 插件目录
+ src
# 插件配置文件
- manifest.json
- index.js
...
# roadhog配置文件，用于webview
- .webpackrc.js
# sketch插件自动更新信息
- .appcast.xml
- package.json
# 编译后
# 1.webview build
+ dist
- index.html
- index.js
- index.css
- icon/png
...
# 2.plugin build
+ plugin.sketchplugin
+ Contents
# webview/资源文件
+ Resources
- index.html
- index.js
- index.css
- icon/png
...
# 插件部分
+ Sketch
- manifest.json
- index.js
- ...6
使用
# 开发 NODE_ENV=development
# 同时启动并监听 plugin 和 webview
# 如果不想每次自动执行插件, 可把--run去除
$ yarn start
# 打包 NODE_ENV=development
$ yarn build7
创建 Panel
src/index.js 文件
import WebUI from ‘sketch-module-web-view’;
// 判断是否是开发环境
const isDev = process.env.NODE_ENV === ‘development’;
// 开发环境中使用浏览器调试地址
const Panel = isDev ? ‘http://localhost:8000‘ : ‘index.html’;
export default context => {
// 创建Webview Panel
const panelUI = new WebUI(context, Panel, {
identifier: ‘plugin.panel’,
// 窗口id
x: 0,
y: 0,
width: 340,
height: 624,
title: ‘Sketch Select’,
onlyShowCloseButton: true,
hideTitleBar: false,
shouldKeepAround: true,
resizable: false,
handlers: {
// plugin 和 webview 之间的通讯方法
},
});
};详情请查看 sketch-module-web-view 官方文档
8
通讯方法
src/index.js 文件
panelUI.handlers = {
// webview 远程调用 plugin 的方法
onClick(callback) {
console.log(callback);
// plugin 远程调用 webview 中的方法
const data = JSON.stringify({ …Data });
panelUI.eval(remoteFunc(${data}));
},}panel/index.js 文件
import pluginCall from 'sketch-module-web-view/client';
// webview 远程调用 plugin 中的方法
pluginCall('onClick', callback);
// plugin 远程调用 webview 的方法
window.remoteFunc = data => {
const Data = JSON.parse(data);
console.log(Data);
};9
调试
安装 sketch-dev-tools , sketch-dev-tool 可以在 sketch 中开启类似 Chrome 开发者工具的面板，方便调试，还可以直接查阅当前 sketch 文件的图层数据结构，总之非常方便。如果想在 sketch 中调试 webview，可以在 webview 中写一个 console 方法，把需要打印的内容传给 plugin 进行 debug 。
10
发布
打开 GitHub → Setting → Developer settings , 在 Personal access tokens 中生成一个 token , 需要有操作 repo 权限, 使用 skpm 进行登录 (只需一次).
$ skpm login <github-token>发布版本
$ skpm publish <new-version>发布命令会执行下操作:
1) 修改 package.json 版本号
2) git tag 当前版本
3) 把 plugin.sketchplugin 文件压缩上传至 github releases 中
4) 更新 .appcast.xml 文件, 通知 sketch 更新此插件
以上为 CanisMinor 的工程化实践经验，分享给大家，欢迎登录 github 给 CanisMinor 一个 Star ～
https://github.com/canisminor1990/sketch-select
腾讯云开发者
