從mpvue遷移到uni-app

從mpvue遷移到uni-app

以前公司一直在使用mpvue開發小程序，可是伴隨業務的愈來愈複雜以及長列表頁面的存在，逐漸發現mpvue存在太多性能問題，以及各類各樣詭異的數據問題。主要是由於這個小程序是去年初始化項目的，當時mpvue很火，因此直接就入坑了。 在遇到各類問題後，爲了作更少的變更，因而通過一番調研因而選擇了uni-app這個框架，都是使用vue的開發。

1.基本結構的區別

首先咱們對比一下mpvue和uni-app的目錄結構有那些區別
複製代碼

un-iapp

mpvue

能夠看的出來從項目結構上有很大的差別，首先不存在uni-app不存build和config目錄，全部build的操做所有在HbuilderX中完成，mpvue中的src目錄就是uni-app的根目錄

2.如何遷移

2.1 下載一個 HbuilderX，開箱即用。 2.2 啓動軟件新建一個uni-app項目，默認模版爲空便可，

2.3 將mpvue中項目中src目錄下的文件夾以及static拷貝到uni-app新建的工程下

2.4 調整相關的路徑 2.5 將init一個package.json 把必要的依賴安裝好，默認自帶vuex，如下是個人依賴包

2.6 配置頁面路由

在mpvue中一個頁面會存在一個js文件和一個json文件，uni-app則沒必要要。頁面配置詳情請參考官方文檔 uni-app配置項。 如下是個人頁面路由配置，可供參考。

{
	"pages": [{
		"path": "pages/tabs/tournament/index/tabs_tournament_index",
		"style": {
			"navigationBarTitleText": "賽事大廳",
			"enablePullDownRefresh": true
		}
	}, {
		"path": "pages/tabs/moment/moment",
		"style": {
			"navigationBarTitleText": "發現",
			"navigationBarTextStyle": "black",
			"backgroundColor": "#ffffff",
			"navigationBarBackgroundColor": "#ffffff"
		}
	}, {
		"path": "pages/tabs/message/index/index",
		"style": {
			"navigationBarTitleText": "個人消息"
		}
	}, {
		"path": "pages/tabs/welfare/index/index",
		"style": {
			"navigationBarTitleText": "福利"
		}
	}, {
		"path": "pages/tabs/mine/index/index",
		"style": {
			"navigationBarTitleText": "個人"
		}
	}],
	"subPackages": [{
		"root": "pages/package-moment-message",
		"pages": [{
				"path": "message/chat/index/index"
			},
			{
				"path": "message/chat/set/index",
				"style": {
					"navigationBarTitleText": "聊天設置"
				}
			},
			{
				"path": "message/chat/report/index",
				"style": {
					"navigationBarTitleText": "舉報"
				}
			},
			{
				"path": "message/follow/follow_msg",
				"style": {
					"navigationBarTitleText": "關注消息"
				}
			},
			{

				"path": "message/group/announcement/group_announcement",
				"style": {
					"navigationBarTitleText": ""
				}
			},
			{

				"path": "message/group/create/create_group",
				"style": {
					"navigationBarTitleText": ""
				}
			},
			{

				"path": "message/group/member/group_member",
				"style": {
					"navigationBarTitleText": ""
				}
			},
			{

				"path": "message/interaction/interaction_msg",
				"style": {
					"navigationBarTitleText": "互動消息"
				}
			},
			{

				"path": "message/search/index/search",
				"style": {
					"navigationBarTitleText": "搜索"
				}
			},
			{

				"path": "message/search/more/index",
				"style": {
					"navigationBarTitleText": "搜索"
				}
			},
			{

				"path": "message/search/recommend/index",
				"style": {
					"navigationBarTitleText": "搜索"
				}
			},
			{

				"path": "message/system/system_message",
				"style": {
					"navigationBarTitleText": "系統消息"
				}
			}
		]
	}, {
		"root": "pages/package-mine-welfare",
		"pages": [
			{
				"path": "mine/edit/edit",
				"style": {
					"navigationBarTitleText": "我的信息",
					"navigationBarTextStyle": "black",
					"backgroundColor": "#ffffff",
					"navigationBarBackgroundColor": "#ffffff"
				}
			},
			{
				"path": "mine/feedback/index",
				"style": {
					"navigationBarTitleText": "問題反饋"
				}
			},
			{
				"path": "mine/modify-phone/modify-phone",
				"style": {
					"navigationBarTitleText": "",
				  "navigationBarTextStyle": "black",
				  "backgroundColor": "#ffffff",
				  "navigationBarBackgroundColor": "#ffffff"
				}
			},
			{
				"path": "mine/relationship/index"
			},
			{
				"path": "mine/select-hobby/select-hobby",
				"style": {
					"navigationBarTitleText": "",
				  "navigationBarTextStyle": "black",
				  "backgroundColor": "#ffffff",
				  "navigationBarBackgroundColor": "#ffffff"
				}
			},
			{
				"path": "mine/task/coin-detail/index",
				"style": {
					"navigationBarTitleText": "頭號幣明細"
				}
			},
			{
				"path": "mine/task/index/index",
				"style": {
					"navigationBarTitleText": "個人任務"
				}
			},
			{
				"path": "mine/task/sign-in-rank/index",
				"style": {
					"navigationBarTitleText": "簽到排行榜"
				}
			},
			{
				"path": "mine/tournament/mine_tournament",
				"style": {
					"navigationBarTitleText": "個人賽事"
				}
			},
			{
				"path": "mine/user-page/index",
				"style": {
					"navigationBarTitleText": "我的主頁"
				}
			},
			{
				"path": "mine/wallet/cash/wallet_cash",
				"style": {
					"navigationBarTitleText": ""
				}
			},
			{
				"path": "mine/wallet/detail/wallet_detail",
				"style": {
					"navigationBarTitleText": "錢包明細"
				}
			},
			{
				"path": "mine/wallet/my_wallet/my_wallet",
				"style": {
					"navigationBarTitleText": "個人錢包"
				}
			},
			{
				"path": "mine/wallet/recharge/recharge",
				"style": {
					"navigationBarTitleText": "充值"
				}
			},
			{
				"path": "mine/wallet/rules/index",
				"style": {
					"navigationBarTitleText": "系統規則"
				}
			},
			{
				"path": "welfare/conversion/detail/index",
				"style": {
					"navigationBarTitleText": ""
				}
			},
			{
				"path": "welfare/conversion/index/index",
				"style": {
					"navigationBarTitleText": "免費專區"
				}
			},
			{
				"path": "welfare/daily-prize/detail/index",
				"style": {
					"navigationBarTitleText": ""
				}
			},
			{
				"path": "welfare/daily-prize/index/index",
				"style": {
					"navigationBarTitleText": "每日開獎"
				}
			},
			{
				"path": "mine/modify-value/modify-value",
				"style": {
					"navigationBarTitleText": "",
				  "navigationBarTextStyle": "black",
				  "backgroundColor": "#ffffff",
				  "navigationBarBackgroundColor": "#ffffff"
				}
			}
		]
	}, {
		"root": "pages/package-moment-message",
		"pages": [{
			"path": "moment/detail/moment_detail"
		}, {
			"path": "moment/publish/moment_publish"
		}, {
			"path": "moment/search/moment_search"
		}, {
			"path": "moment/second_detail/moment_second_detail"
		}, {
			"path": "moment/select_tag/moment_select_tag"
		}, {
			"path": "moment/tag_detail/tag_detail",
			"style": {
				"navigationStyle": "custom"
			}
		}, {
			"path": "moment/tag_list/tag_list"
		}]
	}, {
		"root": "pages/package-tournament-team",
		"pages": [{
			"path": "tournament/create/index/tournament_create_index"
		}, {
			"path": "tournament/create/format/tournament_create_format",
			"style": {
				"navigationBarTitleText": "比賽形式"
			}
		}, {
			"path": "tournament/create/more/tournament_create_more",
			"style": {
				"navigationBarTitleText": "更多設置"
			}
		}, {
			"path": "tournament/create/name/tournament_create_name",
			"style": {
				"navigationBarTitleText": "賽事名稱"
			}
		}, {
			"path": "tournament/create/prize/tournament_create_prize",
			"style": {
				"navigationBarTitleText": "獎勵設置"
			}
		}, {
			"path": "tournament/create/schedule/tournament_create_schedule"
		}, {
			"path": "tournament/detail/index/tournament_detail_index",
			"style": {
				"navigationStyle": "custom"
			}
		}, {
			"path": "tournament/battle/battle-room/battle_room_index",
			"style": {
				"navigationBarTitleText": "對戰房間",
				"enablePullDownRefresh": true
			}
		}, {
			"path": "tournament/battle/upload-battle-result/upload-battle-result",
			"style": {
				"navigationBarTitleText": "上傳結果"
			}
		}, {
			"path": "tournament/entry_list/tournament_entry_list",
			"style": {
				"navigationBarTitleText": "報名隊伍"
			}
		}, {
			"path": "tournament/prize/tournament_prize",
			"style": {
				"navigationBarTitleText": "賽事獎金"
			}
		}, {
			"path": "tournament/battle_map/tournament_battle_map",
			"style": {
				"navigationBarTitleText": "對戰圖"
			}
		}, {
			"path": "tournament/children/tournament_children",
			"style": {
				"navigationBarTitleText": "賽點信息"
			}
		}]
	}, {
		"root": "pages/package-tournament-team",
		"pages": [{
			"path": "team/announcement/index",
			"style": {
				"navigationBarTitleText": "戰隊公告"
			}
		}, {
			"path": "team/create/create",
			"style": {
				"navigationBarTextStyle": "black",
				"backgroundColor": "#ffffff",
				"navigationBarBackgroundColor": "#ffffff"
			}
		}, {
			"path": "team/detail/index/team_detail_index",
			"style": {
				"navigationStyle": "custom"
			}
		}, {
			"path": "team/index/activity-hall/index",
			"style": {
				"enablePullDownRefresh": false
			}
		}, {
			"path": "team/index/rank-list/index",
			"style": {
				"enablePullDownRefresh": false
			}
		}, {
			"path": "team/index/team-hall/index",
			 "style": {
				"enablePullDownRefresh": false,
				"navigationBarTitleText": "戰隊大廳"
			 }
		}, {
			"path": "team/index/team-hall-rank/index",
			"style": {
				"navigationBarTitleText": "戰隊粉絲榜"
			}
		}, {
			"path": "team/logs/index",
			"style": {
				"navigationBarTitleText": "戰隊日誌"
			}
		}, {
			"path": "team/member-management/index",
			"style": {
				"navigationBarTitleText": "成員管理"
			}
		}, {
			"path": "team/record/index",
			"style": {
				"navigationBarTitleText": "戰隊審批"
			}
		}, {
			"path": "team/search/index",
			"style": {
				"navigationBarTitleText": "戰隊"
			}
		}, {
			"path": "team/edit/edit",
			"style": {
				"navigationBarTitleText": "編輯戰隊"
			}
		}]
	}],
	"permission": {
		"scope.userLocation": {
			"desc": "你的位置信息將用於線下地址定位"
		}
	},
	"globalStyle": {
		"navigationBarBackgroundColor": "#fff",
		"backgroundTextStyle": "light",
		"navigationBarTitleText": "頭號電競",
		"navigationBarTextStyle": "black",
		"backgroundColor": "#f3f4f6"
	},
	"tabBar": {
		"color": "#A5A8B0",
		"selectedColor": "#B18642",
		"backgroundColor": "#fff",
		"borderStyle": "black",
		"list": [{
				"pagePath": "pages/tabs/tournament/index/tabs_tournament_index",
				"iconPath": "./static/images/tabs/tab-tournament.png",
				"selectedIconPath": "./static/images/tabs/tab-tournament-active.png",
				"text": "賽事"
			}, {
				"pagePath": "pages/tabs/moment/moment",
				"iconPath": "./static/images/tabs/tab-moment.png",
				"selectedIconPath": "./static/images/tabs/tab-moment-active.png",
				"text": "發現"
			},
			{
				"pagePath": "pages/tabs/welfare/index/index",
				"iconPath": "./static/images/tabs/tab-message.png",
				"selectedIconPath": "./static/images/tabs/tab-message-active.png",
				"text": "福利"
			},
			{
				"pagePath": "pages/tabs/message/index/index",
				"iconPath": "./static/images/tabs/tab-message.png",
				"selectedIconPath": "./static/images/tabs/tab-message-active.png",
				"text": "消息"
			},
			{
				"pagePath": "pages/tabs/mine/index/index",
				"iconPath": "./static/images/tabs/tab-mine.png",
				"selectedIconPath": "./static/images/tabs/tab-mine-active.png",
				"text": "個人"
			}
		]
	}
}

複製代碼

遷移的時候須要注意的是，mpvue在各頁面下的main.json中，uni-app所有在page.json中。

2.8 公共樣式存放在uni.scss中 是會全局生效的。

2.9 若是你的項目中使用了scss 或者eslint，能夠在HbuilderX的工具=>插件安裝 一鍵安裝就行

這樣子其實基本遷移完成了，剩下的就是一些語法方面的兼容。例如在mpvue中組件的onload是會觸發的，可是在uni-app中是不會觸發的，因此須要改爲onready。

遷移過程當中遇到什麼問題，能夠留言給我。