美文网首页
【sketch plugin开发教程1】插件的结构分析

【sketch plugin开发教程1】插件的结构分析

作者: 陆陆lulu | 来源:发表于2019-05-19 15:25 被阅读0次

    前言

    sketch是一款轻量、易用的矢量设计工具,很多UI设计师已经在使用这款工具来进行设计。同时sketch也开放了API供开发者们进行插件开发。我们这个课程就是来学习如何开发sketch 插件。

    插件的结构

    插件是一个或多个脚本的集合。每个脚本都定义了一个或多个方法来扩展Sketch的命令。我们可以看到它是一个以.sketchplugin为扩展名的文件夹,包含文件和子文件夹,右键--选择查看包内容,可以看到以下结构:

    mrwalker.sketchplugin
      Contents/
        Sketch/
          manifest.json
          shared.js
          Select Circles.cocoascript
          Select Rectangles.cocoascript
        Resources/
          Screenshot.png
          Icon.png
    

    (一)Resources

    用来放icon图片等资源。

    (二)manifest.json

    这是一个json文件,它包含了名称,描述和作者姓名等信息。定义了插件的命令名称、在sketch显示的菜单选项等。
    比如:

    {
      "name": "Select Shapes",
      "description": "Plugins to select and deselect shapes",
      "author": "Joe Bloggs",
      "homepage": "https://github.com/example/sketchplugins",
      "version": "1.0",
      "identifier": "com.example.sketch.shape-plugins",
      "appcast": "https://excellent.sketchplugin.com/excellent-plugin-appcast.xml",
      "compatibleVersion": "3",
      "bundleVersion": 1,
      "commands": [
        {
          "name": "All",
          "identifier": "all",
          "shortcut": "ctrl shift a",
          "script": "shared.js",
          "handler": "selectAll"
        },
        {
          "name": "Circles",
          "identifier": "circles",
          "script": "Select Circles.cocoascript"
        },
        {
          "name": "Rectangles",
          "identifier": "rectangles",
          "script": "Select Rectangles.cocoascript"
        }
      ],
      "menu": {
        "items": ["all", "circles", "rectangles"]
      }
    }
    

    有关插件的信息

    1.name
    插件的名称
    2.description
    插件的描述
    3.author
    插件的作者
    4.version
    插件版本号
    5.identifier
    指定插件的唯一标识符。Sketch在内部使用此字符串来跟踪插件,为其存储设置等。官方鼓励使用反向域语法,如com.example.sketch.shape-plugins。

    commands

    是一个数组,定义用户执行的一个或多个命令。定义的每项命令具有以下属性:
    1.name
    命令的显示名称。此值在插件菜单中使用。
    2.identifier
    一个字符串,指定命令的唯一标识符。这用于将命令映射到操作,而不论命令名称如何更改。
    3.shortcut
    一个可选的字符串,用于指定该命令的快捷键,例如:ctrl t,cmd t,ctrl shift t。
    4.script
    插件包的Sketch文件夹中用于实现此命令的脚本的相对路径。
    5.handler
    此命令调用的函数。如果未指定,则一般直接运行export的函数

    menu

    用来设置sketch的菜单列表。

    1.title
    一个字符串,为子菜单的标题。

    2.items
    包含次级子菜单项目的数组,它可以包含两种类型:
    (1)命令标识符的字符串;
    (2)数组(相当于次次级子菜单)。
    3.isRoot
    默认情况下,此词典中列出的菜单项将显示在菜单中,其名称由标题键指定。

    如果指定了isRoot键,值为true,则项目将插入插件菜单的根目录,而不是插入子菜单中。在这种情况下,title将被忽略。

    在子菜单中忽略这个key。

    例如:
    在名称为“my-plugin”的菜单中定义了三个命令。菜单的前两项对应于Plugin的两个命令,但第三项是一个名为“My Plugin Submenu”的子菜单。这个子菜单里面有一个项目(插件命令的第三个):

    {
      "menu": {
        "title": "My Plugin Menu",
        "items": [
          "command1-identifier",
          "command2-identifier",
          {
            "title": "My Plugin Submenu",
            "items": ["command3-identifier"]
          }
        ]
      }
    }
    

    相关文章

      网友评论

          本文标题:【sketch plugin开发教程1】插件的结构分析

          本文链接:https://www.haomeiwen.com/subject/dhvjfqtx.html