首先,为什么如果从mpvue改变uni-app?

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

uni-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内)

组件复用

一般的单文件组件但是直接拷贝到项目内复用,微信小程序自定义组件放置到wxcomponents 目次,具体参考,运用npm保证管理的组件参考npm模块的复用方法装置到当地

Mpvue专有api的处理

mpvue有些自己的api,

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

立即

咨询

400电话

电话咨询

400-1875-778

微信咨询

李经理

微信扫一扫加好友

下载源码

返回顶部