mpvue项目迁移到uniapp的指南、示例及资源汇总

叁歲伎倆 2021-09-29 13:00 572阅读 0赞

[uniapp][] [mpvue][] [uniapp插件][uniapp 1]

首先，为什么要从mpvue转uni-app？  
因为uni-app对vue语法支持更全面（如支持过滤器）、性能更高、支持平台更多（支持H5和App）。这里有详细的评测[https://juejin.im/post/5ca1736af265da30ae314248][https_juejin.im_post_5ca1736af265da30ae314248]

然后进入正题。

uni-app与mpvue，都是使用vue语法开发小程序。从语法支持度来讲，mpvue是uni-app的子集。  
所以mpvue开发的小程序可不用改代码可直接变为uni-app。  
但需要修改工程配置，可以参考以下教程手动移植。

## 项目迁移 ##

1.  HBuilderX里新建默认模板的uni-app项目
2.  将mpvue项目src目录内的文件拷贝到uni-app项目
3.  建立页面配置，根据原项目的app.json或者main.js内的页面配置填写pages.json的内容，并删除原来的页面配置。如果项目未手动配置所有页面，需要根据pages目录内的页面手动增加页面信息。每个页面单独的配置从相关页面的main.json文件或者main.js文件内拷贝，并删除原有配置。
4.  修改页面文件名称，删除每个页面的main.js和main.json文件，并将页面名称修改为main.vue。
5.  静态资源拷贝，将原项目static目录拷贝到uni-app项目，查找页面和组件内对资源的引用，检查并修正路径。
6.  *手动安装package.json文件dependencies节点下的模块（忽略mpvue、vuex、flyio，这些已经内置在uni-app内），安装方式可参考参考社区文章：[uni-app引用npm第三方库][uni-app_npm]*，**HBuilderX 0.1.51或以上版本可直接使用npm管理依赖：[NPM支持][NPM]**。

[![9785e40d894f896cd53648e4d0574a48.png][]][9785e40d894f896cd53648e4d0574a48.png]

## 组件复用 ##

一般的单文件组件可直接拷贝到项目内复用，如果组件css内使用的单位是px建议转换为rpx或upx，使用npm包管理的组件参考npm模块的复用方式安装到本地。

## Mpvue专有api的处理 ##

mpvue有些自己的api，比如`e.mp.touches[0]`，推荐改为标准的`e.touches[0]`。如果不改，也能兼容运行。

## 注意事项 ##

*  标签方面，不需要把div改成view，编译器会自动转。
 *  手动安装的模块需要使用相对路径引入
 *  手动安装的模块版本要和原项目要求一致
 *  手动安装的模块的依赖要一并安装。
 *  使用HBuilderX 0.1.49或以上版本新建的工程（manifest.json内transformPx值为false）不用修改移植组件css内的数值和单位。
 *  uni-app强化了条件编译以适合多端发布，这是mpvue没有的重要功能，具体[参考][Link 1]
 *  mpvue相当于uni-app的模板编译模式，或称为非自定义组件编译模式，和自定义组件模式还有差异，差异详见：[https://ask.dcloud.net.cn/article/35843][https_ask.dcloud.net.cn_article_35843]

## 移植示例 ##

*  [uni-one][]

## 附录：mpvue开源资源集合 ##

### 三方ui库： ###

*  WeUI - 用 vue 写小程序，基于 mpvue 框架重写 weui。[https://github.com/KuangPF/wxapp-vue][https_github.com_KuangPF_wxapp-vue]
 *  mpvue-zanui - 使用 mpvue 框架重写 zanui。[https://github.com/samwang1027/mpvue-zanui][https_github.com_samwang1027_mpvue-zanui]
 *  mp-weui - 基于 mpvue 和 weui-wxss 封装的小程序UI库。[https://github.com/youngluo/mp-weui][https_github.com_youngluo_mp-weui]
 *  mpvue-iview-weapp -基于mpvue导入iview-weapp[https://github.com/wkl007/mpvue-iview-weapp][https_github.com_wkl007_mpvue-iview-weapp]

注意这些mpvue的ui库，只能跨微信小程序和app，无法跨到h5和支付宝百度头条小程序。真正7端全跨的ui库参考这里：[http://ask.dcloud.net.cn/article/35489][http_ask.dcloud.net.cn_article_35489]

### 三方组件 ###

[安卓按下水纹效果按钮][Link 2]  
[mpvue-animated-number数字更新滚动动画组件][mpvue-animated-number]  
[mpvue-img-load图片预加载组件][mpvue-img-load]  
[拖拽组件][Link 3]

### 模板、示例工程 ###

[IT之家 资讯模板][IT_]  
[仿美团示例][Link 4]  
[todolist][]  
[豆瓣电影示例][Link 5]  
[CNode论坛示例][CNode]  
[vue-mpvue-ChatRobot聊天机器人][vue-mpvue-ChatRobot]  
[mpvue-jithub Mini program for Github][]  
[外卖小程序 Demo][Demo]  
[blog][]  
[微信小程序商城][Link 6]  
[公交查询][Link 7]  
[H5 和 微信小程序同时开发 数独游戏][H5 _ _]  
[截屏分享，分享小程序时，当前页面都需要截屏][Link 8]  
[云盘示例][Link 9]  
[校园助手示例][Link 10]  
[表情包斗图][Link 11]  
[个税计算器][Link 12]  
[计算器][Link 13]  
[思思天气][Link 14]  
[天气预报][Link 15]  
[图片加工、贴纸][Link 16]  
[仿网易严选商城][Link 17]  
[仿优酷][Link 18]  
[仿微博][Link 19]  
[A Podcast miniprogram project, 一款播课类小程序][A Podcast miniprogram project_]  
[仿ONE(mpvue+vue)][ONE_mpvue_vue]  
[仿追书神器的小说阅读器][Link 20]  
[电影票销售示例-卖座网][-]  
[俄罗斯方块][Link 21]  
[开眼视频][Link 22]  
[房地产中介][Link 23]  
[多人在线画布][Link 24]  
[智能家居][Link 25]  
[摇骰子辅助工具][Link 26]  
[萝卜手帐][Link 27]  
[查快递][Link 28]  
[生僻字识别][Link 29]  
[扫码书单][Link 30]  
[语文答题闯关][Link 31]  
[仿米家电商][Link 32]  
[日历][Link 33]  
[仿滴滴][Link 34]  
[仿网易云UImusic播放器][UImusic]  
[调用网易云音乐api的播放器][api]  
[i-music][]  
[商户o2o示例][o2o]  
[豆瓣评分][Link 35]  
[仿扎克新闻][Link 36]

转载自：[http://ask.dcloud.net.cn/article/34945][http_ask.dcloud.net.cn_article_34945] 【uni社区】

[uniapp]: http://ask.dcloud.net.cn/topic/uniapp
[mpvue]: http://ask.dcloud.net.cn/topic/mpvue
[uniapp 1]: http://ask.dcloud.net.cn/topic/uniapp%E6%8F%92%E4%BB%B6
[https_juejin.im_post_5ca1736af265da30ae314248]: https://juejin.im/post/5ca1736af265da30ae314248
[uni-app_npm]: http://ask.dcloud.net.cn/article/19727
[NPM]: http://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81
[9785e40d894f896cd53648e4d0574a48.png]: /images/20210923/f412f729fd6d4efbaa094a7bc5686393.png
[Link 1]: https://uniapp.dcloud.io/platform
[https_ask.dcloud.net.cn_article_35843]: https://ask.dcloud.net.cn/article/35843
[uni-one]: https://github.com/dcloudio/uni-app/tree/master/examples/uniapp-one
[https_github.com_KuangPF_wxapp-vue]: https://github.com/KuangPF/wxapp-vue
[https_github.com_samwang1027_mpvue-zanui]: https://github.com/samwang1027/mpvue-zanui
[https_github.com_youngluo_mp-weui]: https://github.com/youngluo/mp-weui
[https_github.com_wkl007_mpvue-iview-weapp]: https://github.com/wkl007/mpvue-iview-weapp
[http_ask.dcloud.net.cn_article_35489]: http://ask.dcloud.net.cn/article/35489
[Link 2]: https://github.com/linrui1994/mpvue-ripple
[mpvue-animated-number]: https://github.com/gaomd/mpvue-animated-number
[mpvue-img-load]: https://github.com/huangjinlin/mpvue-img-load
[Link 3]: https://github.com/LiangFuzhi/mpvue-drag-sort
[IT_]: https://github.com/F-loat/ithome-lite
[Link 4]: https://github.com/privateEye-zzy/mpvue-meituan
[todolist]: https://github.com/tangsj/mpvue-todolist
[Link 5]: https://github.com/mini-mpvue/mpvue-douban
[CNode]: https://github.com/bowencool/mpvue-cnode
[vue-mpvue-ChatRobot]: https://github.com/zz570557024/vue-mpvue-ChatRobot
[mpvue-jithub Mini program for Github]: https://github.com/dwqs/mp-jithub
[Demo]: https://github.com/WsmDyj/mpvue
[blog]: https://github.com/overxue/mpblog
[Link 6]: https://github.com/yllg/mpvue-xbyjShop
[Link 7]: https://github.com/chenhaihong/mpvue-busline
[H5 _ _]: https://github.com/Aimee1608/wxH5sudoku469
[Link 8]: https://github.com/muwoo/vnode2canvas/blob/master/examples/mpvue/README.md
[Link 9]: https://github.com/SmallRuralDog/cloud-doc-v2
[Link 10]: https://github.com/shuopensourcecommunity/SHUhelper
[Link 11]: https://github.com/yshkk/bqb-mpvue
[Link 12]: https://github.com/xuleileo/mpvue-calc
[Link 13]: https://github.com/SunRich/Calculator
[Link 14]: https://github.com/gdmec07120731/sisi-weather
[Link 15]: https://github.com/fengweihuan/mpvue-Weather
[Link 16]: https://github.com/strawbreey/EmotionalSticker
[Link 17]: https://github.com/heyushuo/mpvue-shop
[Link 18]: https://github.com/1haixinzgf/mpvue-youku
[Link 19]: https://github.com/SmileSmith/miniweibo
[A Podcast miniprogram project_]: https://github.com/baisheng/mp-podcast-mpvue
[ONE_mpvue_vue]: https://github.com/Stricksrj/mp-project
[Link 20]: https://github.com/zprial/wx-book
[-]: https://github.com/MauriceYiu/mpvue-maizuo
[Link 21]: https://github.com/nqdy666/mpvue-tetris
[Link 22]: https://github.com/EzioL/mpvue-eyepetizer
[Link 23]: https://github.com/zhoucuole/real-estate-Mini-Program-
[Link 24]: https://github.com/jgchenu/Online-Canvas-Room
[Link 25]: https://github.com/swpuLeo/smart-home
[Link 26]: https://github.com/ZweiZhao/DicePlay
[Link 27]: https://github.com/gaofanghuang/carrotdaily
[Link 28]: https://github.com/gitwujiaolong/xiaochengxuByvue
[Link 29]: https://github.com/BaoStorm/UncommonWord
[Link 30]: https://github.com/kpengWang/Mp-book
[Link 31]: https://github.com/zhongxiangbin/yw_game
[Link 32]: https://github.com/tustman/smart-home
[Link 33]: https://github.com/Hzy0913/mpvue-calendar
[Link 34]: https://github.com/QinZhen001/didi
[UImusic]: https://github.com/dzyook/mpvue-music
[api]: https://github.com/x751685875/mpvue-music
[i-music]: https://github.com/chenjinxinlove/i-music
[o2o]: https://github.com/xiaoshengkai/mpvue-FG
[Link 35]: https://github.com/luchanan/mpvue-douban-pingfen
[Link 36]: https://github.com/hwaphon/mpZAKER
[http_ask.dcloud.net.cn_article_34945]: http://ask.dcloud.net.cn/article/34945