上篇文章我們已經(jīng)創(chuàng)建了一個webView界面贯被，現(xiàn)在我們來看下如何使webView與sketch交互沟于。
window 對象可以取得網(wǎng)頁里頭所有的 JS 函數(shù)與對象咳胃，而如果我們把一個 OC 對象設定成 windowScriptObject 的 value，JS 也便可以調用OC對象的 method旷太。于是展懈，我們可以在Objective-C 程序里頭要求 WebView 執(zhí)行一段 JS，也可以反過來讓 JS 調用一段OC供璧。
為此我們首先引用一個MochaJSDelegate.js:
https://github.com/matt-curtis/MochaJSDelegate
MochaJSDelegate是一種用CocoaScript編寫的腳本存崖，來創(chuàng)建委托以供本機AppKit / UIKit類使用的方法。
@import "MochaJSDelegate.js";
"webView:didFinishLoadForFrame:"是用于監(jiān)聽webView是否加載完畢睡毒。
windowObject.evaluateWebScript("updatePreview()");則是可以執(zhí)行webView中的函數(shù)updatePreview()来惧。
// 創(chuàng)建delegate
var delegate = new MochaJSDelegate({
// 監(jiān)聽webView是否加載完畢
"webView:didFinishLoadForFrame:": (function(webView, webFrame) {
var selection = context.selection;
log(selection);
var textCSS = getSpacings(selection);
log("textCSS:" + textCSS);
// 調用webView中的函數(shù)，更新頁面的數(shù)據(jù)展示
windowObject.evaluateWebScript("updatePreview('" + textCSS + "')");
})
})
// Set the delegate on the WebView
webView.setFrameLoadDelegate_(delegate.getClassInstance());
由此便可以在oc中調用webView里的js演顾。
那么我們在sketch中有很多操作事件供搀，而我們希望能監(jiān)聽這些事件，并調用webView里的函數(shù)钠至。則可以用到Actions：一個Sketch API葛虐，它允許我們在Sketch中基于事件執(zhí)行代碼。一些action（如SelectionChanged）實際上發(fā)生在兩個階段：begin和finish棉钧。如果只想在其中一個上調用函數(shù)屿脐，可以給SelectionChanged.begin，或SelectionChanged.finish添加處理函數(shù)宪卿。更多actions可以看https://developer.sketchapp.com/reference/action/
這時我們在插件的manifest.json中這樣寫：
"handlers": {
"run": "onRun",
"actions": {
"SelectionChanged.finish": "onSelectionChanged",
}
}
表示當更改選擇結束時的诵，執(zhí)行onSelectionChanged這個函數(shù)，接下來我們在onRun下寫該函數(shù)愧捕。跟前面一樣的方式來調用webView里js奢驯，這里不贅述詳細請看代碼。
var onSelectionChanged = function(context) {
var threadDictionary = NSThread.mainThread().threadDictionary();
var identifier = "co.getstyle";
//看是否存在了panel
if (threadDictionary[identifier]) {
var panel = threadDictionary[identifier];
// 獲取已有的panel的webView
var webView = panel.contentView().subviews()[1];
var windowObject = webView.windowScriptObject();
// 獲取選擇的圖層次绘，并處理
var selection = context.actionContext.document.selectedLayers().layers();
var textCSS = getSpacings(selection);
// 執(zhí)行webView中的函數(shù)updatePreview
windowObject.evaluateWebScript("updatePreview('" + textCSS + "')");
}
};
如此瘪阁，一個可與sketch交互的webView界面就完成了。
完整的demo代碼可以看這里https://github.com/lulu0729/getStyle/blob/master/getStyle.sketchplugin/Contents/Sketch/main.cocoascript
