微信小程序 WePY 2 框架入門教程

WePY 2 的設計思想

1. 非侵入式設計 WePY 2 運行於小程序之上，是對小程序原有能力的封裝和優化，並不會對原有小程序框架有任何改動或者影響。

2. 兼容原生代碼 能夠兼容原生代碼，即部分頁面為原生，部分頁面為 WePY。同時做到無需任何改動即可引用現有原生開發的小程序組件。

3. 基於小程序原生組件實現組件化開發 小程序原生組件在性能上相較之前有了很大的提升。因此 WePY 2 完全基於小程序原生組件實現，不支持小程序基礎庫 < 1.6.3 的版本。

4. 基於 Vue Observer 實現數據綁定 數據綁定基於 Vue Observer 實現，同時為其定制小程序特有的優化。

5. 更優的可擴展性 對於 core 庫提供 mixin、hooks、use 等方式進行開發擴展，對於 cli 編譯工具提供更強大的插件機制方便開發者可以侵入到編譯的任何一個階段進行個性化定制的編譯。

WePY 2 VS WePY 1

WePY 2 並不是基於 WePY 1 的升級版，而是完全重新開發的全新版本，因此實現原理完全不一樣，比較難實現完全的向下兼容。主要體現在以下幾點差異上：

1. 入口申請調整，WePY 1 使用類的繼承方式 export default class MyPage extends wepy.page {} 在 WePY 2 中調整為 wepy.page({})。將實例化的過程放在生命周期事件中。

2. 數據綁定機制調整，WePY 1 使用臟檢查進行數據綁定，卻讓開發者不知道使用時候去調用 $apply() 方法。在 WePY 2 中使用了 Vue Observer 實現數據綁定，告別 $apply()。

3. 基於原生組件，WePY 1 是通過文件編譯創建的靜態組件在動態循環遍歷時會出現一些問題，WePY 2 直接基於的小程序原生的組件去實現，避免了這一類問題。

4. Vue 模板語法，WePY 2 中推薦使用 html 代替 wxml 來寫 template，支持除 filter 之外的所有 Vue 模板語法。

5. 編譯方式改變，WePY 2 從基於文件編譯調整為基於入口編譯，因此對於圖片等靜態資源需要指定 static 選項 。

WePY 2 項目的創建與使用

$ npm install @wepy/cli -g # 全局安裝 WePY CLI 工具

全局安裝 CLI 會覆蓋老版本的 CLI 工具，新版本的 CLI 無法編譯老版本的代碼。因此，如果需要同時維護 WePY 1.7.x 和 WePY 2.0.x 的開發者，應當考慮在當前項目安裝 CLI，而非全局安裝。可以直接使用 1.7.x 的 CLI 去初始化 2.0.x 的項目，如下：

$ wepy init standard#2.0.x myproj

在開發目錄中生成Demo開發項目：

$ wepy init standard myproj # 使用 standard 模板初始化項目

過程中暫時可以一路回車，后續如果遇到要做具體的項目的時候，可以根據項目需要填寫。

切換至項目目錄：

$ cd myproject # 進入到項目目錄

安裝依賴：

$ npm install # 安裝項目依賴包

安裝完成之后可以看見，文件里面多出了依賴文件夾。

打包編譯：

$ wepy build

把wepy開發的代碼wpy文件編譯成小程序認識的文件，如下圖：

開啟實時編譯：

$ npm run dev # 監聽並且編譯項目
# 或者 
$ wepy build --watch

可以看到項目中多了一個 weapp目錄，然后 在小程序開發工具中打開 weapp 目錄，就可以看到，剛才創建的項目。

WePY 2 項目的目錄結構

 

更多功能及特性，請參考官方文檔：https://wepyjs.github.io/wepy-docs/2.x/#/

微信小程序WePY框架開發資源匯總：awesome-wepy