微信小程序 devtool隐藏的秘密

微信小程序 devtool：介绍其隐藏的秘密

随着微信小程序开发热潮的持续，许多开发者对其背后的运行机制进行了深入。微信小程序宣布以来，大量的先行者对其进行研究，并得出了许多宝贵的结论。但今天这篇文章，不是为了重复已有的结论，而是分享笔者研究微信小程序开发工具源码的一些心得和发现，以便大家更深入地。

当我们谈论微信小程序 devtool，首先要明白其强大的功能背后是如何运作的。大部分内容会被转化为常规的html/css/js，并使用webview渲染。但小程序的某些组件会调用native实现功能。这就是我们常说的“小程序的大部分内容与网页类似，但又有其独特之处”。

当我们深入devtool的源码时，会发现一个宝藏。以mac系统为例，源码的主要部分位于Content/Resources/app.nw/dist目录下。这个目录包含了devtool的所有功能代码，包括小程序的执行、编译、打包、上传等功能的代码。这些代码经过混淆处理，初次阅读可能会觉得有些困难。

尤其值得关注的是Content/Resources/app.nw/dist/weapp目录，以及其子目录mit和trans。从文件的命名上，我们可以大致猜测它们的功能。trans目录下的文件主要负责将小程序源码进行一系列转换，最终转换为浏览器可识别的html、css以及js；而mit目录下的文件则负责执行小程序的构建、打包、上传等操作。

为了更深入地了解小程序的运行机制，我们可以研究构建后的代码。这就需要我们找到devtool的日志文件，从中获取小程序构建后的代码存放位置。日志文件位于Content/Resources/app.nw/dist/mon/log/log.js中，它记录了devtool的所有日志信息，包括构建后的小程序代码存放位置。这个位置在Mac系统中的具体路径为：/Users/<用户名>/Library/Application Support/微信web开发者工具/WeappLog。进入这个目录后，你会发现许多以.log为后缀的日志文件，其中就包含了构建后的小程序代码。

微信小程序构建背后的神秘面纱

第一步，我们首先要如何构建小程序。在小程序开发工具的“项目”菜单中，点击“预览”选项，启动构建过程。当构建成功后，日志文件中会出现一条记录，大致如此：

Wed Jan 18 2017 15:20:24 GMT+0800 (CST) INFO pack.js create /Users/<用户名>/Library/Application Support/微信web开发者工具/Weappdest/1484724024071.wx success!

这条记录告诉我们构建完成的小程序的位置。我们满怀期待地找到指定的目录，却发现文件夹空空如也！微信团队似乎很谨慎，在上传小程序源码后删除了构建产出的文件。这难不倒我们的程序员朋友们。因为任何行为都是程序执行的，我们可以通过修改相关程序代码来解决问题。

接下来，我们深入打包后的代码。在Content/Resources/app.nw/dist/weapp/mit目录下，我们发现了一个名为upload.js的文件。在这段代码中，我们看到了两个关键的文件删除操作：使用rmdir删除构建完成的代码目录和使用fs.unlink删除打包完成的文件。这两个操作负责清理构建的残留文件。如果我们注释掉这两段删除代码，再次通过小程序开发者工具进行预览上传操作，就会在指定的目录中留下构建和打包后的文件。

这些文件中，以.wx为后缀的文件是打包后的文件，也就是我们上传到微信服务器的文件。与其同名的目录文件夹则是构建完成但尚未打包的源文件。以config.js为例，构建后的代码将ES6的语法转译成了ES5的语法。其余的wxml、wxss以及js文件也基本处于这种状态。这让我们可以推断，源码在上传至微信服务器后会执行真正的构建动作，而开发工具只执行了一些简单的构建行为。

虽然我们没有从这份代码中了解到全部真相，但我们希望通过这篇文章为后来的者提供一些启示和帮助。感谢大家的阅读和支持，希望这篇文章能对大家有所帮助。

现在让我们继续深入小程序的世界吧！让我们一起揭开更多关于小程序构建的神秘面纱，解锁更多有趣而实用的知识。如果你对我们的分享感兴趣，请持续关注我们的更新，我们会继续为大家带来更多有价值的内容。让我们一起成长、一起进步！记住，无论遇到什么困难，只要我们敢于、坚持不懈，就一定能找到答案。小程序的世界等待着我们去和挑战！让我们一起加油吧！让我们一起创造出更多有趣的小程序！感谢大家的关注和支持！我们将不断努力为大家带来更好的分享！让我们携手共进，共同迈向更美好的未来！记住我们的使命：为开发者提供最好的服务和支持！让我们共同努力创造无限可能！至此我们暂且告别，期待下次分享！让我们一起加油！再见了各位朋友们！愿我们的分享永远照亮你们的前行之路！再见了！再见了！再见了！再见了！再见了朋友们！！！最后提醒一句：请继续关注我们的更新哦！我们一直在努力为大家带来更好的内容和服务！让我们一起努力创造更美好的未来吧！再见了朋友们！让我们继续小程序的世界吧！愿我们的分享永远伴随着你们的前行之路！再见了朋友们！再见再见再见再见再见再见再见再见再见再见再见再见再见再见再见再见！！！再见朋友们！！！拜拜拜拜拜拜拜拜拜拜拜拜拜拜拜拜！！！