思考关于微信小程序的开发过程

思考关于微信小程序的开发过程
微信小程序正式上线已有几周时间，相信它的开发模式你已烂熟于胸，可能你也有所疑问，我竟能用 web 语言开发出如此流畅的几乎原生体验的应用。可能你又会猜这不就是 h5 么，厉害点的想不就是 hybrid 么。但是在我们的开发旅途中至始至终都没有使用过 webview ，为啥呢？开发时用的 view 一类的标签，浏览器又是怎么解析成页面的呢？带着重重疑惑，进入微信小程序源码分析吧！

若无小程序开发经验，可先阅读 玩转微信小程序 一文。

微信小程序正式上线已有几周时间，相信它的开发模式你已烂熟于胸，可能你也有所疑问，我竟能用 web 语言开发出如此流畅的几乎原生体验的应用。可能你又会猜这不就是 h5 么，厉害点的想不就是 hybrid 么。但是在我们的开发旅途中至始至终都没有使用过 webview ，为啥呢？开发时用的 view 一类的标签，浏览器又是怎么解析成页面的呢？带着重重疑惑，进入微信小程序源码分析吧！

开发平台

这个 IDE 是如何保证我们小程序的开发和预览的？简要分析两点。

1. 文件目录

打开 微信web开发者工具目录 ，进入 package.nw ，嗯？熟悉的味道来了。里面就3个文件：app ，node_modules，package.json 。显然我们开发时构建阶段所用资源来自于 node_modules ，于是我尝试找下 react模块，结果没有收获...

进入 app 目录下，呈现的四个文件夹分别是：html ，style ，images ，dist 。而你开发时使用的 IDE 的实现正是通过这些文件，不妨用浏览器打开其中一个 html 看看。

这不就是从桌面打开后看到的效果吗（其中 nodeWebkit 提供了 web 到桌面应用的转换）。并且在 index.html 中找到我们的主脚本文件 ../dist/app.js ，整个 IDE 从编辑，开发，预览，发布等一系列操作都在 app.js 及其引用的脚本中。

2. 逻辑关系

接下来开始分析下 dist 下有什么鬼。 不要怕，也就几十行的源码。

不过每行都是压缩过后的而已...好吧，丢去反压缩一下。在 Sublime Text3 中装一个 jsFormat 的插件，对要格式化的代码进行 Ctrl + Alt + F 即可，接下来对我们的文件进行一个逻辑划分。

显然，微信小程序 IDE 本身是用 React 组件并且以 Flux 的架构来构建的，那我们所编写的小程序又是如何运行起来的呢？首先从 ./app/dist/components/sidebar/sidebar.js 开始看起，找到 React Render 出的 restart 按钮(编译按钮的上方)。

// sidebar.jsa.createElement('p', { className: 'sidebar-item sidebar-item-sep'}), a.createElement('p', { className: 'sidebar-item-toolbar', style: p}, a.createElement(g, null), a.createElement('p', { title: `${'darwin'===process.platform?'Command':'Ctrl'} + b`, onClick: this.handleAppRestart, className: 'sidebar-item', style: { paddingBottom: 0 }}, a.createElement('i', { className: 'sidebar-item-icon sidebar-item-icon-reset'}));