设计师编程指南之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 方法。

除了换 APIWebview 方面也重构了一遍,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 --dev

2

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 build

7

创建 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 的工程化实践经验,分享给大家,欢迎登录 githubCanisMinor 一个 Star

https://github.com/canisminor1990/sketch-select

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2018-03-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏灯塔大数据

技术 | Python从零开始系列连载(一)

导读 安装环境 大家和我一起搜索一下anaconda(注意用谷歌浏览器https://www.continuum.io/downloads): ? 在首页我们...

3764
来自专栏Jaycekon

Python-WXPY实现微信监控报警

概述:   本文主要分享一下博主在学习wxpy 的过程中开发的一个小程序。博主在最近有一个监控报警的需求需要完成,然后刚好在学习wxpy 这个东西,因此很巧妙的...

2K8
来自专栏程序员叨叨叨

compileSdkVersion 'android-24' requires JDK 1.8 or later to compile

今天,好久没有写Android程序的我突发奇想,想简单写一个每日任务APP。好的!新建工程->写好代码框架->开启模拟器->运行!哎哎哎?!那啥!咋报错了嘞?!...

1144
来自专栏*坤的Blog

GithubPage自定义腾讯404界面

之前看到腾讯网络的404和github自带的404,反差很大,于是想自己弄一个了.

3113
来自专栏JackieZheng

利用Solr服务建立的站内搜索雏形---solr1

最近看完nutch后总感觉像好好捯饬下solr,上次看到老大给我展现了下站内搜索我便久久不能忘怀。总觉着之前搭建的nutch配上solr还是有点呆板,在nutc...

3128
来自专栏老九学堂

Java开发常用工具

Java开发常用工具 小贴士 Java是目前最流行的软件开发语言,其IDE环境也备受开发者关注,IDE可以极大的提高开发速 一 UltraEdit ? Ultr...

3225
来自专栏Danny的专栏

关于VB6.0中控件加载的难题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

1924
来自专栏沈唁志

什么是RESETful API 设计规范?

现在在开发中前后端都是分离开发,后端提供接口给前台,RESTful 架构,就是目前最流行的一种互联网软件架构,也相当于是接口规范

2002
来自专栏小灰灰

QuickTask动态脚本支持框架整体介绍篇

一个简单的动态脚本调度框架,支持运行时,实时增加,删除和修改动态脚本,可用于后端的进行接口验证、数据订正,执行定时任务或校验脚本

1202
来自专栏逆向与安全

Xposed截获 Android手机QQ密码

   Xposed框架是一款修改系统框架服务的软件,通过它许多功能强大的模块得以实现,且不冲突地同时运作,自从Xposed框架发布以来,安卓手机的可玩性日益激增...

1300

扫码关注云+社区

领取腾讯云代金券