1、熟悉sketch基本使用
安装sketch及sketch插件,体验同类型插件的基本使用
2、熟悉sketch插件开发流程,配置开发环境,实现demo
根据开发者文档可以实现简单的demo
3、分析项目需求,调研插件开发技术方案
项目需求:
官方开发文档只说明了最基础的插件开发流程,但是一个成熟的插件远远不止这些。
一个功能完善的插件应该包括以下三部分:工具栏、WebView容器以及业务数据
技术方案:
官方推荐方案相对于前端会更友好,原生开发方案插件性能会更好,两种都不简单,学习成本大
技术分析:
ketch是用Objective-C构建的
OC是一种通用、高级、面向对象的语言,是C语言的严格超集,广泛用于IOS开发。
sketch官方针对 Sketch Native API 封装了一套 JS API,目前还未涵盖所有场景,比如UI界面、组件拖放等,若需要更丰富的底层 API 需结合 CocoaScript 进行实现。
CocoaScript 是一种bridge,实现 JavaScript 运行环境到 Objective-C运行时的桥接功能,可通过桥接器编写 JavaScript 外部脚本访问内部 Sketch API 和 macOS 框架(AppKit)底层丰富的 API 功能。
AppKit是为macOS应用程序构建和管理事件驱动的图形用户界面。
技术实现:
UI层:采用Webview实现可以使用各种前端开发框架,比如React或者Vue等
逻辑层:负责调用sketch API 通过CocoaScript Bridge进行通信
技术难点:
- sketch更新速度极快,但是官方文档却十分简单且陈旧,因此很多知名的Sketch Plugin因每次API的变更过大纷纷放弃维护;
- 官方提供的API能实现的功能有限,需要结合AppKit、Objective-C IOS开发技术以及桌面开发相关技术,开发技术栈混乱;
参考文档:
凹凸实验室高大师Sketch插件开发实践(夸克开发团队技术文档)
demo: