从mpvue迁移到uni-app
之前公司一直在使用mpvue开发小程序,但是伴随业务的越来越复杂以及长列表页面的存在,逐渐发现mpvue存在太多性能问题,以及各种各样诡异的数据问题。主要是因为这个小程序是去年初始化项目的,当时mpvue很火,所以直接就入坑了。 在遇到各种问题后,为了做更少的变动,于是经过一番调研于是选择了uni-app这个框架,都是使用vue的开发。
1.基本结构的区别
首先我们对比一下mpvue和uni-app的目录结构有那些区别
复制代码
un-iapp
可以看的出来从项目结构上有很大的差异,首先不存在uni-app不存build和config目录,所有build的操作全部在HbuilderX中完成,mpvue中的src目录就是uni-app的根目录
2.如何迁移
2.1 下载一个 HbuilderX,开箱即用。 2.2 启动软件新建一个uni-app项目,默认模版为空即可,
2.4 调整相关的路径 2.5 将init一个package.json 把必要的依赖安装好,默认自带vuex,以下是我的依赖包
在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": ""