业内小程序编辑器实现方案分析

当前, 实现小程序编辑器有以下方案

方案一: 基于 MonacoEditor, 封装文本编辑器在 Electron 中使用
方案一: 启动本地 VS Code 服务器, Electron 中通过 iframe 嵌入网页实现编辑器功能
方案二: 基于 VS Code 完成编辑器功能, 预览功能通过编写 VS Code 插件实现
方案三: 基于 VS Code / Theia 源代码, 定制 IDE(快应用/weex ide/TBE)

各方案优缺点

方案名	是否便于预览小程序	是否便于构建编辑器	是否便于部署
Electron + MonacoEditor	✅ 直接在 Electron 中使用 webview 即可预览小程序,不需要开发	🚫 MonacoEditor 定制开发困难, 配置繁多,中文文档资源少,开发成本高	✅ 有成熟的 Electron 打包方案, 不需要开发
Electron + 通过本地 VS Code 服务进行编辑	✅ 直接在 Electron 中使用 webview 即可预览小程序,不需要开发	✅ 基于 code-server, 通过 url 传入文件地址即可编辑文件,不需要开发	🚫code-server 不支持 windows 平台.只能通过 docker 进行跨平台部署,但是需要将项目文件映射到 docker 容器内,部署成本不可接受
VSCode + 通过插件中的 webview 预览	🚫 vscode 中 webview 功能受限, 不能直接发出网络请求,需要由插件进程进行转发,无法接收 cookie.虽然有Browser Preview方案可以, 通过 puppeteer 单独启动一个 chrome 进程绕过 webview 限制. 但它是基于Chrome DevTools Protocol的`Page.startScreencast`方法不断获取页面截图, 然后通过 webview 里的 canvas 将浏览器界面同步回 VS Code 中, 同步回来的图片模糊, 响应缓慢.无法满足实际开发需要,还是不能接受	✅ 直接使用 VS Code 本身作为编辑器,不需要开发	🕛 不能上架插件市场, 需要开发团队在插件中内置升级检查接口, 由用户主动下载 vsix 文件安装, 部署成本可以接受
VSCode + 修改源代码,解除 webview 中各种限制,定制开发环境	🚫 理论上定制后的项目 webview 可以和 Electron 一致, 但由于需要对 VS Code 整体代码进行修改, 开发成本最高	✅ 直接使用 VS Code 本身作为编辑器,不需要开发	🕛 需要开发团队在项目中内置升级检查接口, 由用户主动下载安装文件, 部署成本可以接受

可以看出, 目前没有一个很好的方案, 可以同时满足不需要订制编辑器和不需要开发预览功能两个需求. 无论哪个方案, 都要进行开发工作.

所以, 如果要开发小程序编辑器, 我们需要在定制 VS Code 和定制 MonacoEditor 之间二选一

当前业内方案

| 平台 | 方案 | 文件列表中的图标解决方案 |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | — |
| 微信小程序开发者工具 | 基于 vscode 代码定制小程序编辑器 | 通过 vscode 插件wechat-icon-theme |
| 字节跳动开发者工具 | 基于 MonacoEditor 定制编辑器, 编辑器通过 webview 的方式独立引入项目 | 无法进入 webview 查看 |
| 百度开发者工具 | 基于 MonacoEditor 定制编辑器, 编辑器通过 webview 的方式独立引入项目 | 无法进入 webview 查看 |
| 支付宝(小程序开发者工具) | 基于 MonacoEditor 定制编辑器, 界面基于 React 渲染, 编辑器是页面的一部分 | 通过 css 样式小程序开发者工具/resources/app/vol_modules.asar/node_modules/@alipay/volans-source/out/browser/icon/icon.css |
| 快应用/Weex Studio/TBE | 定制 vscode 源代码 | | - |

可以看到, 在基于 Electron 的项目中, 基本都使用了定制MonacoEditor的方式. 虽然微信现在使用的是 Electron + vscode 定制版, 但查看微信开发者工具源代码, 能看到微信也是先定制的MonacoEditor, 然后才转为定制 vscode

因此, 采用主流方案, 通过 Electron + 定制MonacoEditor 实现小程序编辑器, 还是比较稳妥的.

补充

微信小程序开发工具调研

微信开发工具探索结论:

微信使用某种方式, 基于 vscode 源代码, 重新编译出了一套 vscode.

使用ctrl+alt+shift+p, 输入Preferences:Open User Settings, 可以进入 vscode 的用户配置页面

配置页面

编译出的代码位于微信web开发者工具\code\package.nw\js\libs\vseditor\bundled\editor.bundled.js

启动编辑器的代码位于core.wxvpkg\45a982046814630a51e40d0fc49574e9.js

编辑器启动配置为

const q = {
  appRootPath: o,
  appActualRoot: n,
  language: this.currentLanguageForVsEditor,
  isStandaloneEditor: !1,
  projectPath:
    null !== (a = null === k || void 0 === k ? void 0 : k.projectpath) &&
    void 0 !== a
      ? a
      : "",
  editorRootPath: m,
  editorRootRelativeToBundleJSPath: "..",
  styleSheetRelativeHref: "../js/libs/vseditor/static/style.css",
  isDev: l,
  httpServerPathPrefix: "__vseditorapp__/" + h.randomString(),
  proxyPort: global.proxyPort,
  webviewResourceBaseRoot: f.join(m, "webview-resource"),
  isSimplifiedEditorApp: !!global.isSettings2,
  useBundledCss: !0,
  bundledStyleSheetRelativeHref: "../js/libs/vseditor/static/style.bundled.css",
};

支付宝小程序开发工具调研

通过查看支付宝小程序 ide 源代码, 可以看到支付宝小程序用的是开天 Editor, 启动代码如下

let K = class VolansTextEditor {
  constructor(e) {
    (this.kaitianEditor = e),
      (this.onDidEditorFocus =
        this.kaitianEditor.monacoEditor.onDidFocusEditorWidget),
      (this.onDidEditorBlur =
        this.kaitianEditor.monacoEditor.onDidBlurEditorWidget);
  }
  getCurrentTextDocument() {
    return this.kaitianEditor.currentDocumentModel
      ? this.editorAndDocuments.getVolansDocument(
          this.kaitianEditor.currentDocumentModel
        )
      : void 0;
  }
  get editor() {
    return this.kaitianEditor.monacoEditor;
  }
};

基于开天框架实现的支付宝小程序在线编辑器

开天框架简介 =>

第一件事是开放的 IDE 生态建设，经过大半年的封闭开发我们已经完成了代号为 “开天” 的 IDE Framework 的研发，IDE Framework 是 IDE 的核心，通过 “开天” IDE Framework 构建的各种 IDE 实现（Web 或本地）来打通研发生态。待再进一步完善后，我们将开源整体的 IDE 解决方案，包括开放的扩展生态体系、Web IDE 容器侧能力等。未来阿里前端的工程体系一定是围绕着 IDE 展开的。

via 从阿里前端工程化中台实践，看中台建设的舍与得

开天相关文档 =>

为未来研发模式而生，KAITIAN IDE 在业务中的探索
 兼容 vscode 插件的主题服务
 跑在浏览器上的小程序 IDE => 基于开天项目, 在浏览器中运行的小程序/IDE.
一种高性能的 Tree 组件实现方案 => 开天 IDE 中, 文件树列表的实现
KAITIAN IDE 是如何构建扩展能力极强的插件体系的？

订制 IDE 方案资料汇总

让 VSCode 在本地 Run 起来
 VSCode 是怎么运行起来的？

Eclipse Theia 框架技术架构揭秘
 基于 Eclipse Theia 构建自有 IDE 文档(英语)

vscode 源码研究必读

执行以下命令, 为 git 克隆 github 项目单独配置 proxy, 走本地代理, 端口需要换成本地 v2ray/shadowsocks 代理端口 & 仅对形如 http/https 协议地址有效 => https://github.com/microsoft/vscode.git

配置之后, 再在本地下载 vscode 源码会很方便

1 2	`git config --global http.https://github.com.proxy https://127.0.0.1:1080 git config --global https.https://github.com.proxy https://127.0.0.1:1080`

花絮

在微信开发者界面, 同时按ctrl+alt+shift+p, 然后输入Preferences:Open User Settings, 可以看到 VS Code 的配置页面

微信开发者工具中的vscode配置页

微信定制了 vscode 源代码的实锤在微信web开发者工具\code\package.nw\js\libs\vseditor\bundled\editor.bundled.js, 打开这个文件, 能看到这是 n 个文件压缩后的结果. 搜索安装程序文件夹已损坏或与此安装程序版本不兼容。请更正该问题或获取该程序的新副本, 可以发现, 在github.com/microsoft/vscode/build/win32/i18n/Default.zh-cn.isl中有同样的描述
如果使用MissingWOW64APIs:"你正运行的 Windows 版本不包含安装程序执行 64 位安装所需的功能。要更正此问题，请安装服务包 %1。"这段话进行判断, 鉴于2017-04-20 的提交中还有这段描述, 但在2018-03-05 的提交里删除了这段描述, 所以可以推测, 微信是基于 2017-04-20~2018-03-05 之间的 vscode 版本进行的定制化
当然也可能正好是微信打包的语言翻译跟过往代码重合了. 从最终界面中看, 微信内的 vscode 版本是相当新的, 2020 年 2 月 7 号的时间线功能都有. 还是相当与时俱进的

业内小程序编辑器实现方案分析

https://www.yaozeyuan.online/2020/08/15/2020/08/业内小程序编辑器实现方案分析/

作者

姚泽源

发布于

2020年8月15日

许可协议

如何统计前端项目中npm包的使用率上一篇

Windows系统重装指南下一篇