一．WePY 是什么？

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

二．WePY 的功能與特點

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

1） 頻繁調用 setData及 setData過程中頁面跳閃

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

3） 不能使用 less、jade 等

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

5） request 并發次數限制

6） 一個頁面對應4個文件，看的眼花繚亂

WePY相比于小程序，主要優點如下：

1、開發模式容易轉換 wepy在原有的小程序的開發模式下進行再次封裝，更貼近于現有MVVM框架開發模式。框架在開發過程中參考了 一些現在框架的一些特性，并且融入其中，以下是使用wepy前后的代碼對比圖。

官方DEMO代碼：

基于wepy的實現：

1. 真正的組件化開發小程序雖然有標簽可以實現組件復用，但僅限于模板片段層面的復用，業務代碼與交互事件 仍需在頁面處理。無法實現組件化的松耦合與復用的效果。

wepy組件示例

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

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

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

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

三．WePY 開發總結

1. 自定義 interceptor

創建 network 文件夾 新建 interceptor.js

新建 index.js

最后在 app.wpy中引入 req

2. request 加入失敗重試

創建 retry.js

修改 network 下index.js

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

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

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

子組件中第二層循環采用此寫法，直接使用template

在主頁面中引入此模板

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

1. 第一種方法可以解決這個問題，并且還節省了代碼量，但這屬于wepy和原生小程序混寫，后面又發現另一種解決辦法

對于第二層循環要傳的值，用repeat標簽包裹一層

4. 小程序開發工具變慢

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

5. 小程序在手機上預覽，出現卡頓現象

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

6. 個別手機樣式錯亂

安裝 autoprefixer 即可

7. mixin

wepy的mixin，與vue中的mixin執行順序相反

• wepy中，會先執行組件自身的，再執行mixin中的

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

以上是wepy的簡要介紹，有興趣的朋友可以閱讀源碼。 綜合來講，wepy的核心在于編譯環節，能夠將優雅簡潔的類似VUE風格的代碼，編譯成微信小程序所需要的繁雜代碼。