Руководство по разработке плагинов для Sketch

внешний интерфейс JavaScript Sketch
Руководство по разработке плагинов для Sketch

沫沫.png

Это 123-я оригинальная статья без воды.Если вы хотите получить больше оригинальных статей, выполните поиск в официальном аккаунте и подпишитесь на нас~ Эта статья была впервые опубликована в блоге Zhengcaiyun:Руководство по разработке плагинов для Sketch

задний план

Позвольте мне сначала задать вопрос: как мы все знаем, Sketch — это инструмент проектирования UED, и большинство подключаемых модулей Sketch используются для повышения эффективности работы дизайнеров. Итак, зачем нам, фронтенд-разработчикам, изучать разработку плагинов для Sketch?

Глядя на весь процесс разработки интерфейса, PRD => Дизайн => Код => Выпуск. В настоящее время наш метод повышения эффективности исследований и разработок в основном сосредоточен на ссылке «Код => Выпуск» и повышает эффективность доставки с помощью платформы разработки с низким кодом с низким кодом (компонентизация + конфигурация + возможность построения). Когда возможности строительства станут зрелыми, где будет следующий прорыв для повышения эффективности передовых исследований и разработок? Да, это Design to Code, который завершает генерацию кода слоя пользовательского интерфейса путем анализа черновика дизайна Sketch, позволяя студентам, занимающимся исследованиями и разработками, больше сосредоточиться на коде бизнес-логики. Это также было моим первоначальным намерением изучить разработку плагинов для Sketch. Конечно, сегодняшний обмен не связан с D2C, поэтому основной текст по-прежнему сосредоточен на том, «как помочь всем быстро освоить разработку плагинов для Sketch».

Запас ранних знаний

  • Язык разработки: JavaScript + CocoaScript (предоставляет JS мост для доступа к внутреннему Sketch API и инфраструктуре macOS)

  • Другие технические дополнения: Плагин Sketch поддерживает WebView, который можно разработать с использованием таких фреймворков, как React и Vue.

  • Инженерные инструменты: интерфейсные инструменты упаковкиwebpack, Инструменты для строительных лесовskpm

Если вы front-end инженер R&D, то все это вам не в новинку.

Начать быстро

Быстро создавайте плагины для Sketch с помощью skpm

Инструменты для строительных лесовskpmОбеспечивает создание плагинов, упаковку, публикацию и другие функции, а также богатые шаблоны шаблонов. Вы можете создать проект плагина Sketch за считанные минуты.

1. Установите скпм

npm install -g skpm

2. Создайте плагин, используя шаблон скаффолдинга

skpm create <project-name> --template=<skpm-template>

3. Установите зависимости

npm install
  • Примечание. Этот шаг не только установит пакет зависимостей от третьих сторон, но также автоматически создаст символическую ссылку для синхронизации плагинов, созданных в каталоге разработки, с каталогом установки плагинов Sketch в режиме реального времени, что удобно для разработки и отладки.

4. Горячее обновление для локальной разработки

npm run watch
  • проиллюстрировать:watchКоманда будет прослушивать файлы в каталоге src плагина, и как только файл изменится, она вызовет перекомпиляцию и сборку. Затем через упомянутую выше символическую ссылку синхронизируйте перекомпилированный плагин с каталогом установки плагина Sketch, и вы сможете наблюдать за эффектом модификации плагина в режиме реального времени.

5. Сборка пакета

npm run build

Детальное объяснение

К этому моменту у вас уже должен быть готовый проект подключаемого модуля Sketch, так что давайте посмотрим, что он содержит.

Структура каталогов проекта

├── assets // 静态资源
│   └── icon.png // 插件显示的Icon图标
├── sketch-plugin-demo.sketchplugin   // skpm构建后生成的插件安装包
│   └── Contents
│       ├── Resources
│       │   └── _webpack_resources
│       │   └── resources_webview.js
│       │   └── resources_webview.js.map
│       └── Sketch
│           ├── manifest.json
│           ├── __my-command.js
│           └── __my-command.js.map
├── package.json
├── webpack.skpm.config.js // webpack配置文件
├── resources // Webview相关资源文件
│  ├── style.css
│  ├── webview.html
│  └── webview.js
└── src
    ├── manifest.json // 插件的清单文件
    └── my-command.js // 命令对应的执行脚本js

manifest.json

manifest.jsonФайл манифеста — это основной файл плагина Sketch. В основном включает имя плагина, описание, информацию об авторе, пункт меню вызоваmenu, определенная командаcommands, мониторинг событийActionsи т.п. Плагин Sketch поддерживает определение одного или нескольких пунктов меню.menu, пункт меню связан с соответствующей командойcommand, командная функция реализуется соответствующим JS-скриптом.

1. Базовая конфигурация

// 基础配置示例
{
  "compatibleVersion": 3, // 兼容版本号
  "bundleVersion": 1,
  "commands": [ // 定义命令
    {
      "name": "生成随机色",
      "identifier": "sketch-plugin-demo.generate-random-color",
      "shortcut": "ctrl shift r",
      "script": "./generateColor.js",
      "handlers": {
        "run": "onRun",
        "actions": {
          "OpenDocument": "onOpenDocument"
        }
      }
    }
  ],
  "menu": { // 定义菜单项
    "title": "sketch-plugin-demo", 
    "items": [
      "my-plugin-with-webview.my-command-identifier" // 对应上面命令的identifier
    ]
  }
}

Подробное объяснение выглядит следующим образом:

  • commands
    • name: Отображаемое имя пункта меню, соответствующего команде
    • идентификатор: уникальный идентификатор команды, предлагаемые правила именования${PluginName}.xxx-xxx-xxx
    • ярлык: сочетание клавиш для вызова команды
    • script: скрипт, в котором находится функция, реализующая командную функцию.
    • handlers: определяет обработчик, включая имя метода функции (по умолчанию onRun), который будет вызываться при запуске команды, и определениеActionпрослушиватель событий
  • menu
    • title: название плагина, отображаемое в строке меню.
    • items: определяет набор меню, соответствующий идентификатору команды

2. Пункты меню поддерживают многоуровневую настройку

{
  "commands": [
    {
      "name": "第三级菜单项",
      "identifier": "my-plugin-with-webview.my-command-identifier",
      "script": "./my-command.js",
      "handlers": {
        "run": "onRun",
        "actions": {
          "Shutdown": "onShutdown"
        }
      }
    }
  ],
  "menu": {
    "title": "my-plugin-with-webview",
    "items": [
      {
        "title": "第一级菜单项",
        "items": [
          {
            "title": "第二级菜单项",
            "items": [
              "my-plugin-with-webview.my-command-identifier"
            ]
          }
        ]
      }
    ]
  }
}

Вспомогательные средства разработки: DevTools

  • Чтобы повысить эффективность разработки, вы можете установить подключаемый модуль Sketch DevTools, который позволяет легко просматривать структуру документа Sketch, сеть, выполнение действий и т. д. и поддерживает консоль.

API Reference

JavaScript API

Хотя приложения Sketch разрабатываются с использованием Objective-C, официальная команда предоставляет набор API-интерфейсов JavaScript для подключаемых модулей Sketch, которые поддерживают доступ и изменение документов Sketch, получение пользовательских настроек, предоставление источников данных и многое другое. В основном он включает следующие пять модулей:

// 访问和修改Sketch文档
import SketchDom from 'sketch/dom';
// 处理异步操作。在插件开发中，无法使用ES6的async，需sketch提供async
import Async from 'sketch/async';
// 提供图像或文本数据，直接与Sketch用户界面集成，使内容在整个设计过程中随时可用
import DataSupplier from 'sketch/data-supplier';
// 常用的UI操作，例如：展示message/alert提示信息、获取用户输入等等
import UI from 'sketch/ui';
// 获取/保存用户的自定义数据
import Settings from 'sketch/settings';
// 包含以上5个模块的所有内容
import Sketch from 'sketch';
  • Примечание. Пакет эскизов охватывает все содержимое и является относительно большим, поэтому прямые ссылки не рекомендуются. Вы можете ввести вышеуказанные 5 независимых модулей по мере необходимости в соответствии с реальной сценой.

Пример использования JS API

Далее мы используем JS API для реализации небольшой функции «получить текстовое содержимое в выбранном слое».Полный код смотрите на Github.

import SketchDom from 'sketch/dom';
import UI from 'sketch/ui';
const strArray = [];
// 递归获取每个层级图层中的文本内容，并存储到strArray数组中
const getTextValue = (layers) => {
  if (layers.length) {
    layers.forEach(layer => {
      const { type, layers: subLayers = [] } = layer;
      if (type === 'Text') {
        strArray.push(layer.text);
      }
      if (subLayers.length) {
        getTextValue(subLayers);
      }
    });
  }
}
// 用message提示信息的方式展示获取到的文本内容
const print = () => {
  UI.message('已选择的文本内容：' + strArray.toString());
}

export default () => {
  const doc = SketchDom.getSelectedDocument(); // 获取已选中的文档
  const layers = doc.selectedLayers.layers; // 获取已选中的图层
  getTextValue(layers);
  print(strArray);
};

Actions

В Sketch 3.8 был представлен Action API, позволяющий плагинам отслеживать события поведения пользователя. В настоящее время поддерживается более 300 действий. Ниже перечислены действия, которые мы используем чаще всего:

Action Условия срабатывания Сценарии применения
StartUp Когда плагин установлен/запущен Предварительная обработка документов, чтение конфигурации пользователя, извлечение данных инициализации и т. д.
ShutDown Когда плагин отключен/удален Очистите кешированные данные плагинов, подсказок о недоступных функциях и т. д.
SelectionChanged Когда слои, выбранные пользователем, меняются Повторно получить/обработать соответствующую информацию о данных слоев
Open/CloseDocument При открытии/закрытии документа оперативная информация гида

Пример использования API действий

// 1. 在 manifest.json 文件中注册 Action
"commands": [
    {
      "name": "Actions",
      "identifier": "sketch-plugin-demo.actions",
      "script": "./actions.js",
      "handlers": {
        "actions": {
          "StartUp": "onStartUp",
          "Shutdown": "onShutdown"
        }
      }
    }
]

// 2. 在命令对应的js文件中，定义Action的回调函数	
export const onStartUp = context => {
  UI.message('Sketch-plugin-demo 插件已启动');
}
export const onShutdown = context => {
  UI.message('Sketch-plugin-demo 插件已被禁用');
}

Context

Внимательные студенты увидят, что в приведенном вышеActionВ примере использования функция обратного вызова получает значение по умолчаниюContextОбъект, то есть контекст текущей операции, очень полезен в реальной разработке. мы будемContextПечатая в консоль, можно обнаружить, что она содержит следующие поля:

  • действие: текущее выполняемое действие и этап, на котором оно находится, разделенные на два этапа: начало и конец.
  • scriptPath: абсолютный путь к выполняемому в данный момент скрипту.
  • команда: текущая выполняемая команда
  • document: документ Sketch текущей операции
  • выделение: все слои выбраны в данный момент

WebView

Помимо использования JS API для доступа к документам и их изменения, разработка подключаемых модулей Sketch также имеет очень важную возможность поддержки разработки WebView. Мы можем быстро создать плагин, включающий WebView, используя skpm.

skpm create my-plugin-with-webview --template=skpm/with-webview

Что касается структуры каталогов, как упоминалось ранее, файлы, связанные с WebView, хранятся в каталоге ресурсов для унифицированного управления. Но тут есть небольшая ямка, автоматически добавится JS-файл, скомпилированный и собранный Webpackresources_приставка. Например: webview.js станет resources_webview.js после компиляции. Так что обратите особое внимание на этот момент, когда ссылаетесь на JS в HTML.

Далее давайте подробно рассмотрим код проекта подключаемого модуля, который мы только что создали.

Новый веб-представление

const createWebView = () => {
  // options配置信息
  const options = {
    identifier: 'my-plugin-with-webview.webview',
    title: 'This is a WebView',
    width: 600,
    height: 200, 
    resizable: true
  };
  // 新建WebView窗口
  const browserWindow = new BrowserWindow(options);
  // 页面载入完成后才显示弹窗，避免窗口白屏
  browserWindow.once('ready-to-show', () => {
    browserWindow.show()
  });
  const webContents = browserWindow.webContents;
  // 页面载入完成后提示信息
  webContents.on('did-finish-load', () => {
    UI.message('UI loaded!');
  });
	// 装载HTML页面
  browserWindow.loadURL(require('../resources/webview.html'));
};

Связь между WebView и плагином

  • Плагин отправляет сообщение в WebView
// On the plugin
webContents
	.executeJavaScript(`setRandomNumber(${Math.random()})`)
  .catch(console.error)

// On the WebView
window.setRandomNumber = (randomNumber) => {
  document.getElementById('answer').innerHTML = 'Random number from the plugin: ' + randomNumber
};
  • WebView отправляет сообщение плагину
// On the webview
window.postMessage('nativeLog', 'Called from the webview');

// On the plugin
import UI from 'sketch/ui';
webContents.on('nativeLog', s => {
  UI.message(s);
});

Отладка веб-представления

  • Функцию отладки можно включить с помощью следующей конфигурации. После включения функции отладки вы можете щелкнуть правой кнопкой мыши, чтобы вызвать инструментальные средства.
defaults write com.bohemiancoding.sketch3 WebKitDeveloperExtras -bool YES

Руки

Во избежание ситуации, когда глаза могут встретиться, руки не могут. Ниже приведены два примера для практики.См. GitHub для примера кода.

Сцена 1

Прямоугольный цветовой блок и текстовое содержимое сгруппированы, что требует случайной генерации значений цвета RGB и обновления прямоугольного цвета и соответствующего текстового содержимого. Эффект следующий:

  • Тестовый файл может напрямую использовать ./test-file/test.sketch в примере проекта, а его структура элементов слоя выглядит следующим образом:

  • Быстро просматривайте структуру элементов файла эскиза с помощью подключаемого модуля DevTools и напрямую управляйте свойствами элемента.
import SketchDom from 'sketch/dom';
import UI from 'sketch/ui';
import Mock from 'mockjs';
const Random = Mock.Random;

export default () => {
  const doc = SketchDom.getSelectedDocument(); // 获取已选中文档
  const layers = doc.selectedLayers.layers; // 获取已选择图层
  if (layers.length) {
    layers.forEach(layer => {
      const { type, layers: subLayers = [] } = layer;
      if (type === 'Group') {
        subLayers.forEach(subLayer => {
          const randomColor = Random.hex(); // 随机生成RGB色值
          if (subLayer.type === 'ShapePath') {
            subLayer.style.fills[0].color = randomColor; // 更新矩形颜色
          }
          if (subLayer.type === 'Text') {
            subLayer.text = randomColor; // 更新文本内容为RGB色值
          }
        });
      }
    });
  } else {
    UI.message('当前没有元素被选中，请选择');
  }
};

сцена 2

Реализовать страницу входа, встроенную в WebView, на основе Umi + Antd. Эффект следующий:

  • Во-первых, нам нужно интегрировать Umi + Antd в проект плагина Sketch.

    • В корневом каталоге проекта плагина создайте новую папку веб-просмотра.
    $ mkdir webview && cd webview
    • Создайте новый проект на основе шаблона Umi. Тип скаффолдинга, который я выбираю здесь, — это приложение, а импортированный фреймворк включает в себя antd и dva.
    npm create umi
    • В файле .umirc.js добавьте следующую конфигурацию
    outputPath:‘../src/dist‘, // 打包构建输出的目录
exportStatic: {
  dynamicRoot: true // 静态自由部署
},
    • В каталоге webview/src/pages создайте новый файл document.ejs, Umi соглашается использовать этот файл в качестве шаблона по умолчанию.
    <!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Your App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
    • Чтобы облегчить разработку и отладку, веб-службу можно запустить локально, а затем веб-просмотр загружает страницу этой службы, а обновления локального веб-кода будут скомпилированы и синхронизированы с веб-просмотром в режиме реального времени.
    const webPage = `http://localhost:8000#${Math.random()}`;
browserWindow.loadURL(webPage)

  • Таким образом, мы можем с удовольствием использовать Umi и Ant Design.

import styles from './index.css';
import { Input, Button } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';

export default function () {
  return (
    <div className={styles.normal}>
      <div>
        <Input
          className={styles.antdInput}
          placeholder="请输入用户名"
        />
        <Input.Password
          className={styles.antdInput}
          placeholder="请输入密码"
          iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
        />
        <Button className={styles.antdBtn} type="primary">登录</Button>
      </div>
    </div>
  );
}

Суммировать

Вышеизложенное является основной информацией о разработке подключаемых модулей Sketch. Это дает нам возможность исследовать исходную часть во внешнем интерфейсе. Вы можете разработать некоторые подключаемые модули Sketch в зависимости от ситуации в вашей компании, чтобы помочь UED и внешнему интерфейсу. повысить эффективность. Например, спецификации дизайна пользовательского интерфейса, библиотеки компонентов эскизных символов и сопоставления, связанные с нижестоящими библиотеками интерфейсных компонентов, эскиз в код и многое другое. Важно не то, какие технологии вы знаете, а то, что вы хотите делать. Как сделать бизнес быстрее и снизить затраты на пробы и ошибки — вот вопрос, над которым нам нужно постоянно думать.

использованная литература

Рекомендуемое чтение

Почему не рекомендуется использовать индекс в качестве ключа в Vue

Анализ технической схемы и реализация записи веб-экрана

работы с открытым исходным кодом

  • Zhengcaiyun интерфейсный таблоид

адрес с открытым исходным кодомwww.zoo.team/openweekly/(На главной странице официального сайта таблоида есть группа обмена WeChat)

  • Плагин выбора товара

адрес с открытым исходным кодомGitHub.com/Chinese Patent Medicine-Inc/Reservoir…

Карьера

ZooTeam, молодая, увлеченная и творческая команда, связанная с отделом исследований и разработок продукции Zhengcaiyun, базируется в живописном Ханчжоу. В настоящее время в команде более 60 фронтенд-партнеров, средний возраст которых составляет 27 лет, и почти 40% из них — инженеры полного стека, настоящая молодежная штурмовая группа. В состав членов входят «ветераны» солдат из Ali и NetEase, а также первокурсники из Чжэцзянского университета, Университета науки и технологий Китая, Университета Хандянь и других школ. В дополнение к ежедневным деловым связям, команда также проводит технические исследования и фактические боевые действия в области системы материалов, инженерной платформы, строительной платформы, производительности, облачных приложений, анализа и визуализации данных, а также продвигает и внедряет ряд внутренних технологий. Откройте для себя новые горизонты передовых технологических систем.

Если вы хотите измениться, вас забрасывают вещами, и вы надеетесь начать их бросать; если вы хотите измениться, вам сказали, что вам нужно больше идей, но вы не можете сломать игру; если вы хотите изменить , у вас есть возможность добиться этого результата, но вы не нужны; если вы хотите изменить то, чего хотите достичь, вам нужна команда для поддержки, но вам некуда вести людей; если вы хотите изменить установившийся ритм, это будет "5 лет рабочего времени и 3 года стажа работы"; если вы хотите изменить исходный Понимание хорошее, но всегда есть размытие того слоя оконной бумаги.. , Если вы верите в силу веры, верьте, что обычные люди могут достичь необыкновенных вещей, и верьте, что они могут встретить лучшего себя. Если вы хотите участвовать в процессе взлета бизнеса и лично способствовать росту фронтенд-команды с глубоким пониманием бизнеса, надежной технической системой, технологиями, создающими ценность, и побочным влиянием, я думаю Мы должны поговорить. В любое время, ожидая, пока вы что-нибудь напишете, отправьте это наZooTeam@cai-inc.com

Категории