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`权限才能创建版本。

设置完后,使用命令:

skpm login

将GitHub Token填进去,回车即可。

最后,使用命令,等待发布完成即可:

skpm publish <bump>

bump为patch, minor, or major其中之一,分别表示补丁,小改,大改

若是patch,变为1.0.1

若是minor,变为1.1.0

若是major,变为2.0.0

一旦你的插件被发布,它就会在sketch进行新的部署时出现在sketch插件官网上(可能需要几分钟到几天),部署成功后,可以在sketch插件官网查看发布的插件。

八、拓展

1、React - SketchApp 

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

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

1)API

API Reference · react-sketchapp

2)自研JINGWHALE Sketch 插件

https://www.jingwhale.com/sketch/index.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/510581.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024最新软件测试【测试理论+ python 编程 】面试题(内附答案)

一、测试理论 3.1 你们原来项目的测试流程是怎么样的? 我们的测试流程主要有三个阶段&#xff1a;需求了解分析、测试准备、测试执行。 1、需求了解分析阶段 我们的 SE 会把需求文档给我们自己先去了解一到两天这样&#xff0c;之后我们会有一个需求澄清会议&#xff0c; …

成熟在用的二级医院手术麻醉系统源码 医疗管理系统源码 自主版权

成熟在用的二级医院手术麻醉系统源码 医疗管理系统源码 自主版权 手术麻醉临床信息系统有着完善的临床业务功能&#xff0c;能够涵盖整个围术期的工作&#xff0c;能够采集、汇总、存储、处理、展现所有的临床诊疗资料。通过该系统的实施&#xff0c;能够规范麻醉科的工作流程…

Spring AOP + 自定义注解 实现公共字段的填充

Spring AOP 自定义注解 实现公共字段的填充 代码冗,不利于后期维护. 定义操作这些字段的方法类型 实现步骤&#xff1a; 自定义注解AutoFill,用于表示操作这些公共字段的方法自定义切面类AutoFillAspect,统一拦截&#xff0c;通过反射获取方法入参&#xff0c;并填充公共字段…

Redis中的复制功能(二)

复制 新版复制功能的实现 为了解决旧版复制功能在处理断线重复制情况时的低效问题&#xff0c;Redis从2.8版本开始&#xff0c;使用PSYNC命令代替SYNC命令来执行复制时的同步操作。 PYSNC命令具有完整重同步(full resynchronization)和部分重同步(partial resynchronization)…

《QT实用小工具·八》数据库通用翻页类

1、概述 源码放在文章末尾 该项目实现数据库通用翻页类&#xff0c;主要包含如下功能&#xff1a; 1:自动按照设定的每页多少行数据分页 2:只需要传入表名/字段集合/每页行数/翻页指示按钮/文字指示标签 3:提供公共静态方法绑定字段数据到下拉框 4:建议条件字段用数字类型的主…

三个AI创业方向各有特点和市场潜力

“AI 客户支持”乃成熟市场——B “AI 社交关系”属新旧交织之领域&#xff1b;——C “AI 企业知识”为专业化且对企业运营至要之领域——B AI 客户支持&#xff08;Al customer support&#xff09;&#xff1a;此方向着重借助 AI 大模型技术&#xff0c;以改良和提升客户服务…

0基础学习Mybatis系列数据库操作框架——多环境配置

大纲 配置代码 在实际开发中&#xff0c;我们往往会将开发环境分成&#xff1a;开发、测试、线上等环境。这些环境的数据源不一样&#xff0c;比如开发环境就不能访问线上环境&#xff0c;否则极容易出现线上数据污染等问题。Mybatis通过多环境配置分开定义来解决这个问题&…

流程控制分支结构

一&#xff0c;流程控制 分为三种&#xff1a;顺序流程控制&#xff0c;分支流程控制&#xff0c;循环流程控制 二&#xff0c;顺序流程控制 先执行A&#xff0c;再执行B 三&#xff0c;分支流程控制if语句 从上到下执行代码的过程中&#xff0c;根据不同的条件&#xff0…

linux操作系统的进程状态

这个博客只是为了自己复习用的&#xff01;&#xff01;&#xff01; 冯诺依曼体系结构 计算机是由一个一个硬件组成的 输入设备&#xff1a;键盘&#xff0c;鼠标&#xff0c;扫描仪&#xff0c;写板等等 中央处理器&#xff08;CPU&#xff09;:含有运算器和控制器等 输出单…

【JavaScript】函数 ④ ( 函数返回值 | 函数返回值语法 return 关键字 | 函数默认返回值 undefined )

文章目录 一、JavaScript 函数返回值1、函数返回值引入2、函数返回值语法3、函数默认返回值4、函数默认返回值 一、JavaScript 函数返回值 1、函数返回值引入 JavaScript 函数 可以 实现某种特定的功能 , 执行完毕后 , 可以返回一个 " 返回值 " ; 当 函数 被调用执行…

结构体内存对齐和位段(重点)!!!

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 点击主页&#xff1a;optimistic_chen和专栏&#xff1a;c语言&#xff0c; 创作不易&#xff0c;大佬们点赞鼓…

【一步一步学】RouterOS Mesh介绍,小白也能懂。

理论介绍 RouterOS Mesh是一种网络拓扑结构&#xff0c;它利用无线技术将多个路由器连接在一起&#xff0c;形成一个覆盖范围更广、信号更稳定的网络。这种结构可以帮助用户实现更好的网络覆盖和负载均衡&#xff0c;提高整体网络性能。 RouterOS Mesh的原理是通过建立多个路由…

C++bitset类型

bitset类型 我们介绍了将整型运算对象当作二进制位集合处理的一些内置运算符。 标准库还定义了bitset类&#xff0c;使得位运算的使用更为容易&#xff0c;并且能够处理超过最长整型类型大小的位集合。bitset类定义在头文件bitset中。 定义和初始化bitset bitset类是一个类模…

【C++庖丁解牛】高阶数据结构---红黑树详解(万字超详细全面介绍红黑树)

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1.红黑树的概念2.红黑…

前端学习<三>CSS进阶——0102-CSS布局样式

前言 css 进阶的主要内容如下。 1、css 非布局样式 html 元素的分类和特性 css 选择器 css 常见属性&#xff08;非布局样式&#xff09; 2、css 布局相关 css 布局属性和组合解析 常见布局方案 三栏布局案例 3、动画和效果 属于 css 中最出彩的内容。 多背景多投影特…

Cookie 和 Session

1. 回顾 Cookie是浏览器在本地持久化存储结构的一种机制. 1.1 Cookie的数据从哪里来? 服务器返回给浏览器的. 1.2 Cookie的数据是什么样的? Cookie的数据是键值对结构. 并且这里的键值对都是程序员自定义的. 1.3 Cookie的作用是什么? Cookie可以在浏览器这边存储一些…

Linux网络编程一(协议、TCP协议、UDP、socket编程、TCP服务器端及客户端)

文章目录 协议1、分层模型结构2、网络应用程序设计模式3、ARP协议4、IP协议5、UDP协议6、TCP协议 Socket编程1、网络套接字(socket)2、网络字节序3、IP地址转换4、一系列函数5、TCP通信流程分析 第二次更新&#xff0c;自己再重新梳理一遍… 协议 协议&#xff1a;指一组规则&…

16.Python多线程

如果想让我们的程序同时执行多个任务&#xff0c;就需要使用多线程技术了 。到目前为止&#xff0c;我们编写的程序都是单线程的&#xff0c;在运行时一次只能执行 一个任务。 1 线程相关的知识 1.1 进程 一个进程就是一个正在执行的程序&#xff0c;每一个进程都有自己独立…

C++ 基础复习

1.常量 #include<iostream> using namespace std; // 1.define 宏常量 #define N 50 int main(){//N 60; // define定义的数据为常量&#xff0c;一旦修改会报错 cout<<N<<endl;//2.const 修饰的常量 const int m 12; //m 24; //错误 const修饰的常量不能…