作者介绍：周中坚美团点评工程师4年 Web 前端开发经验tag标签优化4年 Web 前端开发经验主要负责过会员卡、外卖、预订、商家平台等业务的前端开发现在是美团点评点餐团队的一员。我们团队的小程序开发经验系列文章已经发布了4篇这些文章主 ...
作者介绍：周中坚美团点评工程师4年 Web 前端开发经验主要负责过会员卡、外卖、预订、商家平台等业务的前端开发现在是美团点评点餐团队的一员。
我们团队的小程序开发经验系列文章已经发布了4篇这些文章主要介绍了小程序开发概述小程序的视图层小程序的逻辑层 小程序开发中碰到的坑(几个设计实例)。相信大家看了这些文章再结合官方文档已经可以毫无压力地开发小程序了但是为什么有这些坑是不是可以绕过去怎么排查问题我们还想从源头——小程序的源码的角度来尝试分析因此有了这篇源码解析。
代码结构以 mac 电脑为例首先进入应用程序文件夹再右键微信开发者工具显示包内容最后让我们进入 ./Contents/Resources/app.nw 目录下就可以查看小程序的源码了代码结构如图：
文件夹看起来很多但命名还算清晰现在让我们先从开发者工具界面的角度来看下都用到了哪些文件吧。
开发者工具 首页
其中 Console, Sources, Network 就是直接使用的 DevTools, 而 Storage, AppData, Wxml, Sensor 是自己实现的。
参照 Storage, AppData, Wxml, Sensor 这些调试工具这些我们要自己添加一个其实非常简单只要在./app/dist/extensions目录下新建一个文件夹用html/css/js完成这个工具的功能网站优化用html/css/js完成这个工具的功能再改devtools.html将这个工具引入进来chrome.devtools.panels.create()即可如图：
有趣的是在0.15.150201这个测试版中已经发现了一个名为Bluetooth的开发工具。
weapp
上面一节主要讲的是小程序开发者工具的源码我们借助分析源码可以搞清楚代理是怎么设置的模拟器的设备和网络如何添加怎样开发一个满足自己特定需求的 DevTool。
这一节主要介绍我们写的微信小程序的代码是如何变成页面在用户的终端运行的：
tpl 文件夹下是页面模板。
onlinevendor/wcc 在编译时把 wxml 文件 转为 jsonlinevendor/wcsc 在编译时把 wxss 文件转化为 js网站优化onlinevendor/wcsc 在编译时把 wxss 文件转化为 js这也是编译包比代码库要大不少的重要原因。