小程式開發架構WePY和mpvue使用感受

今天想和小夥伴聊聊小程式開發架構的問題。

種種原因，去年年末接觸到了小程式，使用mpvue做了兩個項目，也使用WePY做了一個項目，關于這兩個架構的恩恩怨怨，我覺得我有資格說兩句。

首先來看看這兩個架構分别是什麼來頭：

WePY是騰訊官方搞的小程式架構，如果僅從GitHub上star數來看的話，目前在小程式開發架構中排第一，不過和mpvue的star數已經從之前的1k縮小到現在的500了，WePY主要有如下一些特點：

類Vue開發風格

支援元件化開發

支援使用第三方NPM資源，可以自動處理資源之間的依賴關系

支援Promise，開發者可以自由決定是否使用Promise

支援ES2015文法

對小程式本身的優化

在編譯器方面，支援Less/Sass/Styus/Babel/Typescript等

架構最小隻有24.3KB

對于熟練使用Vue.js的開發者而言，在第一次使用WePY時，往往會被它的類Vue開發風格所迷惑，這種開發風格和Vue.js很像，但是你要是按照Vue.js的經驗來開發，往往就掉坑裡了。

mpvue，mp是指mini program，就是小程式。mpvue雖然不像WePY那麼根正苗紅，但也是大廠出身，由美團提供，去年和WePY在GitHub上的star數一直保持在1k左右的差距，最近縮小到500左右了，mpvue主要有如下一些特點：

徹底的元件化開發能力：提高代碼複用性

完整的 Vue.js 開發體驗

友善的 Vuex 資料管理方案：友善建構複雜應用

快捷的 webpack 建構機制：自定義建構政策、開發階段 hotReload

支援使用 npm 外部依賴

使用 Vue.js 指令行工具 vue-cli 快速初始化項目

H5 代碼轉換編譯成小程式目标代碼的能力

除了這些特性之外，mpvue還提供了相關的配套設施：

mpvue-loader 提供 webpack 版本的加載器

mpvue-webpack-target webpack 建構目标

postcss-mpvue-wxss 樣式代碼轉換預處理工具

px2rpx-loader 樣式轉化插件

mpvue-lint 開發輔助插件，包括文法檢查，記憶體檢查等功能

由于我在接觸小程式之前，Vue.js已經用的相對來說比較熟練了，是以做小程式時也糾結了好久，網上的對比文章雖然寫的很清楚，但是自己沒用過總是不知道哪個更好用，後來還是決定先用mpvue試水，使用mpvue，也是因為當時手頭上有一點mpvue的資料，就想着用mpvue了。

有Vue.js基礎，使用mpvue上手就非常快了，甚至可以直接開寫了，這也是我後來總結mpvue最大的優勢，就是完全的Vue.js開發體驗。mpvue的一個宣傳點就是Web端和小程式一緻的開發體驗，實際并不見得，對于一些簡單的HTML标簽，例如 <code>div/li/p/ul/span</code>等，這些确實編譯器可以幫助開發者順利完成轉換，但是對于一些複雜的元件，例如 <code>picker/picker-view/swiper</code>等元件，完全沒辦法直接用相應的HTML标簽來實作，這些元件在具體使用過程中，還是需要參考小程式原生元件的用法，隻不過相關的變量動态指派以及事件綁定可以按照mpvue的方式來，從這個角度來看，網上一些被人追捧的一端多跑的架構實際上效果有限。

說到一端多跑，就想起我讀書那會，那會流行的一端多跑方案是PhoneGap，那個東西在iOS上跑還行，在低端Android機上卡的要死，實在沒法用，從那以後，對各種一套代碼n多平台的說辭實在難以恭維！

當我用mpvue寫完項目後，在網上浏覽小程式相關職位時，大部分都要求會WePY，mpvue在職場上貌似還沒能碾壓WePY，當時剛好又有一個新項目，于是撸起袖子決定用WePY搞一搞。

使用WePY開發，除了遵循WePY的文法外，仍然可以保留小程式原生的開發方式，我第一次使用WePY确實踩了不少坑，有的是真坑，有的是自己盲目樂觀導緻的坑，其中最大的問題就是被類Vue開發風格所迷惑，這個代碼看着像Vue.js，就想按照Vue.js的套路來，結果寫出來卻不能運作，實在頭大，後來用久了慢慢就熟悉裡邊的條條框框了，其實如果你不懂Vue.js的話，首次使用WePY可能會反而順利些。

如果你像我，做後端，但是Vue.js也搞，那麼使用mpvue可能會更順手一些，如果你已經懂小程式原生開發了，對Vue.js了解一般的話，那麼WePY可能上手快。如果你壓根還沒搞過小程式，那麼我給的建議是 <code>原生-&gt;WePY-&gt;mpvue</code>這樣一個學習順序，原因如下：

無論用什麼架構，小程式本身的一些原生控件、API以及架構都無法繞過，從原生開發方式開始學習，有助于你更好的了解WePY和mpvue的工作方式。

就像Java中的SpringBoot，用了Spring Boot，你依然不可避免的要用到HttpServletRequest，HttpServlet、Filter等這些基礎元件，小程式中也是一樣，用了WePY或者mpvue架構之後，一些原生的API，控件等，依然需要會用。

有了小程式原生開發的基礎後，再來使用WePY，上手是比較快的，因為使用WePY時，除了遵循WePY文法外，原生的文法規則也是支援的。

前面兩個都搞通了，再來搞mpvue，就會容易很多了。其實隻要前兩個搞通了，Vue.js基本文法掌握後，mpvue是很簡單的。