开发工具

小程序的 javascript 代码运行在 nwjs 中。nwjs 是什么鬼呢？官方介绍是这样写的：

NW.js (previously known as node-webkit) lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies.

nwjs 合并 Browser 和 Node.js 的运行时，可以使用前端开发技术来开发跨平台的应用程序。借助 Node.js 访问操作系统原生 API 的能力，可以开发中跨平台的应用程序。微信小程序开发工具就是使用 nwjs 开发的。如果你是 Mac 用户，进入目录 /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app 可以看到开发工具的实现代码，当然代码是经过混淆的。网上流行的破解版本开发工具原理上就是修改这里面的代码。

与此类似的，一个更火的项目是 Electron，由 GitHub 推出的，它也是把 Browser 和 Node.js 结合，用来开发跨平台的应用程序。程序员们应该听说过 Atom 这个编辑器界的后起之秀。包括微软拥抱开源社区的编辑器 vscode 也是使用 Electron 开发的。

Electron vs nwjs

这两个平台有什么区别？为什么微信选择 nwjs 呢？我们不妨猜一猜。

从技术角度来讲：

• 应用程序入口不同：Electron 入口是一个 javascript 脚本，脚本里要自己负责创建浏览器窗口，加载 html 页面。而 nwjs 的入口就是一个 html 页面，框架自己会创建浏览器窗口来显示这个 html 页面。

• Node.js 集成方式不同：Electron 直接使用 Node.js 的共享库，不需要修改 Chromium 代码。而 nwjs 为了集成 Node.js ，需要修改 Chromium 代码，以便在浏览器里能通过 Node.js 访问系统原生 API。

• Multi-Context: nwjs 有多个上下文，一个是浏览器的上下文，用来访问 Browser 相关 API，比如操作 DOM ，另外一个是 Node 上下文，用来访问操作系统 API。Electron 没有使用多个上下文，对开发者更友好。

从应用角度来讲：

• 打包后的文件大小：Electron 打包后文件会比 nwjs 小不少。一个 18M 的程序，使用 Electron 打包后是 117M，而使用 nwjs 打包后的程序是 220M。微信小程序开发工具打包后是 219M (v0.10.102800)。没有亲测，评价来源参考文档。

• 代码保护：Electron 只支持代码混淆来保护，而 nwjs 把核心代码放在 V8 引擎里，不但可以保护代码，还可以提高执行效率。

• 开源社区活跃度：Electron 应该是完胜的。看看使用 Electron 构建的应用程序就知道了。而据说 nwjs 的开发文档有些都没有及时更新。

• 应用程序启动时间：Electron 会稍微快一点。没有亲测，评价来源参考文档。

从这个分析猜测，微信选择 nwjs 的原因可能是出于代码保护。毕竟开发工具可以上传小程序，有些接口和数据需要比较严密的保护。哪位大牛可以挖挖看哪些代码被保护起来了。

真机运行环境

下面内容完全是猜测的，如有言中，实属运气。

微信小程序的运行环境应该更类似 ReactNative 之类，而不是纯 Html5。两者最大的不同在于，ReactNative 的界面是由原生控件渲染出来的，而 Html5 的界面是由浏览器内核渲染出来的。两者在性能上有较大的差异，感兴趣的可以参阅我的另外一篇文章《跨平台 App 开发技术方案汇总》。

原理上，小程序是如何在微信 App 里运行的呢？

• 微信 App 里包含 javascript 运行引擎。

• 微信 App 里包含了 WXML/WXSS 处理引擎，最终会把界面翻译成系统原生的控件，并展示出来。这样做的目的是为了提供和原生 App 性能相当的用户体验。

我们来意淫一下小程序加载运行的过程：

• 用户点击打开一个小程序

• 微信 App 从微信服务器某这个小程序

• 分析 app.json 得到应用程序的配置信息（导航栏，窗口样式，包含的页面列表等）

• 加载并运行 app.js

• 加载并显示在 app.json 里配置的第一个页面

这个只是从开发者眼中看到的一个简化版的过程，实际过程应该比这要复杂得多，涉及到浏览器线程（就是运行我们的逻辑层代码 app.js 等的线程）和 AppService 线程之间的交互。从官方网站上的一个图片可以看出端倪：