mpvue項目轉(zhuǎn)成 uni-app 項目

1. 前言

mpvue 框架是一個很棒的小程序開發(fā)框架，由美團(tuán)技術(shù)團(tuán)隊打造，18年上線的。當(dāng)時一上線就獲得了小程序界的廣泛關(guān)注，因為 mpvue 無限接近 vue 開發(fā)，基本做到了從 Vue.js 到小程序的零成本切換。

如果之前掌握了 Vue.js 語法，用 mpvue 框架開發(fā)小程序幾乎不會增加新的學(xué)習(xí)成本，降低了開發(fā)小程序的門檻，所以受到很多開發(fā)者的歡迎。那我們?yōu)槭裁床焕^續(xù)使用 mpvue 框架，要將 mpvue 項目轉(zhuǎn)成 uni-app 項目呢？

這一小節(jié)主要講解為什么要將 mpvue 項目轉(zhuǎn)成 uni-app 項目以及如何將 mpvue 項目轉(zhuǎn)換成 uni-app 項目。

2. 為什么要將 mpvue 項目轉(zhuǎn)成 uni-app 項目

mpvue 框架和uni-app 框架都是使用 vue 語法來開發(fā)小程序，為什么我們會更加推薦用 uni-app 框架來開發(fā)項目呢？下面我們來具體看一下。

2.1 mpvue 框架維護(hù)更新慢

mpvue 框架作為一個開源項目，已經(jīng)幾年沒有代碼更新記錄了。不僅僅是維護(hù)更新慢的問題，也可以說 mpvue 框架已經(jīng)停止維護(hù)了。

雖然官方?jīng)]有發(fā)布停止維護(hù)的通知，但是一個幾年沒有維護(hù)的開源框架，基本上已經(jīng)說明開發(fā)團(tuán)隊后期不打算再繼續(xù)維護(hù)了。

2.2 mpvue 框架與 uni-app 框架性能對比

uni-app 框架的技術(shù)團(tuán)隊對比過 wepy/mpvue/taro/uni-app/原生小程序的性能，測試項目包括長列表加載、組件狀態(tài)更新這兩個比較容易出現(xiàn)性能問題的實例。

最終得出的結(jié)論是 uni-app 性能更優(yōu)，具體結(jié)果如下：
微信原生開發(fā)手工優(yōu)化,uni-app>微信原生開發(fā)未手工優(yōu)化,taro > wepy > mpvue

官網(wǎng)性能對比的文章：
小程序開發(fā)：用原生還是選框架（wepy/mpvue/taro/uni-app）
鏈接：https://ask.dcloud.net.cn/article/35947

我們可以看到 uni-app 不管從開發(fā)維護(hù)還是項目性能來講，都是更優(yōu)的。還有很多其他的優(yōu)點，比如：uni-app 項目支持在更多的平臺上面發(fā)布上線、生態(tài)更加完善等，這些都是我們更建議選擇 uni-app 框架的原因。

下面我們來看看如果將mpvue 項目轉(zhuǎn)換成 uni-app 項目吧。

3. 將 mpvue 項目轉(zhuǎn)換成 uni-app 項目

我們在不改變代碼，只修改項目配置的情況下，可以將 mpvue 開發(fā)的小程序直接轉(zhuǎn)變?yōu)?uni-app，為開發(fā)者進(jìn)行框架的切換提供了很大的便利。下面我們來看看具體步驟：

3.1 創(chuàng)建 uni-app 項目

直接在 HbuilderX 中創(chuàng)建項目，點擊菜單欄-文件-新建-項目，出現(xiàn)創(chuàng)建項目的界面，選擇 uni-app 項目，并選擇默認(rèn)模板。

當(dāng)然如果已經(jīng)安裝了 vue 運行環(huán)境，也可以使用 cli 方式創(chuàng)建項目，執(zhí)行 vue create -p dcloudio/uni-preset-vue uniappPro 即可創(chuàng)建。

3.2 轉(zhuǎn)移項目文件

我們準(zhǔn)備好現(xiàn)成的 mpvue 項目，現(xiàn)在將 mpvue 項目中的文件復(fù)制到剛剛創(chuàng)建好的 uni-app 項目中。

3.2.1 mpvue 項目中的 src/components 文件夾復(fù)制到 uni-app 項目根目錄下

復(fù)制完成后 uni-app 目錄效果如下：

3.2.2 mpvue 項目中的 src/pages文件夾替換掉到 uni-app 項目根目錄下面的pages文件夾，并刪除每個頁面目錄中的 main.js 和main.json 文件

后面main.json 文件中的配置都會轉(zhuǎn)移到 pages.json 文件中。

操作完成后 uni-app 目錄效果如下：

3.2.3 配置 pages.json 文件，根據(jù) mpvue 項目的 app.json 和 main.json 文件中的頁面配置信息來填寫

需要注意以下幾點：

• 將 pages 配置項中的項目路徑改成 .vue 頁面的路徑，比如將 "pages/index/main" 改成 "pages/index/index"。并將 main.json 文件中的配置寫到每個 page 中的 style 配置項中；
• 將 window 配置項改成 globalStyle 配置項。

實例：
mpvue 項目的app.json文件。

{
  "pages": [
    "pages/index/main",
    "pages/me/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#EA5149",
    "navigationBarTitleText": "慕課網(wǎng)",
    "navigationBarTextStyle": "black"
  }
}

轉(zhuǎn)換成 uni-app 項目的 pages.json文件。

{
	"pages": [
	  {
		"path": "pages/index/index",
		"style": {
// 原是 main.json 文件中的配置
			"enablePullDownRefresh":true
		}
	  },
	  {
		"path" : "pages/me/me",
		"style" : {}
	  }
	],
	"globalStyle": {
		"backgroundTextStyle": "light",
		"navigationBarBackgroundColor": "#EA5149",
		"navigationBarTitleText": "慕課網(wǎng)",
		"navigationBarTextStyle": "black"
	}
}

3.2.4 將其他文件也復(fù)制到 uni-app 項目中

主要有以下幾個文件：

• mpvue 項目中的 src/App.vue 文件替換掉 uni-app 項目根目錄下的 App.vue 文件；
• mpvue 項目中的 src/main.js 文件替換掉 uni-app 項目根目錄下的 main.js 文件，還有其他 src 文件夾下面的 .js 文件也一并復(fù)制過來；
• mpvue 項目中的 src/units 文件夾粘貼到 uni-app 項目根目錄下；
• mpvue 項目根目錄下的 static 文件夾替換掉 uni-app 項目根目錄下的 static 文件夾。

3.3 測試項目

點擊菜單欄-運行，將項目運行到內(nèi)置瀏覽器，看看控制臺有沒有報錯，根據(jù)報錯提示來修改其他的錯誤。
比較常見的錯誤有：

• 路徑錯誤：根據(jù)系統(tǒng)提示修改成正確路徑即可；
• mpvue自有 API 不兼容：比如 mpvue.request，需要改為 uni.request；
• 預(yù)編譯錯誤：一般是缺少了插件等原因，比如 mpvue 項目中使用了 scss 編譯，我們需要在 HBuilderX 中安裝這個插件，不然就會出現(xiàn)預(yù)編譯錯誤，點擊工具-插件安裝，根據(jù)系統(tǒng)提示就可以安裝插件。

4. 小結(jié)

本小節(jié)給大家演示了如何將 mpvue 項目轉(zhuǎn)成 uni-app 項目，可以發(fā)現(xiàn)基本只需要復(fù)制粘貼就可以了，不需要我們重新編寫代碼，非常的方便。還有其他項目的轉(zhuǎn)換，可以參考官網(wǎng)的示例：

vue h5項目轉(zhuǎn)換uni-app指南：https://ask.dcloud.net.cn/article/36174
微信小程序轉(zhuǎn)換uni-app指南及轉(zhuǎn)換器：https://ask.dcloud.net.cn/article/35786
wepy轉(zhuǎn)uni-app轉(zhuǎn)換器：https://github.com/zhangdaren/wepy-to-uniapp