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

一．WePY 是什么,？

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

二．WePY 的功能與特點(diǎn)

首先我們先說(shuō)說(shuō)原生小程序開(kāi)發(fā)中的痛點(diǎn)

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

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

3） 不能使用 less、jade 等

4） 無(wú)法使用 NPM 包及 ES 高級(jí)語(yǔ)法

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

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

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

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

      官方DEMO代碼：

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

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

      wepy組件示例

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

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

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

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

三．WePY 開(kāi)發(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)簽嵌套兩級(jí)以及以上組件傳值給自組件傳值問(wèn)題

這個(gè)問(wèn)題其實(shí)是wepy的一個(gè)bug,，在github上已經(jīng)有好多人提過(guò)Issues，官方并沒(méi)有給出解釋?zhuān)?jīng)過(guò)自己的摸索,，有兩種解決方式：

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

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

在主頁(yè)面中引入此模板

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

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

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

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

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

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

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

6. 個(gè)別手機(jī)樣式錯(cuò)亂

安裝 autoprefixer 即可

7. mixin

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

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

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

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