小程序開(kāi)發(fā)框架WePY和mpvue使用感受
2021-08-06 11:46:20

今天想和小伙伴聊聊小程序開(kāi)發(fā)框架的問(wèn)題。
種種原因，去年年末接觸到了小程序，使用mpvue做了兩個(gè)項(xiàng)目，也使用WePY做了一個(gè)項(xiàng)目，關(guān)于這兩個(gè)框架的恩恩怨怨，我覺(jué)得我有資格說(shuō)兩句。

1.主人公介紹

首先來(lái)看看這兩個(gè)框架分別是什么來(lái)頭：

1.1 WePY

WePY是騰訊官方搞的小程序框架，如果僅從GitHub上star數(shù)來(lái)看的話，目前在小程序開(kāi)發(fā)框架中排第一，不過(guò)和mpvue的star數(shù)已經(jīng)從之前的1k縮小到現(xiàn)在的500了，WePY主要有如下一些特點(diǎn)：

• 類Vue開(kāi)發(fā)風(fēng)格

• 支持組件化開(kāi)發(fā)

• 支持使用第三方NPM資源，可以自動(dòng)處理資源之間的依賴關(guān)系

• 支持Promise，開(kāi)發(fā)者可以自由決定是否使用Promise

• 支持ES2015語(yǔ)法

• 對(duì)小程序本身的優(yōu)化

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

• 框架最小只有24.3KB

對(duì)于熟練使用Vue.js的開(kāi)發(fā)者而言，在第一次使用WePY時(shí)，往往會(huì)被它的類Vue開(kāi)發(fā)風(fēng)格所迷惑，這種開(kāi)發(fā)風(fēng)格和Vue.js很像，但是你要是按照Vue.js的經(jīng)驗(yàn)來(lái)開(kāi)發(fā)，往往就掉坑里了。

1.2 mpvue

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

• 徹底的組件化開(kāi)發(fā)能力：提高代碼復(fù)用性

• 完整的 Vue.js 開(kāi)發(fā)體驗(yàn)

• 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用

• 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開(kāi)發(fā)階段 hotReload

• 支持使用 npm 外部依賴

• 使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目

• H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

除了這些特性之外，mpvue還提供了相關(guān)的配套設(shè)施：

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

• mpvue-webpack-target webpack 構(gòu)建目標(biāo)

• postcss-mpvue-wxss 樣式代碼轉(zhuǎn)換預(yù)處理工具

• px2rpx-loader 樣式轉(zhuǎn)化插件

• mpvue-lint 開(kāi)發(fā)輔助插件，包括語(yǔ)法檢查，內(nèi)存檢查等功能

2.使用體驗(yàn)

由于我在接觸小程序之前，Vue.js已經(jīng)用的相對(duì)來(lái)說(shuō)比較熟練了，因此做小程序時(shí)也糾結(jié)了好久，網(wǎng)上的對(duì)比文章雖然寫的很清楚，但是自己沒(méi)用過(guò)總是不知道哪個(gè)更好用，后來(lái)還是決定先用mpvue試水，使用mpvue，也是因?yàn)楫?dāng)時(shí)手頭上有一點(diǎn)mpvue的資料，就想著用mpvue了。

有Vue.js基礎(chǔ)，使用mpvue上手就非?？炝?，甚至可以直接開(kāi)寫了，這也是我后來(lái)總結(jié)mpvue最大的優(yōu)勢(shì)，就是完全的Vue.js開(kāi)發(fā)體驗(yàn)。mpvue的一個(gè)宣傳點(diǎn)就是Web端和小程序一致的開(kāi)發(fā)體驗(yàn)，實(shí)際并不見(jiàn)得，對(duì)于一些簡(jiǎn)單的HTML標(biāo)簽，例如 div/li/p/ul/span等，這些確實(shí)編譯器可以幫助開(kāi)發(fā)者順利完成轉(zhuǎn)換，但是對(duì)于一些復(fù)雜的組件，例如 picker/picker-view/swiper等組件，完全沒(méi)辦法直接用相應(yīng)的HTML標(biāo)簽來(lái)實(shí)現(xiàn)，這些組件在具體使用過(guò)程中，還是需要參考小程序原生組件的用法，只不過(guò)相關(guān)的變量動(dòng)態(tài)賦值以及事件綁定可以按照mpvue的方式來(lái)，從這個(gè)角度來(lái)看，網(wǎng)上一些被人追捧的一端多跑的框架實(shí)際上效果有限。

說(shuō)到一端多跑，就想起我讀書那會(huì)，那會(huì)流行的一端多跑方案是PhoneGap，那個(gè)東西在iOS上跑還行，在低端Android機(jī)上卡的要死，實(shí)在沒(méi)法用，從那以后，對(duì)各種一套代碼n多平臺(tái)的說(shuō)辭實(shí)在難以恭維！

當(dāng)我用mpvue寫完項(xiàng)目后，在網(wǎng)上瀏覽小程序相關(guān)職位時(shí)，大部分都要求會(huì)WePY，mpvue在職場(chǎng)上貌似還沒(méi)能碾壓WePY，當(dāng)時(shí)剛好又有一個(gè)新項(xiàng)目，于是擼起袖子決定用WePY搞一搞。

使用WePY開(kāi)發(fā)，除了遵循WePY的語(yǔ)法外，仍然可以保留小程序原生的開(kāi)發(fā)方式，我第一次使用WePY確實(shí)踩了不少坑，有的是真坑，有的是自己盲目樂(lè)觀導(dǎo)致的坑，其中最大的問(wèn)題就是被類Vue開(kāi)發(fā)風(fēng)格所迷惑，這個(gè)代碼看著像Vue.js，就想按照Vue.js的套路來(lái)，結(jié)果寫出來(lái)卻不能運(yùn)行，實(shí)在頭大，后來(lái)用久了慢慢就熟悉里邊的條條框框了，其實(shí)如果你不懂Vue.js的話，首次使用WePY可能會(huì)反而順利些。

3.總結(jié)

如果你像我，做后端，但是Vue.js也搞，那么使用mpvue可能會(huì)更順手一些，如果你已經(jīng)懂小程序原生開(kāi)發(fā)了，對(duì)Vue.js了解一般般的話，那么WePY可能上手快。如果你壓根還沒(méi)搞過(guò)小程序，那么我給的建議是 原生->WePY->mpvue這樣一個(gè)學(xué)習(xí)順序，原因如下：

1. 無(wú)論用什么框架，小程序本身的一些原生控件、API以及框架都無(wú)法繞過(guò)，從原生開(kāi)發(fā)方式開(kāi)始學(xué)習(xí)，有助于你更好的理解WePY和mpvue的工作方式。

2. 就像Java中的SpringBoot，用了Spring Boot，你依然不可避免的要用到HttpServletRequest，HttpServlet、Filter等這些基礎(chǔ)組件，小程序中也是一樣，用了WePY或者mpvue框架之后，一些原生的API，控件等，依然需要會(huì)用。

3. 有了小程序原生開(kāi)發(fā)的基礎(chǔ)后，再來(lái)使用WePY，上手是比較快的，因?yàn)槭褂肳ePY時(shí)，除了遵循WePY語(yǔ)法外，原生的語(yǔ)法規(guī)則也是支持的。

4. 前面兩個(gè)都搞通了，再來(lái)搞mpvue，就會(huì)容易很多了。其實(shí)只要前兩個(gè)搞通了，Vue.js基本語(yǔ)法掌握后，mpvue是很簡(jiǎn)單的。

?