作者：極鏈科技前端Team 凌福喆

一．WePY 是什么？

前端開發(fā)者肯定對Vue.js 和 Webpack 這兩個開源項目非常熟悉。Web App 或H5 開發(fā)過程中，我們常常將 Vue.js 用作核心庫，用Webpack 做模塊化打包，讓其能夠運(yùn)行于瀏覽器端。那么 WePY 是什么東西呢？我們可以把WePY 理解成 Web 端的 Vue.js 和Webpack 的結(jié)合體，它能夠通過編譯手段運(yùn)行在小程序端，并且可以使用 Vue.js 的一些語法和特性。

二．WePY 的功能與特點

首先我們先說說原生小程序開發(fā)中的痛點

1） 頻繁調(diào)用 setData及 setData過程中頁面跳閃

2） 組件化支持能力太弱(幾乎沒有)

3） 不能使用 less、jade 等

4） 無法使用 NPM 包及 ES 高級語法

5） request 并發(fā)次數(shù)限制

  6） 一個頁面對應(yīng)4個文件，看的眼花繚亂

WePY相比于小程序，主要優(yōu)點如下：

1、開發(fā)模式容易轉(zhuǎn)換 wepy在原有的小程序的開發(fā)模式下進(jìn)行再次封裝，更貼近于現(xiàn)有MVVM框架開發(fā)模式?？蚣茉陂_發(fā)過程中參考了 一些現(xiàn)在框架的一些特性，并且融入其中，以下是使用wepy前后的代碼對比圖。

      官方DEMO代碼：

      基于wepy的實現(xiàn)：

2. 真正的組件化開發(fā) 小程序雖然有標(biāo)簽可以實現(xiàn)組件復(fù)用，但僅限于模板片段層面的復(fù)用，業(yè)務(wù)代碼與交互事件 仍需在頁面處理。無法實現(xiàn)組件化的松耦合與復(fù)用的效果。

      wepy組件示例

3.支持加載外部NPM包 小程序較大的缺陷是不支持NPM包，導(dǎo)致無法直接使用大量優(yōu)秀的開源內(nèi)容，wepy在編譯過程當(dāng)中，會遞歸 遍歷代碼中的require然后將對應(yīng)依賴文件從node_modules當(dāng)中拷貝出來，并且修改require為相對路徑， 從而實現(xiàn)對外部NPM包的支持。

4.單文件模式，使得目錄結(jié)構(gòu)更加清晰 小程序官方目錄結(jié)構(gòu)要求app必須有三個文件app.json，app.js，app.wxss，頁面有4個文件 index.json，index.js，index.wxml，index.wxss。而且文 件必須同名。 所以使用wepy開發(fā)前后開發(fā)目錄對比如下：

5.默認(rèn)使用babel編譯，支持ES6/7的一些新特性。

6.wepy支持使用less默認(rèn)開啟使用了一些新的特性如promise，async/await等等

三．WePY 開發(fā)總結(jié)

1. 自定義 interceptor

      創(chuàng)建 network 文件夾 新建 interceptor.js

新建 index.js

最后在 app.wpy中引入req

2. request 加入失敗重試

創(chuàng)建 retry.js

修改 network 下index.js

3. repeat標(biāo)簽嵌套兩級以及以上組件傳值給自組件傳值問題

這個問題其實是wepy的一個bug，在github上已經(jīng)有好多人提過Issues，官方并沒有給出解釋，經(jīng)過自己的摸索，有兩種解決方式：

1.     對于純組件用小程序原生的模板template代替

       子組件中第二層循環(huán)采用此寫法，直接使用template

在主頁面中引入此模板

wepy最終會把所引用的組件代碼，都打包到一個主頁面中的,所以在主頁面引入模板即可

2.     第一種方法可以解決這個問題，并且還節(jié)省了代碼量，但這屬于wepy和原生小程序混寫，后面又發(fā)現(xiàn)另一種解決辦法

       對于第二層循環(huán)要傳的值，用repeat標(biāo)簽包裹一層

4. 小程序開發(fā)工具變慢

在開發(fā)過程城中，隨著項目文件的越來越大，會發(fā)現(xiàn)小程序的開發(fā)工具越來越慢，甚至一個跳轉(zhuǎn)都要等幾秒鐘才能跳轉(zhuǎn)過去，這個時候需要把小程序打包出來的文件dist文件夾刪掉，然后重新打包，會快很多，wepy也提供了命令，直接運(yùn)行 npm run clean 也能達(dá)到同樣的效果。

5. 小程序在手機(jī)上預(yù)覽，出現(xiàn)卡頓現(xiàn)象

出現(xiàn)這種情況有多方面的原因，如果你之前用過原生小程序開發(fā)過項目，那么直接點擊開發(fā)工具上的預(yù)覽按鈕，然后用手機(jī)掃碼預(yù)覽是一個常見的操作，但是在使用wepy過程中，你使用npm run dev命令后，是出于開發(fā)環(huán)境，dist文件夾中的代碼并沒有進(jìn)行壓縮，優(yōu)化，所以手機(jī)預(yù)覽的時候會顯得很慢，運(yùn)行 npm run build打成生產(chǎn)包預(yù)覽，可以解決。

6. 個別手機(jī)樣式錯亂

安裝 autoprefixer 即可

7. mixin

wepy的mixin，與vue中的mixin執(zhí)行順序相反

• wepy中，會先執(zhí)行組件自身的，再執(zhí)行mixin中的

• vue中對于鉤子函數(shù)，會先執(zhí)行mixin中的，再執(zhí)行組件自身的；vue中methods如果和mixin同名，那么只會執(zhí)行自身的方法

以上是wepy的簡要介紹，有興趣的朋友可以閱讀源碼。 綜合來講，wepy的核心在于編譯環(huán)節(jié)，能夠?qū)?yōu)雅簡潔的類似VUE風(fēng)格的代碼，編譯成微信小程序所需要的繁雜代碼。