跳到主要内容

mpvue项目转成 uni-app 项目

1. 前言​

mpvue 框架是一个很棒的小程序开发框架，由美团技术团队打造，18年上线的。当时一上线就获得了小程序界的广泛关注，因为 mpvue 无限接近 vue 开发，基本做到了从 Vue.js 到小程序的零成本切换。

如果之前掌握了 Vue.js 语法，用 mpvue 框架开发小程序几乎不会增加新的学习成本，降低了开发小程序的门槛，所以受到很多开发者的欢迎。那我们为什么不继续使用 mpvue 框架，要将 mpvue 项目转成 uni-app 项目呢？

这一小节主要讲解为什么要将 mpvue 项目转成 uni-app 项目以及如何将 mpvue 项目转换成 uni-app 项目。

2. 为什么要将 mpvue 项目转成 uni-app 项目​

mpvue 框架和uni-app 框架都是使用 vue 语法来开发小程序，为什么我们会更加推荐用 uni-app 框架来开发项目呢？下面我们来具体看一下。

2.1 mpvue 框架维护更新慢​

mpvue 框架作为一个开源项目，已经几年没有代码更新记录了。不仅仅是维护更新慢的问题，也可以说 mpvue 框架已经停止维护了。

虽然官方没有发布停止维护的通知，但是一个几年没有维护的开源框架，基本上已经说明开发团队后期不打算再继续维护了。

2.2 mpvue 框架与 uni-app 框架性能对比​

uni-app 框架的技术团队对比过 wepy/mpvue/taro/uni-app/原生小程序的性能，测试项目包括长列表加载、组件状态更新这两个比较容易出现性能问题的实例。

最终得出的结论是 uni-app 性能更优，具体结果如下：

微信原生开发手工优化,uni-app>微信原生开发未手工优化,taro > wepy > mpvue

官网性能对比的文章：

小程序开发：用原生还是选框架（wepy/mpvue/taro/uni-app）

链接：https://ask.dcloud.net.cn/article/35947

我们可以看到 uni-app 不管从开发维护还是项目性能来讲，都是更优的。还有很多其他的优点，比如：uni-app 项目支持在更多的平台上面发布上线、生态更加完善等，这些都是我们更建议选择 uni-app 框架的原因。

下面我们来看看如果将mpvue 项目转换成 uni-app 项目吧。

3. 将 mpvue 项目转换成 uni-app 项目​

我们在不改变代码，只修改项目配置的情况下，可以将 mpvue 开发的小程序直接转变为 uni-app，为开发者进行框架的切换提供了很大的便利。下面我们来看看具体步骤：

3.1 创建 uni-app 项目​

直接在 HbuilderX 中创建项目，点击菜单栏-文件-新建-项目，出现创建项目的界面，选择 uni-app 项目，并选择默认模板。

当然如果已经安装了 vue 运行环境，也可以使用 cli 方式创建项目，执行 vue create -p dcloudio/uni-preset-vue uniappPro 即可创建。

3.2 转移项目文件​

我们准备好现成的 mpvue 项目，现在将 mpvue 项目中的文件复制到刚刚创建好的 uni-app 项目中。

3.2.1 mpvue 项目中的 src/components 文件夹复制到 uni-app 项目根目录下​

复制完成后 uni-app 目录效果如下：

3.2.2 mpvue 项目中的 src/pages文件夹替换掉到 uni-app 项目根目录下面的pages文件夹，并删除每个页面目录中的 main.js 和main.json 文件​

后面main.json 文件中的配置都会转移到 pages.json 文件中。

操作完成后 uni-app 目录效果如下：

3.2.3 配置 pages.json 文件，根据 mpvue 项目的 app.json 和 main.json 文件中的页面配置信息来填写​

需要注意以下几点：

  • 将 pages 配置项中的项目路径改成 .vue 页面的路径，比如将 "pages/index/main" 改成 "pages/index/index"。并将 main.json 文件中的配置写到每个 page 中的 style 配置项中；
  • 将 window 配置项改成 globalStyle 配置项。

实例：

mpvue 项目的app.json文件。

{
  "pages": [
    "pages/index/main",
    "pages/me/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#EA5149",
    "navigationBarTitleText": "慕课网",
    "navigationBarTextStyle": "black"
  }
}

转换成 uni-app 项目的 pages.json文件。

{
    "pages": [
      {
        "path": "pages/index/index",
        "style": {
// 原是 main.json 文件中的配置
            "enablePullDownRefresh":true
        }
      },
      {
        "path" : "pages/me/me",
        "style" : {}
      }
    ],
    "globalStyle": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#EA5149",
        "navigationBarTitleText": "慕课网",
        "navigationBarTextStyle": "black"
    }
}

3.2.4 将其他文件也复制到 uni-app 项目中​

主要有以下几个文件：

  • mpvue 项目中的 src/App.vue 文件替换掉 uni-app 项目根目录下的 App.vue 文件；
  • mpvue 项目中的 src/main.js 文件替换掉 uni-app 项目根目录下的 main.js 文件，还有其他 src 文件夹下面的 .js 文件也一并复制过来；
  • mpvue 项目中的 src/units 文件夹粘贴到 uni-app 项目根目录下；
  • mpvue 项目根目录下的 static 文件夹替换掉 uni-app 项目根目录下的 static 文件夹。

3.3 测试项目​

点击菜单栏-运行，将项目运行到内置浏览器，看看控制台有没有报错，根据报错提示来修改其他的错误。

比较常见的错误有：

  • 路径错误：根据系统提示修改成正确路径即可；
  • mpvue自有 API 不兼容：比如 mpvue.request，需要改为 uni.request；
  • 预编译错误：一般是缺少了插件等原因，比如 mpvue 项目中使用了 scss 编译，我们需要在 HBuilderX 中安装这个插件，不然就会出现预编译错误，点击工具-插件安装，根据系统提示就可以安装插件。

4. 小结​

本小节给大家演示了如何将 mpvue 项目转成 uni-app 项目，可以发现基本只需要复制粘贴就可以了，不需要我们重新编写代码，非常的方便。还有其他项目的转换，可以参考官网的示例：

vue h5项目转换uni-app指南：https://ask.dcloud.net.cn/article/36174

微信小程序转换uni-app指南及转换器：https://ask.dcloud.net.cn/article/35786

wepy转uni-app转换器：https://github.com/zhangdaren/wepy-to-uniapp