你也在玩小程序?这些基本原理你知道吗?

微信小程序使用了前端技术栈JavaScript/WXML/WXSS。它背后的原理是怎么样的呢？

写在前面

微信小程序使用了前端技术栈JavaScript/WXML/WXSS。但和常规的前端开发又有一些区别：

JavaScript:微信小程序的JavaScript运行环境即不是Browser也不是Node.js。它运行在微信App的上下文中，不能操作Browser context下的DOM，也不能通过Node.js相关接口访问操作系统API。所以，严格意义来讲，微信小程序并不是Html5，虽然开发过程和用到的技术栈和Html5是相通的。

WXML:作为微信小程序的展示层，并不是使用Html，而是自己发明的基于XML语法的描述。

WXSS:用来修饰展示层的样式。官方的描述是“ WXSS (WeiXin

Style Sheets)是一套样式语言，用于描述WXML的组件样式。WXSS用来决定WXML的组件应该怎么显示。” “我们的WXSS具有CSS大部分特性...我们对CSS进行了扩充以及修改。”基于CSS2还是CSS3？大部分是哪些部分？是否支持CSS3里的动画？不得而知。

在微信小程序官方文档上，有下面这段话：

微信小程序运行在三端：iOS、Android和 用于调试的开发者工具

·在iOS上，小程序的javascript代码是运行在JavaScriptCore中

·在Android上，小程序的javascript代码是通过X5内核来解析

·在 开发工具上， 小程序的javascript代码是运行在nwjs（chrome内核） 中

我们先从开发工具谈起。

开发工具

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

NW.js (previously known as node-webkit) lets you call allNode.js modules directly from DOM and enables a new way of writing applicationswith 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线程之间的交互。

生命周期

至于微信App是如何与小程序的逻辑层javascript交互的呢？可以简单地归纳如下：

JavaScript是脚本语言，可以在运行时解释并执行。微信App里包含了一个JavaScript引擎，由它来负责执行逻辑层的JavaScript代码。那么JavaScript调用的小程序相关API怎么实现的呢？答案是最终会被翻译成实现在微信App里的原生接口。比如开发者调用wx.getLocation(OBJECT)获取当前地理位置，微信App里的JavaScript引擎在执行这个代码时，会去调用微信App里实现的原生接口来获取地理位置坐标。

感兴趣的朋友可以阅读我之前推荐过的一篇文章《React

Native 从入门到原理》。文章分析的虽然是ReactNative，但实际上原理是相通的。

总结

微信小程序最大的好处是不需要做设备适配，只要微信能运行，小程序就能运行。小程序虽然是一个封闭形态下的前端开发技术，但借助微信的巨大影响力，几乎所有人都在往里面冲。微信小程序太火了，内测火，公测更火。内测刚出来，就有人用微信小程序实现了商城，并开源。感叹一下：你的热情，就像一把火，燃烧了整个沙漠。

作为开发者，提几个不足：

不支持从node_modules中加载模块。这样无形中就把npm排除在外了。从开发生态角度，这个应该是微信小程序下一步要重点解决的问题吧。

开发工具自带的代码编辑器还是太简陋了。不知道为什么微信要重复发明轮子。理论上，给流行的代码编辑器(sublime/atom/vscode etc.)开发个插件。然后用户直接到小程序后台上传提交审核就好了。程序员是挑剔到近乎偏执的物种，代码编辑器又是程序员时刻打交道的工具，要做好实属不易。