《微信小程序七日谈》- 第六天：小程序devtool隐藏的秘密

《微信小程序七日谈》系列文章：

1. 第一天：人生若只如初见；
2. 第二天：你可能要抛弃原来的响应式开发思维；
3. 第三天：玩转Page组件的生命周期；
4. 第四天：页面路径最多五层？导航可以这么玩；
5. 第五天：你可能要在登录功能上花费大力气；
6. 第六天：小程序devtool隐藏的秘密

本系列的文章并非初学教程，而是笔者在具体开发过程中遇到的问题以及部分解决方案。

笔者参与的小程序项目开发也进入尾声了，坑也踩得七七八八，对于哪些没有涵盖和深入使用的功能笔者就不班门弄斧了。

前几篇文章讲了那么多细节也好，策略也好，都是应用层面的东西。自微信小程序公布以来就有先行者不断的探索小程序背后的运行机制。小程序的开发语法和API与前端工程师熟悉的html/js/css非常相似，所以会令很多人疑惑小程序与普通的HTML5应用到底有什么区别。这篇文章其实将小程序的基本运行机制剖析的差不多了，简单概括就是：

• 大部分内容会转化为常规的html/css/js，并使用webview渲染；
• 部分组件调用native实现功能。

既然已经有先行者得出了结论，为啥还要写这篇文章呢？当然是为了凑齐七篇啦，哈哈哈...

开玩笑！这篇文章的目的不是重复别人的结论，而是将笔者研究小程序开发工具源码的一些心得和结论记录下来，以方便大家后续更深入的探索。

看看devtool的源码有什么

第一步是找到小程序devtool的源码，以mac系统为例，源码的打开方式如下图：

其他的文件不用理会，我们要研究的主要代码在Content/Resources/app.nw/dist目录下，这个目录包括devtool的功能代码以及对小程序进行执行、编译、打包、上传等功能的代码。当然，这些代码都是经过混淆的，读起来还挺费劲（摊手~

需要着重注意的是Content/Resources/app.nw/dist/weapp目录，以及commit和trans两个子目录：

从文件的命名上大致可以猜到每个文件对应的功能：

• trans目录下的文件负责将小程序源码进行一系列的转换，最终被转换为浏览器可识别的html、css以及js；
• commit目录下的文件负责执行小程序的构建、打包、上传等功能。

既然我们知道小程序会进行构建打包流程，想得知小程序运行机制最好的办法就是研究构建完毕之后的代码。有了这个目标之后，下一步就是查看devtool的日志获取小程序构建之后的代码存放位置。

找到日志文件

Content/Resources/app.nw/dist/common/log/log.js是负责管理devtool日志功能的文件，其中有这样一段代码：

<