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

简介: 首先,为什么要从mpvue转uni-app?因为uni-app对vue语法支持更全面(如支持过滤器)、性能更高、支持平台更多(支持H5和App)。这里有详细的评测https://juejin.im/post/5ca1736af265da30ae314248然后进入正题。

首先,为什么要从mpvue转uni-app?
因为uni-app对vue语法支持更全面(如支持过滤器)、性能更高、支持平台更多(支持H5和App)。这里有详细的评测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第三方库HBuilderX 0.1.51或以上版本可直接使用npm管理依赖:NPM支持

pic

组件复用

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

注意事项

  • 标签方面,不需要把div改成view,mpvue内置到uni-app中,会自动转。
  • 手动安装的模块需要使用相对路径引入
  • 手动安装的模块版本要和原项目要求一致
  • 手动安装的模块的依赖要一并安装。
  • 使用HBuilderX 0.1.49或以上版本新建的工程(manifest.json内transformPx值为false)不用修改移植组件css内的数值和单位。
  • uni-app强化了条件编译以适合多端发布,这是mpvue没有的重要功能,具体参考

移植示例

附录:mpvue开源资源集合

三方ui库:

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

三方组件

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

模板、示例工程

IT之家 资讯模板
仿美团示例
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示例
豆瓣评分
仿扎克新闻

相关文章
|
8月前
|
缓存 算法 调度
数据结构之 - 双端队列数据结构详解: 从基础到实现
数据结构之 - 双端队列数据结构详解: 从基础到实现
380 5
|
8月前
|
存储 安全 Java
Java HashSet详解
`HashSet` 是 Java 中基于哈希表实现的 `Set` 接口集合,主要用于存储不重复元素,提供快速查找、插入和删除操作。它具有以下特点:不允许重复元素,元素无序,允许一个 `null` 元素,常用操作包括创建、添加、删除、检查元素及清空集合。由于其内部使用哈希表,基本操作的时间复杂度接近 O(1),性能高效。然而,`HashSet` 不保证元素顺序,也不是线程安全的,适用于需要快速访问和操作的场景。
348 8
|
前端开发 JavaScript
使用 JavaScript 获取 URL 参数的详细指南
【2月更文挑战第26天】
12458 2
使用 JavaScript 获取 URL 参数的详细指南
|
9月前
|
存储 监控 容灾
微信技术总监谈架构:微信之道——大道至简(演讲全文)
在技术架构上,微信是如何做到的?日前,在腾讯大讲堂在中山大学校园宣讲活动上,腾讯广研助理总经理、微信技术总监周颢在两小时的演讲中揭开了微信背后的秘密。 周颢把微信的成功归结于腾讯式的“三位一体”策略:即产品精准、项目敏捷、技术支撑。微信的成功是在三个方面的结合比较好,能够超出绝大多数同行或对手,使得微信走到比较前的位置。所谓产品精准,通俗的讲就是在恰当的时机做了恰当的事,推出了重量级功能,在合适的时间以最符合大家需求的方式推出去。他认为在整个微信的成功中,产品精准占了很大一部分权重。
287 1
微信技术总监谈架构:微信之道——大道至简(演讲全文)
|
7月前
|
中间件 Go API
Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
670 1
|
小程序
在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面
在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面
689 1
|
9月前
|
存储 Serverless API
托管及使用专属智能语音模型CosyVoice
CosyVoice是一款先进的声音合成模型,支持声音克隆与情感控制等功能,在教育、客服、游戏等领域有广泛应用。本文详细介绍如何在阿里云Serverless平台上部署CosyVoice应用,比如使用函数计算平台快速搭建。并且提供API调用方法及本地调试步骤,同时还介绍如何通过挂载NAS实现持久化存储,以及更新模型和定制后端服务的方法。
1756 14
|
11月前
|
SQL 关系型数据库 PostgreSQL
SqlAlchemy 2.0 中文文档(四十八)(3)
SqlAlchemy 2.0 中文文档(四十八)
139 0
|
9月前
|
存储 安全 JavaScript
XSS跨站脚本攻击详解(包括攻击方式和防御方式)
这篇文章详细解释了XSS跨站脚本攻击的概念、原理、特点、类型,并提供了攻击方式和防御方法。
2370 1
|
前端开发 数据格式
vue+element-plus上传图片功能以及回显问题还有数量限制
vue+element-plus上传图片功能以及回显问题还有数量限制
587 0

热门文章

最新文章