mpvue项目(组件)迁移指南、示例及资源汇总

uni-app内置了mpvue,mpvue开发的小程序可不用改代码可直接变为uni-app。
但需要修改工程配置,可以参考以下教程手动移植。

项目迁移

\n

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

组件复用

\n

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

注意事项

\n
  • 标签方面,不需要把div改成view,mpvue内置到uni-app中,会自动转。
  • 手动安装的模块需要使用相对路径引入
  • 手动安装的模块版本要和原项目要求一致
  • 手动安装的模块的依赖要一并安装。
  • 使用HBuilderX 0.1.49或以上版本新建的工程(manifest.json内transformPx值为false)不用修改移植组件css内的数值和单位。
\n

移植示例

\n\n

附录:mpvue开源资源集合

\n

三方ui库:

\n\n

三方组件

\n

安卓按下水纹效果按钮
mpvue-animated-number数字更新滚动动画组件
mpvue-img-load图片预加载组件
列表左滑菜单
虚拟键盘
拖拽组件
点赞

模板、示例工程

\n

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


12 分享 关注
DCloud_客服_Trust guyuewuren DCloud_heavensoft 诗小柒 DCloud_MUI_Neil 萧 523024777@qq.com gaus 我的未来 sonicsunsky@qq.com 479703456@qq.com EricCui
EricCui

EricCui

好东西~mark一下
0 赞 1 天前
DCloud_客服_GSQ

DCloud_客服_GSQ 回复 18718500103@163.com

收到,已去除
0 赞 2018-12-04 15:02
18718500103@163.com

18718500103@163.com

丁香医生404
0 赞 2018-12-04 14:14
479703456@qq.com

479703456@qq.com

好东西,标记一下
0 赞 2018-12-04 10:30
苛学加

苛学加

mark
0 赞 2018-11-08 15:44
cyyc

cyyc

HBuilderX 0.1.51什么时候更新呀?
0 赞 2018-10-08 10:18
452306705@qq.com

452306705@qq.com

基于mpvue-material 是空的
1 赞 2018-09-07 09:35
742198752@qq.com

742198752@qq.com

赞,越来越好用了
0 赞 2018-08-27 16:01
guyuewuren

guyuewuren

赞一个,示例里面的视频页空白,请问是没数据还是其他问题呢
0 赞 2018-08-24 02:09

要回复文章请先登录注册