微信小程式開發會遇到哪些問題以及如何規避?
由於微信小程式的執行環境並不是一個標準的瀏覽器環境,而且微信的封裝工作並不完善,所以我們以往開發中的很多經驗並不適用。
這並非簡單的開發習慣不適應,更重要的是我們的開發流程、規範將不適用。
1.無法使用Babel轉碼
無法使用Babel轉碼的原因其實仍然歸結於無法載入NPM庫。但是後果將十分嚴重。因為你將不能再安全使用ES6/7特性,你將無法使用async/await函式,你將和無盡的callback做鬥爭,你該怎樣描述自己?回撥地獄中的苦逼程式設計師?
如果你看到這裡不明白Babel為何物,那麼祝賀你,因為不曾見過天堂就不知何為地獄,你無須為不支援ES6/7而煩惱。但一旦你的大腦支援了ES6/7,用過了Babel,你就回不去了,像我一樣,無Babel不編碼。
2.無法重用元件
其實微信小程式開發是並非完全不能重用元件,比如WXML語法中支援import和 include。但是那僅僅是檢視模板可重用,並非元件可重用,因為我們認為元件在應當包含檢視和邏輯。
WXML其實是基於可重用的元件,但是不允許我們自定義元件。如果你有React經驗,你就會明白我的意思。比如你的小程式是個電商APP,專案中有兩個頁面中同時包含了商品列表元件,比如某分類下商品列表和搜尋結果列表,我們知道這兩個列表其實僅僅是引數不同而已。但是在小程式開發中,你只能將列表的模板抽象出來,不能將邏輯抽象出來,所以你就需要在兩個頁面上都實現一遍列表元件的控制邏輯。
3.無法呼叫NPM包
雖然微信小程式開發工具打包時實現了require函式載入依賴,但並不是完整的CommonJS依賴管理。因為require函式僅僅能夠載入專案中的JS檔案,而且必須嚴格定義JS檔案路徑,路徑不支援CommonJS的路徑風格。例如如下載入方式都將出錯:
在除錯工具的Network選項卡中,我們看到執行時載入了1000多個檔案,總資料量1.8MB,而我們僅僅是在程式碼中載入了一個lodash庫而已!這是因為微信小程式開發工具會將所有專案下的js檔案視為專案檔案,並進行打包。而實際開發中,我們需要安裝很多的NPM擴充套件庫,而這些擴充套件庫中有大量的不需要打包的檔案,例如lodash中有上千檔案,而我們只需要用到其中的非常少的一部分。
另外,在開發中,我們往往需要安裝babal、eslient、webpack、grunt等待開發工具,微信小程式開發工具會一視同仁將這些工具的原始碼也進行打包......在除錯工具的Network選項卡中,我們看到執行時載入了1000多個檔案,總資料量1.8MB,而我們僅僅是在程式碼中載入了一個lodash庫而已!這是因為微信小程式開發工具會將所有專案下的js檔案視為專案檔案,並進行打包。而實際開發中,我們需要安裝很多的NPM擴充套件庫,而這些擴充套件庫中有大量的不需要打包的檔案,例如lodash中有上千檔案,而我們只需要用到其中的非常少的一部分。
所以不支援NPM包的原因,是微信開發者工具不支援CommonJS標準,不支援CommonJS標準的原因,是微信開發者工具想當然地認為專案目錄下的js檔案一定是專案檔案,所以只實現了簡單的require函式。轉載於www.linksky-tech.com