從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": ""
}
},
{
"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。
遷移過程中遇到什麼問題，可以留言給我。