从mpvue迁移到uni-app
栏目: JavaScript · 发布时间: 5年前
内容简介：之前公司一直在使用mpvue开发小程序，但是伴随业务的越来越复杂以及长列表页面的存在，逐渐发现mpvue存在太多性能问题，以及各种各样诡异的数据问题。主要是因为这个小程序是去年初始化项目的，当时mpvue很火，所以直接就入坑了。 在遇到各种问题后，为了做更少的变动，于是经过一番调研于是选择了uni-app这个框架，都是使用vue的开发。un-iappmpvue
之前公司一直在使用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 。
迁移过程中遇到什么问题，可以留言给我。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 银行核心海量数据无损迁移：TDSQL数据库多源异构迁移方案
- 再无需从头训练迁移学习模型！亚马逊开源迁移学习数据库 Xfer
- Spring Cloud Alibaba迁移指南（一）：一行代码从 Hystrix 迁移到 Sentinel
- Spring Cloud Alibaba迁移指南1：零代码从Eureka迁移到Nacos 原 荐
- Spring Cloud Alibaba迁移指南2：一行代码从Hystrix迁移到Sentinel 原 荐
- 数据迁移的套路
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Java技术手册（第6版）
Benjamin J Evans、David Flanagan / 安道 / 人民邮电出版社 / 2015-12-1 / 79.00
《Java技术手册 第6版》为《Java 技术手册》的升级版，涵盖全新的Java 7 和Java 8。第1部分介绍Java 编程语言和Java 平台，主要内容有Java 环境、Java 基本句法、Java 面向对象编程、Java 类型系统、Java的面向对象设计、Java 实现内存管理和并发编程的方式。第2部分通过大量示例来阐述如何在Java 环境中完成实际的编程任务，主要内容有编程和文档约定，使......一起来看看 《Java技术手册（第6版）》 这本书的介绍吧!
