mpvue项目转uni-app迁移指南

首先,为什么要从mpvue转uni-app?

因为uni-app对vue语法支持更全面(如支持过滤器)、性能更高(尤其是组件较多的复杂页面)、包体积更小(因为mpvue把公共组件会编译到每一个页面里)、支持平台更多(支持H5和App)、生态更完善(uni-app插件市场有数千个插件)。

uniappuni-app与mpvue,都是使用vue语法开发小程序。从语法支持度来讲,mpvue是uni-app的子集。

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

项目迁移

1.HBuilderX里新建默认模板的uni-app项目,或者使用cli创建,在全局安装vue后,可执行vue create -p dcloudio/uni-preset-vue my-project 创建工程。
2.如果是cli创建,那工程结构基本相同。对应复制页面文件即可。可跳过下面的第3步。
3.如果在HBuilderX创建的项目,它的src是根目录,此时将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内)。

uniapp

组件复用

一般的单文件组件可直接拷贝到项目内复用,微信小程序自定义组件放置到wxcomponents 目录,具体参考,使用npm包管理的组件参考npm模块的复用方式安装到本地。

Mpvue专有api的处理

mpvue有些自己的api,

  • 比如e.mp.touches[0],推荐改为标准的e.touches[0]。如果不改,也能兼容运行。
  • 还有一些比如mpvue.request,需要改为uni.request。如果之前的写法是wx.request,则不用改,uni-app直接兼容wx写法。

注意事项

  • 标签方面,不需要把div改成view,编译器会自动转。
  • 手动安装的模块需要使用相对路径引入
  • 手动安装的模块版本要和原项目要求一致
  • 手动安装的模块的依赖要一并安装。、
  • uni-app强化了条件编译以适合多端发布,这是mpvue没有的重要功能,具体参考
  • mpvue相当于uni-app的模板编译模式,或称为非自定义组件编译模式,和自定义组件模式还有差异。另外非自定义组件模式,因为性能不好,已经被淘汰。

本文源于uni-app官网,此文仅供大家学习,侵删!


<来客推(www.laiketui.com)是国内知名商城系统及商城网站建设提供商,为企业级商家提供零售商城、B2B2C多用户商城系统、社区团购、微信分销系统、小程序商城、商城系统等多端商城网站建设解决方案>

申明:本网站部分文章和图片来源网络编辑,如有侵权及时沟通删除,来客电商原创文章,转载请注明来源。

相关新闻

QR code