[sketch plugin]如何写一个可交互的webView界

上篇文章我们已经创建了一个webView界面，现在我们来看下如何使webView与sketch交互。
window 对象可以取得网页里头所有的 JS 函数与对象，而如果我们把一个 OC 对象设定成 windowScriptObject 的 value，JS 也便可以调用OC对象的 method。于是，我们可以在Objective-C 程序里头要求 WebView 执行一段 JS，也可以反过来让 JS 调用一段OC。
为此我们首先引用一个MochaJSDelegate.js:
https://github.com/matt-curtis/MochaJSDelegate
MochaJSDelegate是一种用CocoaScript编写的脚本，来创建委托以供本机AppKit / UIKit类使用的方法。

@import "MochaJSDelegate.js";

"webView:didFinishLoadForFrame:"是用于监听webView是否加载完毕。
windowObject.evaluateWebScript("updatePreview()");则是可以执行webView中的函数updatePreview()。

// 创建delegate
  var delegate = new MochaJSDelegate({

    // 监听webView是否加载完毕
    "webView:didFinishLoadForFrame:": (function(webView, webFrame) {
        var selection = context.selection;
        log(selection);
        var textCSS = getSpacings(selection);
        log("textCSS:" + textCSS);
        // 调用webView中的函数，更新页面的数据展示
        windowObject.evaluateWebScript("updatePreview('" + textCSS + "')");
    })
  })

  // Set the delegate on the WebView
  webView.setFrameLoadDelegate_(delegate.getClassInstance());

由此便可以在oc中调用webView里的js。
那么我们在sketch中有很多操作事件，而我们希望能监听这些事件，并调用webView里的函数。则可以用到Actions：一个Sketch API，它允许我们在Sketch中基于事件执行代码。一些action（如SelectionChanged）实际上发生在两个阶段：begin和finish。如果只想在其中一个上调用函数，可以给SelectionChanged.begin，或SelectionChanged.finish添加处理函数。更多actions可以看https://developer.sketchapp.com/reference/action/
这时我们在插件的manifest.json中这样写：

"handlers": {
  "run": "onRun",
  "actions": {
    "SelectionChanged.finish": "onSelectionChanged",
  }
}

表示当更改选择结束时，执行onSelectionChanged这个函数，接下来我们在onRun下写该函数。跟前面一样的方式来调用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);
   // 执行webView中的函数updatePreview
    windowObject.evaluateWebScript("updatePreview('" + textCSS + "')");
    
  }
};

如此，一个可与sketch交互的webView界面就完成了。
完整的demo代码可以看这里https://github.com/lulu0729/getStyle/blob/master/getStyle.sketchplugin/Contents/Sketch/main.cocoascript