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

写在正面

微信小程序使用前端技术栈 /WXML/WXSS。但是与常规的前端开发有一些不同：

在微信小程序的官方文档中，有以下一段：

微信小程序运行在三个端：iOS，和开发者调试工具

让我们从开发工具开始。

开发工具

这

小程序的代码在 NWJS 中运行。nwjs 到底是什么？官方介绍如下：

NW.js （ as node-） 允许您从 DOM 调用所有 Node.js 以及使用所有 Web 的新方法。

NWJS and Node.js 的运行时允许您使用前端开发技术开发跨平台应用程序。借助 Node.js 访问操作系统本机 API 的能力，您可以开发中跨平台应用程序。微信小程序开发工具就是使用 nwjs 开发的。如果你是 Mac 用户，请转到目录 //.app///app.nw/app，你将看到开发工具的实现代码，该代码是经过混淆的。网上流行的破解版开发工具，原则上都是修改里面的代码。

同样，更受欢迎的项目之一是 的推出，它也结合了Node.js来开发跨平台应用程序。程序员可能听说过 Atom，它是编辑器界的一颗冉冉升起的新星。包含 对开源社区的拥抱的编辑器也是使用它们开发的。

对阵 NWJS

这两个平台有什么区别？为什么微信选择 nwjs？让我们来猜猜。

从技术角度来看：

从应用程序的角度来看：

从这个分析中可以推测，微信之所以选择 nwjs，可能是因为代码保护。毕竟开发工具可以上传小程序，有些接口和数据需要更严密的保护。哪个大佬可以挖掘以查看哪些代码受到保护。

真实的机器操作环境

以下完全是猜测，如果这是真的，那真的是运气。

微信小程序的运行环境应该更像同类，而不是纯粹的。两者最大的区别是界面由本机控件呈现，而界面由浏览器内核呈现。两者在性能上相差很大，有兴趣的可以参考我的另一篇文章《跨平台应用开发技术方案总结》。

原则上，小程序在微信 App 中是如何工作的呢？

我们来看一下加载和运行 的过程：

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

生命周期

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

是一种可以在运行时解释和执行的脚本语言。 应用程序包含一个在逻辑层执行代码的引擎。那么被调用的小程序相关的 API 是如何实现的呢？答案是它最终会被翻译成在微信应用中实现的原生界面。例如，开发人员调用 wx。（） 获取当前地理位置， App 中的引擎在执行此代码时，会调用在 App 中实现的原生接口来获取地理位置坐标。

有兴趣的朋友可以看我之前推荐的一篇文章《从初学者到原则》。虽然文章分析了，但实际上原理是一样的。

总结

微信小程序最大的优点是不需要做设备适配，只要微信能运行，小程序就能运行。虽然小程序是一种封闭形式的前端开发技术，但借助微信的巨大影响力，几乎每个人都在争先恐后地投入其中。微信小程序太火了，内测火爆，公测更是火爆。内测一出来，就有人用微信小程序实现了商城和开源。叹息：你的热情，就像一团火，烧毁了整个沙漠。

作为开发人员，我想提一下几个缺点：

不支持从内部加载模块。这在无形中排除了 npm。从开发生态的角度来看，这应该是微信小程序接下来要解决的问题。开发工具自带的代码编辑器还是太初级了。我不知道为什么微信要重新发明轮子。理论上，为流行的代码编辑器（/atom/ 等）开发一个插件。然后用户直接进入小程序后台上传并提交审核。程序员是批判性的，几乎是偏执的物种，而代码编辑器是程序员一直在处理的工具，要做好并不容易。请参阅文档