浅析微信小程序之 IDE

我在上一篇纠正对微信小程序的一个认知中提到现在的微信小程序是 h5 做的，那今天下班前花十分钟浅谈下小程序 IDE 中的一些逻辑和线索，既能佐证之前的言论，又可以当做今天半天工作的总结。

小程序 IDE 的架构

没什么好说的，网站上整齐地亮着 windows, mac, linux 三个平台的安装包，90% 的可能性是用的 nwjs，实际用的也是 nwjs。

main entry 在哪儿

页面启动的入口在哪里呢，我们看下 network 面板：

可见启动流程是 page-frame.html -> appservice 服务下载 asdebug.js 以及其他 js，比如 appservice 的地址为：http://685122098.appservice.open.weixin.qq.com/asdebug.js

那这是个在线地址吗，no, no, no, 它是个本地代理地址，由 nwjs 后端实现。其中 685122098 是一个 hash，由你的小程序 appId + name hash 生成。

我们看下这个代理服务器的代理规则：

梳理下重点

由于 IDE 整个的代码量巨大，且大量使用了 ES2015 里边的特性 + minify 转换，可读性很差。我取其精华，梳理出一些重点逻辑。

wxml2html

这个步骤是把本地 wxml 格式的小程序模板转为 html 格式，纳尼，原来真是 html 啊，不过这里生成的 html 是为了给 IDE 渲染用的（调试开发阶段）。同时开发调试阶段为断了你使用原始 html + Dom 操作的念想，IDE 特意禁止展示原始的 html：

附上 wxml2html 过程的输入及输出。

输出的 html 代码中包含了微信 js api 的 bridge 实现，前端公共 weUI 样式，以及 template -> html 元素的对应。
记性好的老司机肯定记得我曾经说过，有些组件的实现现在是 h5，未来可以迁移至用 native 来实现，这一点体现在：

       var m = function() {
           return {
               renderingMode: "native",
               keepWhiteSpace: !1,
               parseTextContent: !1
           }
       };
       g._setGlobalOptionsGetter = function(e) {
           m = e
       };
       // 创建元素的构造器
                   g.create = function(e, t, n, r) {
           var a = m(),
               s = r.renderingMode || a.renderingMode,
               c = k;
           "native" === s && (c = E);
           var d = o(e.attributes),
               u = {
                   parseTextContent: void 0 !== d["parse-text-content"] || r.parseTextContent || a.parseTextContent,
                   keepWhiteSpace: void 0 !== d["keep-white-space"] || r.keepWhiteSpace || a.keepWhiteSpace
               },
               h = e.content;
           if ("TEMPLATE" !== e.tagName)
               for (h = document.createDocumentFragment(); e.childNodes.length;) h.appendChild(e.childNodes[0]);
           var f = !1,
               v = function(e, o, r, a) {
                   for (var d = void 0, u = 0; u < o.length; u++) {
                       var h = o[u],
                           g = r.concat(e.length);
                       if (8 !== h.nodeType)
                           if (3 !== h.nodeType)
                               if ("WX-CONTENT" !== h.tagName && "SLOT" !== h.tagName) {
                                   var m = h.tagName.indexOf("-") >= 0 && "native" !== s,
                                       k = null;
                                   m || (k = document.createElement(h.tagName));
                                   var E = "",
                                       S = h.attributes,
                                       T = [];
......