微信小程序開(kāi)發(fā)的三個(gè)問(wèn)題和解決方案是什么

微信小程序開(kāi)發(fā)的三個(gè)問(wèn)題和解決方案是什么，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

在微信公布小程序的文檔和開(kāi)發(fā)工具后，我們?cè)诘谝粫r(shí)間進(jìn)行了學(xué)習(xí)和體驗(yàn)，發(fā)現(xiàn)微信小程序的技術(shù)架構(gòu)和開(kāi)發(fā)體驗(yàn)讓我們有些失望。由于微信小程序的運(yùn)行環(huán)境并不是一個(gè)標(biāo)準(zhǔn)的瀏覽器環(huán)境，而且微信的封裝工作并不完善，所以我們以往開(kāi)發(fā)中的很多經(jīng)驗(yàn)并不適用。這并非簡(jiǎn)單的開(kāi)發(fā)習(xí)慣不適應(yīng)，更重要的是我們的開(kāi)發(fā)流程、規(guī)范將不適用。

微信小程序開(kāi)發(fā)第一宗罪: 無(wú)法調(diào)用NPM包

雖然微信小程序開(kāi)發(fā)工具打包時(shí)實(shí)現(xiàn)了require函數(shù)加載依賴，但并不是完整的CommonJS依賴管理。因?yàn)閞equire函數(shù)僅僅能夠加載項(xiàng)目中的JS文件，而且必須嚴(yán)格定義JS文件路徑，路徑不支持CommonJS的路徑風(fēng)格。例如如下加載方式都將出錯(cuò)：

require('lodash');require('lodash/map');require('./foo');

在微信小程序開(kāi)發(fā)工具中，我們必須對(duì)應(yīng)寫(xiě)為如下格式：

require('node_modules/lodash/lodash.js');require('node_modules/lodash/map.js');require('./foo.js');

雖然我們可以像上面代碼一樣加載node_modules目錄中的庫(kù)，但是實(shí)際運(yùn)行時(shí)卻發(fā)生了：

在調(diào)試工具的Network選項(xiàng)卡中，我們看到運(yùn)行時(shí)加載了1000多個(gè)文件，總數(shù)據(jù)量1.8MB，而我們僅僅是在代碼中加載了一個(gè)lodash庫(kù)而已！這是因?yàn)槲⑿判〕绦蜷_(kāi)發(fā)工具會(huì)將所有項(xiàng)目下的js文件視為項(xiàng)目文件，并進(jìn)行打包。而實(shí)際開(kāi)發(fā)中，我們需要安裝很多的NPM擴(kuò)展庫(kù)，而這些擴(kuò)展庫(kù)中有大量的不需要打包的文件，例如lodash中有上千文件，而我們只需要用到其中的非常少的一部分。

另外，在開(kāi)發(fā)中，我們往往需要安裝babal、eslient、webpack、grunt等待開(kāi)發(fā)工具，微信小程序開(kāi)發(fā)工具會(huì)一視同仁將這些工具的源碼也進(jìn)行打包......實(shí)測(cè)開(kāi)發(fā)者工具將崩潰！開(kāi)發(fā)者將崩潰！我崩潰！

所以不支持NPM包的原因，是微信開(kāi)發(fā)者工具不支持CommonJS標(biāo)準(zhǔn)，不支持CommonJS標(biāo)準(zhǔn)的原因，是微信開(kāi)發(fā)者工具想當(dāng)然地認(rèn)為項(xiàng)目目錄下的js文件一定是項(xiàng)目文件，所以只實(shí)現(xiàn)了簡(jiǎn)單的require函數(shù)，想當(dāng)然的原因是。。。

微信小程序開(kāi)發(fā)第二宗罪: 無(wú)法使用Babel轉(zhuǎn)碼

無(wú)法使用Babel轉(zhuǎn)碼的原因其實(shí)仍然歸結(jié)于無(wú)法加載NPM庫(kù)。但是后果將十分嚴(yán)重。因?yàn)槟銓⒉荒茉侔踩褂肊S6/7特性，你將無(wú)法使用async/await函數(shù)，你將和無(wú)盡的callback做斗爭(zhēng)，你該怎樣描述自己？回調(diào)地獄中的苦逼程序員？

如果你看到這里不明白Babel為何物，那么祝賀你，因?yàn)椴辉?jiàn)過(guò)天堂就不知何為地獄，你無(wú)須為不支持ES6/7而煩惱。但一旦你的大腦支持了ES6/7，用過(guò)了Babel，你就回不去了，像我一樣，無(wú)Babel不編碼。

微信小程序開(kāi)發(fā)第三宗罪: 無(wú)法重用組件

其實(shí)微信小程序開(kāi)發(fā)是并非完全不能重用組件，比如WXML語(yǔ)法中支持import和 include。但是那僅僅是視圖模板可重用，并非組件可重用，因?yàn)槲覀冋J(rèn)為組件在應(yīng)當(dāng)包含視圖和邏輯。

WXML其實(shí)是基于可重用的組件，但是不允許我們自定義組件。如果你有React經(jīng)驗(yàn)，你就會(huì)明白我的意思。

例如，你的小程序是個(gè)電商APP，項(xiàng)目中有兩個(gè)頁(yè)面中同時(shí)包含了商品列表組件，比如某分類下商品列表和搜索結(jié)果列表，我們知道這兩個(gè)列表其實(shí)僅僅是參數(shù)不同而已。但是在小程序開(kāi)發(fā)中，你只能將列表的模板抽象出來(lái)，不能將邏輯抽象出來(lái)，所以你就需要在兩個(gè)頁(yè)面上都實(shí)現(xiàn)一遍列表組件的控制邏輯，比如刷新、加載更多。。。

我們的實(shí)踐

只吐槽、管殺不管埋是不道德的，既然發(fā)現(xiàn)了微信小程序開(kāi)發(fā)中的各種弊端，我們?cè)陂_(kāi)發(fā)之中總結(jié)出了一套流程和工具，專為解決上述三個(gè)問(wèn)題，并免費(fèi)發(fā)布到了開(kāi)源社區(qū)，這就是Labrador。接下來(lái)我們一起來(lái)嘗試一下我們的開(kāi)發(fā)體驗(yàn)。

安裝Labrador

通過(guò)命令 npm install -g labrador-cli

全局安裝Labrador控制行工具。

初始化項(xiàng)目

通過(guò)如下命令新建一個(gè)Labrador項(xiàng)目：

mkdir democd demonpm initlabrador init

項(xiàng)目初始化完成后，該目錄是這個(gè)樣子的：

圖中的src是我們的源碼目錄，node_modules是NPM包目錄，dist是目標(biāo)輸出目錄。請(qǐng)?jiān)陂_(kāi)發(fā)者工具中新建一個(gè)項(xiàng)目，并設(shè)置路徑到dist目錄，請(qǐng)勿設(shè)置為demo目錄！使用WebStorm或Sublime打開(kāi)demo目錄，開(kāi)發(fā)過(guò)程中，我們使用WebStorm或Sublime修改src目錄下的源碼，請(qǐng)勿直接修改dist目錄中的文件，因?yàn)閐ist目錄是通過(guò)labrador命令生成的。

在demo目錄中運(yùn)行 labrador build

命令編譯項(xiàng)目，該命令會(huì)將src目錄下的文件一一處理并生成dist目錄下對(duì)應(yīng)的文件。我們也可以運(yùn)行 labrador watch 命令監(jiān)控src目錄下的文件變化，這樣就不用每次修改后手動(dòng)運(yùn)行編譯命令。

加載NPM包

我們以lodash包為例，在src/app.js中鍵入代碼 const _ = require('lodash');

編譯后，我們看到dist目錄下的文件是這樣的：[圖片上傳中。。。（3）]

我們看到dist目錄下有一個(gè)npm/lodash目錄，該目錄下只有一個(gè)lodash.js文件，那么在微信web開(kāi)發(fā)者工具中打包預(yù)覽，lodash的庫(kù)將只有這個(gè)文件被加載。

這一切是怎么發(fā)生的？

我們看一下dist/app.js的源碼，發(fā)現(xiàn)源碼中const _ = require('lodash');

被編譯為 var _ = require('./npm/lodash/lodash.js');

然后labrador命令將node_modules/lodash/lodash.js

文件復(fù)制到了 dist/npm/lodash/lodash.js

。這就是通過(guò)labrador可以調(diào)用NPM包的原理。

重要的是，只有真正用到的js文件才被labrador命令加入到項(xiàng)目目錄中。這樣一個(gè)小小的改進(jìn)象征著我們的小程序可以便捷調(diào)用NPM倉(cāng)庫(kù)中海量的擴(kuò)展庫(kù)！

Babel轉(zhuǎn)碼

在初始化的示例代碼src/app.js中的內(nèi)容是這樣的：

[圖片上傳中。。。（4）]

圖中timer和getUserInfo屬性都為async函數(shù)，函數(shù)體內(nèi)使用await調(diào)用異步操作。labrador 庫(kù)對(duì)微信API進(jìn)行了封裝，使用 const wx = require('labrador'); 覆蓋默認(rèn)的全局變量wx; 封裝后的wx對(duì)象提供的異步方法返回的都是Promise異步對(duì)象，結(jié)合async/await函數(shù)徹底終結(jié)callback，將異步代碼同步寫(xiě)，輕松逃離回調(diào)地獄！

但目前async/await函數(shù)是不被瀏覽器支持的，我們需要使用babel對(duì)其轉(zhuǎn)碼，labrador編譯命令已經(jīng)內(nèi)置了babel轉(zhuǎn)碼，轉(zhuǎn)碼后的代碼可以查看dist/app.js，內(nèi)容過(guò)長(zhǎng)，不再?gòu)堎N。

重用組件

重用組件最需要解決的問(wèn)題是組件的邏輯代碼怎樣重用。在實(shí)例代碼中有一個(gè)src/components目錄，用來(lái)存放項(xiàng)目?jī)?nèi)的可重用組件，其結(jié)構(gòu)是這樣的：[圖片上傳中。。。（5）]

子目錄src/components/list中存放著一個(gè)可重用的組件。list.js / list.less / list.xml 分別對(duì)應(yīng)微信小程序的 js / wxss / wxml 文件。JS為控件的邏輯層，其代碼如下：[圖片上傳中。。。（6）]

文件導(dǎo)出一個(gè)List類，這個(gè)組件類擁有像Page一樣的生命周期函數(shù)onLoad, onReady, onShow, onHide, onUnload 以及setData函數(shù)。LESS文件對(duì)應(yīng)微信的WXSS文件，因?yàn)槲⑿判〕绦驅(qū)崿F(xiàn)的限制，LESS中無(wú)法使用連級(jí)選擇語(yǔ)法，但是可以定義變量，方便開(kāi)發(fā)。XML文件對(duì)應(yīng)微信的WXML文件，是組件視圖描述文件，list.xml內(nèi)容為：[圖片上傳中。。。（7）] 文件中導(dǎo)出一個(gè)名為list的template。組件不但可以存放在src/components目錄內(nèi)，還可以單獨(dú)做成NPM包，這樣就可以輕松做到跨項(xiàng)目間的組件共享。

組件定義完成后，接下來(lái)是在頁(yè)面中調(diào)用，在 src/pages/index/index.js 中有如下代碼：[圖片上傳中。。。（8）] 代碼中首先引入了labrador庫(kù)替換全局的默認(rèn)wx對(duì)象，并使用labrador.createPage方法代替全局的Page函數(shù)聲明頁(yè)面。然后加載List組件類，在頁(yè)面聲明配置中，增加了components屬性，并將List組件類實(shí)例化傳入。labrador.createPage方法是對(duì)Page方法的一層封裝，目的是在頁(yè)面初始化時(shí)和組件對(duì)象進(jìn)行關(guān)聯(lián)。

在 src/pages/index/index.less 中加入代碼@import 'list' 即可調(diào)用list組件的樣式，如果在src/components/list中找不到list.less，那么編譯命令將在NPM包中尋找 node_modules/list/index.less 。

在 src/pages/index/index.xml 中加入代碼 <component key="list"/> 即可調(diào)用list組件的模板文件，component 是Labrador自定義的組件，編譯后對(duì)應(yīng)生成 import 和 template。如果在src/components/list中找不到list.xml，那么編譯命令將在NPM包中尋找 node_modules/list/index.xml。

關(guān)于微信小程序開(kāi)發(fā)的三個(gè)問(wèn)題和解決方案是什么問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。