插件基礎(chǔ)
目錄
-
入門
-
高級
在磁盤上,插件只是以特定布局排列的文件夾。
它包含一個或多個腳本。每個腳本定義一個或多個以某種方式擴(kuò)展Sketch的命令。它還可以包含命令用于執(zhí)行任何操作的任何其他可選資源(如圖像)。
插件腳本使用JavaScript編寫。
術(shù)語
在我們進(jìn)一步討論之前,讓我們定義一些術(shù)語。
- 插件:一組腳本,命令和其他資源組合在一起作為一個獨(dú)立單元
- Plugin Bundle:磁盤上的文件夾,其中包含組成插件的文件
- 行動:用戶所做的事情(選擇菜單或更改文檔)觸發(fā)命令
- 命令:一個插件可以定義多個命令; 通常每一個都與不同的菜單或鍵盤快捷鍵相關(guān)聯(lián),并導(dǎo)致執(zhí)行不同的處理程序。
- Handler:執(zhí)行一些代碼來實(shí)現(xiàn)Command的函數(shù)。
- 腳本:包含一個或多個實(shí)現(xiàn)處理程序的命令的一個或多個JavaScript文件。
我如何制作插件?
到現(xiàn)在為止,你可能想知道如何開始寫你自己的。
開始使用插件最簡單的方法是打開Sketch,打開文檔并control + shift + k打開Run Script面板。你不需要安裝任何東西; 你可以打開它并在那里實(shí)驗(yàn)。如果您想使用真實(shí)的開發(fā)環(huán)境(您需要為了分發(fā)插件),請查看開發(fā)環(huán)境頁面。
最小的插件示例如下所示:
export default function(context) {
context.document.showMessage('Hello, world!')
}
它在Sketch文檔底部呈現(xiàn)一個敬酒說“Hello,world!”。
接下來的幾個指南將逐漸向您介紹插件的內(nèi)部工作。我們將檢查插件的構(gòu)建塊:清單和腳本。一旦你掌握了它們,你可以創(chuàng)建復(fù)雜的插件!
關(guān)于JavaScript的說明
Sketch插件是用JavaScript編寫的,所以我們假設(shè)您對JavaScript語言有基本的了解。如果您覺得不太自信,我們建議您刷新JavaScript知識,以便更輕松地進(jìn)行跟蹤。
我們還在示例中使用了一些ES6語法。我們盡量少用,因?yàn)樗€是比較新的,但我們鼓勵您熟悉箭頭函數(shù),let和const語句。
該腳本不在瀏覽器或節(jié)點(diǎn)環(huán)境中運(yùn)行,而是在每個本機(jī)MacOS和Sketch API都暴露的特殊環(huán)境中運(yùn)行。這是一個先進(jìn)的,但有必要真正理解如何建立更先進(jìn)的東西。