微信小程序中devtool隱藏的秘密是什么

這篇文章主要為大家展示了“微信小程序中devtool隱藏的秘密是什么”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序中devtool隱藏的秘密是什么”這篇文章吧。

微信小程序 devtool

筆者參與的小程序項(xiàng)目開(kāi)發(fā)也進(jìn)入尾聲了，坑也踩得七七八八，對(duì)于哪些沒(méi)有涵蓋和深入使用的功能筆者就不班門弄斧了。

前幾篇文章講了那么多細(xì)節(jié)也好，策略也好，都是應(yīng)用層面的東西。自微信小程序公布以來(lái)就有先行者不斷的探索小程序背后的運(yùn)行機(jī)制。小程序的開(kāi)發(fā)語(yǔ)法和API與前端工程師熟悉的html/js/css非常相似，所以會(huì)令很多人疑惑小程序與普通的HTML5應(yīng)用到底有什么區(qū)別。這篇文章其實(shí)將小程序的基本運(yùn)行機(jī)制剖析的差不多了，簡(jiǎn)單概括就是：

• 大部分內(nèi)容會(huì)轉(zhuǎn)化為常規(guī)的html/css/js，并使用webview渲染；

• 部分組件調(diào)用native實(shí)現(xiàn)功能。

既然已經(jīng)有先行者得出了結(jié)論，為啥還要寫這篇文章呢？當(dāng)然是為了湊齊七篇啦，哈哈哈...

開(kāi)玩笑！這篇文章的目的不是重復(fù)別人的結(jié)論，而是將筆者研究小程序開(kāi)發(fā)工具源碼的一些心得和結(jié)論記錄下來(lái)，以方便大家后續(xù)更深入的探索。

看看devtool的源碼有什么

第一步是找到小程序devtool的源碼，以mac系統(tǒng)為例，源碼的打開(kāi)方式如下圖：

其他的文件不用理會(huì)，我們要研究的主要代碼在Content/Resources/app.nw/dist目錄下，這個(gè)目錄包括devtool的功能代碼以及對(duì)小程序進(jìn)行執(zhí)行、編譯、打包、上傳等功能的代碼。當(dāng)然，這些代碼都是經(jīng)過(guò)混淆的，讀起來(lái)還挺費(fèi)勁（攤手~

需要著重注意的是Content/Resources/app.nw/dist/weapp目錄，以及commit和trans兩個(gè)子目錄：

從文件的命名上大致可以猜到每個(gè)文件對(duì)應(yīng)的功能：

• trans目錄下的文件負(fù)責(zé)將小程序源碼進(jìn)行一系列的轉(zhuǎn)換，最終被轉(zhuǎn)換為瀏覽器可識(shí)別的html、css以及js；

• commit目錄下的文件負(fù)責(zé)執(zhí)行小程序的構(gòu)建、打包、上傳等功能。

既然我們知道小程序會(huì)進(jìn)行構(gòu)建打包流程，想得知小程序運(yùn)行機(jī)制最好的辦法就是研究構(gòu)建完畢之后的代碼。有了這個(gè)目標(biāo)之后，下一步就是查看devtool的日志獲取小程序構(gòu)建之后的代碼存放位置。

找到日志文件

Content/Resources/app.nw/dist/common/log/log.js是負(fù)責(zé)管理devtool日志功能的文件，其中有這樣一段代碼：

const a = require('fs'),
  b = require('log'),
  c = require('path'),
  d = require('../../config/dirConfig.js'),
  e = d.WeappLog;

其中e便是日志文件的存放目錄，然后我們追溯到config/dirConfig.js中發(fā)現(xiàn)目錄路徑是由nw.App.getDataPath()生成的，這個(gè)函數(shù)是node-webkit提供的API，生成結(jié)果的規(guī)則在不同的操作系統(tǒng)下有差異，可惜筆者并沒(méi)有找到相關(guān)的說(shuō)明（沮喪）。

但是此次代碼的探索并非沒(méi)有收獲，起碼我們知道了日志文件存放的目錄名為“WeappLog”，我們可以使用強(qiáng)大的命令行從硬盤中搜索此目錄：

mdfind WeappLog

大家可以參考這篇文章了解mdfind命令的用法

從輸出結(jié)果可以得知日志文件在Mac系統(tǒng)的存放目錄為/Users/<用戶名>/Library/Application Support/微信web開(kāi)發(fā)者工具/WeappLog。進(jìn)入目錄后就會(huì)發(fā)現(xiàn)很多以.log為后綴的日志文件：

上傳小程序的流程打包后的小程序在哪里

找到日志文件后便可以從devtool的執(zhí)行日志中獲取小程序被構(gòu)建后的代碼存放位置。當(dāng)然，第一步是要講小程序進(jìn)行構(gòu)建，操作方法是在小程序開(kāi)發(fā)工具的“項(xiàng)目”菜單”中點(diǎn)擊”預(yù)覽“：

成功后再日志文件中會(huì)出現(xiàn)這么一行記錄：

[Wed Jan 18 2017 15:20:24 GMT+0800 (CST)] INFO pack.js create /Users/
<用戶名>/Library/Application Support/微信web開(kāi)發(fā)者工具/Weappdest/1484724024071.wx success!

/Users/<用戶名>/Library/Application Support/微信web開(kāi)發(fā)者工具/Weappdest/1484724024071.wx就是構(gòu)建完成的小程序代碼！趕緊去看看！

興致勃勃的找到/Users/<用戶名>/Library/Application Support/微信web開(kāi)發(fā)者工具/Weappdest/目錄，然后發(fā)現(xiàn)：空空如也！

看來(lái)微信團(tuán)隊(duì)還是很謹(jǐn)慎的，在將小程序源碼上傳之后便會(huì)刪除構(gòu)建產(chǎn)出的文件。但是這點(diǎn)小伎倆難不倒程序員！任何行為都是程序執(zhí)行的，我們直接修改相關(guān)的程序代碼就可以了嘛！

做點(diǎn)小手腳，看看打包后的代碼

在Content/Resources/app.nw/dist/weapp/commit/upload.js中有一段這樣的代碼：

const a = require('fs'),
  j = require('rmdir');
  //省略無(wú)關(guān)代碼
 _exports.uploadForTest = (l, m, n) => {
  //省略無(wú)關(guān)代碼
  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) => {});
    //省略無(wú)關(guān)代碼
    if (y > q) return a.unlink(u, () => {}), void n(`代碼包大小為 ${y} kb，超出限制 ${y-q} kb，請(qǐng)刪除文件后重試`);
    //省略無(wú)關(guān)代碼
})

上述代碼省略了一些與我們當(dāng)前討論內(nèi)容無(wú)關(guān)的代碼，感興趣的讀者可以自行研究。

上述代碼有兩個(gè)刪除文件的行為：

rmdir：刪除構(gòu)建完成但是并未打包的代碼目錄；

fs.unlink：刪除打包完成的文件。

將執(zhí)行刪除的代碼注釋以后，再通過(guò)小程序開(kāi)發(fā)者工具進(jìn)行預(yù)覽上傳操作后，在上文中我們得到的目錄中便會(huì)留下構(gòu)建以及打包后的文件了。如下：

其中以.wx為后綴的文件是經(jīng)過(guò)打包后的文件，也就是上傳到微信服務(wù)器的文件。其同名的目錄文件夾是構(gòu)建完成且打包之前的源文件。

以config.js為例，構(gòu)建后的代碼如下：

'use strict';
Object.defineProperty(exports, '__esModule', {
 value: true
});
exports.default = {
 basePath: 'https://djtest.cn',
 fileBasePath: 'https://djtest.cn'
};

其實(shí)僅僅將ES6的語(yǔ)法轉(zhuǎn)譯成了ES5語(yǔ)法。其余的wxml、wxss以及js文件基本也是這樣的狀態(tài)，所以可以推斷源碼上傳至微信服務(wù)器后會(huì)執(zhí)行真正的構(gòu)建動(dòng)作，開(kāi)發(fā)工具只執(zhí)行了一些簡(jiǎn)單地構(gòu)建行為。

以上是“微信小程序中devtool隱藏的秘密是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！