从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": ""