从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。

迁移过程当中遇到什么问题，能够留言给我。