浅析微信小程序之 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 整个的代码量巨大，且大量使用了 JS 的新特性 + minify 转换，可读性很差。我取其精华，梳理出一些重点逻辑。

• wxml2html

这个步骤是把本地 wxml 格式的小程序模板转为 html 格式，纳尼，原来真是 html 啊。为了断了你使用原始 html + Dom 操作的念想， IDE 特意禁止展示原始的 html ：

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

输出的 html 代码中包含了微信 js api 的实现，前端 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 = [];
     ......

• wxml2js

在线上版本（真机环境）中运行的代码由 wxml2js 过程生成，怎么验证呢。好，接下来我们讲下小程序安装包的格式：

• 小程序安装包的格式

总结下安装包的格式：紧凑型单文件形式 + html 框架 /容器部分 + 参考 wxml 模板转换得来的 js （动态生成 dom ）

• 项目->预览

涉及到打包并上传的逻辑，夜已深，只能直抒胸臆了：

注：转载请注明本文原始出处blog of faywong