微信小程序 devtool隐藏的秘密
微信小程序 devtool笔者参与的小程序项目开发也进入尾声了，坑也踩得七七八八，对于哪些没有涵盖和深入使用的功能笔者就不班门弄斧了。 前几篇文章讲了那么多细节也好，策略也好，都是应用层面的东西。自微信小程序公布以来就有先行者不断的探索小程序背后的运行机制。小程序的开发语法和API与前端工程师熟悉的html/js/css非常相似，所以会令很多人疑惑小程序与普通的HTML5应用到底有什么区别。这篇文章其实将小程序的基本运行机制剖析的差不多了，简单概括就是：
既然已经有先行者得出了结论，为啥还要写这篇文章呢？当然是为了凑齐七篇啦，哈哈哈... 开玩笑！这篇文章的目的不是重复别人的结论，而是将笔者研究小程序开发工具源码的一些心得和结论记录下来，以方便大家后续更深入的探索。 看看devtool的源码有什么第一步是找到小程序devtool的源码，以mac系统为例，源码的打开方式如下图：
其他的文件不用理会，我们要研究的主要代码在 需要着重注意的是
从文件的命名上大致可以猜到每个文件对应的功能：
既然我们知道小程序会进行构建打包流程，想得知小程序运行机制最好的办法就是研究构建完毕之后的代码。有了这个目标之后，下一步就是查看devtool的日志获取小程序构建之后的代码存放位置。 找到日志文件
其中 但是此次代码的探索并非没有收获，起码我们知道了日志文件存放的目录名为“WeappLog”，我们可以使用强大的命令行从硬盘中搜索此目录：
从输出结果可以得知日志文件在Mac系统的存放目录为
上传小程序的流程打包后的小程序在哪里 找到日志文件后便可以从devtool的执行日志中获取小程序被构建后的代码存放位置。当然，第一步是要讲小程序进行构建，操作方法是在小程序开发工具的“项目”菜单”中点击”预览“：
成功后再日志文件中会出现这么一行记录： /Library/Application Support/微信web开发者工具/Weappdest/1484724024071.wx success!
兴致勃勃的找到 看来微信团队还是很谨慎的，在将小程序源码上传之后便会删除构建产出的文件。但是这点小伎俩难不倒程序员！任何行为都是程序执行的，我们直接修改相关的程序代码就可以了嘛！ 做点小手脚，看看打包后的代码 在 {
//省略无关代码
c(l,{
noCompile: !0
},(s,t) => {
if (s) return void n(s.toString());
let u = d.join(k,`${+new Date}.wx`);
b(t,u,(v,w) => {
j(t,(A,B,C) => {});
//省略无关代码
if (y > q) return a.unlink(u,() => {}),void n(`代码包大小为 ${y} kb，超出限制 ${y-q} kb，请删除文件后重试`);
//省略无关代码
})
上述代码有两个删除文件的行为：
将执行删除的代码注释以后，再通过小程序开发者工具进行预览上传操作后，在上文中我们得到的目录中便会留下构建以及打包后的文件了。如下：
其中以 以 其实仅仅将ES6的语法转译成了ES5语法。其余的wxml、wxss以及js文件基本也是这样的状态，所以可以推断源码上传至微信服务器后会执行真正的构建动作，开发工具只执行了一些简单地构建行为。 虽然笔者并未从这份代码中得到全部的真相，但希望这篇文章能够给后续的探索者提供一些微薄的帮助。 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
