1.5 什么是WePY

本書的理念是快速開發，所以會使用一些框架。筆者推薦的框架正是WePY，它擁有眾多的開發特性和優化方案，本節就帶讀者認識它。

1.5.1 為什么選擇WePY

WePY嚴格來說其實是對于原生小程序的一種優化性的開發框架，WePY框架并不是開發必需的，但使用WePY框架可以極大提高開發的效率和組件化的應用。WePY擁有以下特點。

● 開發風格：接近Vue.js，支持組件Props傳值、自定義事件、組件分布式復用Mixin、計算屬性函數computed、模板內容分發slot等。

● 組件化：組件化開發，完美解決組件隔離、組件嵌套、組件通信等問題。

● npm：支持使用第三方npm資源，自動處理npm資源之間的依賴關系，完美兼容所有無平臺依賴的npm資源包。

● Promise：通過polyfill讓小程序完美支持Promise，解決回調煩惱。

● ES2015：可使用Generator Fu-nction、Class、Async Function等特性，大大提升開發效率。

● 對小程序進行優化：對小程序本身進行優化，如請求列對處理、優雅的事件處理、生命周期的補充、性能的優化等。

● 編譯器：支持樣式編譯器Less、Sass、Styus，模板編譯器wx-ml、Pug，代碼編譯器Babel、Typescript。

● 插件：支持多種插件處理，如文件壓縮、圖片壓縮、內容替換等，擴展簡單，使用方便。

● 框架大小：壓縮后有24.3KB空間即可擁有所有框架功能，額外增加8.9 KB空間后即可使用Promise和Async Function。

對于習慣傳統的Web開發和使用Vue.js開發的開發者而言，WePY提供了只需要簡單了解微信小程序的開發即可完成一個小程序的快速體驗。

1.5.2 WePY開發環境的安裝

相對簡單的微信開發者工具而言，WePY的安裝稍顯復雜。首先需要使用npm安裝，這也意味著需要安裝Node.js。

1．安裝Node.js

在Node官網下載Node.js的安裝包。如果遇到官網無法進入或者下載較慢的情況，可以在國內提供的鏡像中下載最新版本的Node.js。

Node.js官網為https://nodejs.org/，打開后如圖1-22所示。

圖1-22 Node.js官網

Node.js提供了兩個版本，LTS版本是穩定的長期支持版本，Current版本則是最新的Node.js版本。對于WePY而言，兩者之間并沒有特別大的區別。下載安裝包后，需要根據系統的不同進行安裝。雙擊打開后稍作等待，進入Node.js的安裝過程，如圖1-23所示。

圖1-23 安裝Node.js

在同意協議之后單擊Next按鈕，直到安裝成功，單擊Finish按鈕。如何驗證安裝是否成功呢？在Windows系統中打開CMD（按Win+R快捷鍵，輸入“cmd”），在Mac中使用終端。

注意：如果使用CMD輸入“node”后顯示“不是內部或外部命令，也不是可運行的程序或批處理文件”信息，則需要手動添加Node.js的安裝地址到全局變量中。讀者可以查閱相關的資料進行配置。

輸入命令“node -v”，其效果如圖1-24所示，會打印當前的Node版本。

圖1-24 Node版本

WePY安裝需要用到npm，它在安裝Node.js后已經自動安裝。在終端中使用“NPM -v”命令，查看是否成功安裝了npm，如圖1-25所示。

圖1-25 npm版本

2．安裝WePY

WePY的安裝或更新都通過npm進行。全局安裝或更新WePY命令行工具，使用以下命令：

npm install wepy-cli -g

稍等片刻，成功安裝后即可創建WePY項目。

注意：如果npm安裝時間過長或者連接超時而導致失敗，則可以使用國內的鏡像源。這里推薦一個穩定的源，來自淘寶，網站地址為http://npm.taobao.org/，可以使用淘寶定制的cnpm（gzip壓縮支持）命令行工具代替默認的npm：

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝好環境后，再找一個良好的編寫代碼的IDE環境。這里強烈推薦JetBrains系列的WebStorm的最新版本，它完美支持了Vue.js的開發及ESLint的語法形式，所以編寫代碼非常順暢和方便，其編輯器界面如圖1-26所示。

圖1-26 編輯器界面

同樣，在WebStorm中使用Alt+F12鍵可以喚起內置的命令行。對于需要編譯的WePY而言，無須每次使用cd命令進入項目文件，方便了很多。