小程序:mpvue框架转uni_app框架采坑记录

uni-app可以多端输出,各平台之前的老项目可以向uni-app转换迁移。mpvue和uni_app都是一个使用 Vue.js 开发所有前端应用的框架,uni-app对vue语法的支持是mpvue的超集, 使用过mpvue几乎不用特地学习uni-app,有点坑的是mpvue 项目没有转换器,需要手动转换。
mpvue 项目(组件)迁移指南、示例及资源汇总: https://ask.dcloud.net.cn/article/34945

根据uni-app提供的文档进行了手动转换,遇到大坑如下,希望存在同样问题的童鞋蹦过去。

通过 HBuilderX 可视化界面 创建uni-app

1、HBuilderX里新建默认模板的uni-app项目
2、HBuilderX创建的项目,它的src是根目录,此时将mpvue项目src目录内的文件拷贝到uni-app项目,查找页面和组件内对资源的引用,检查并修正路径。

文件迁移路径

3、修改页面文件名称,删除每个页面的main.js和main.json文件,将main.json导航和其他配置信息写入pages.json文件中,并将页面名称修改为main.vue。注意:这里不需要改文件夹的名称
4、mpvue的api\像素单位(px、rpx)转换成uni的api\像素单位(upx) 小技巧:全局搜索px;全局替换成rpx; ,再次全局搜索rrpx;全局替换成rpx;最后全局搜索rpx;全局替换成upx; 。至于padding:20rpx 20rpx;只能在页面调整了,或是写个正则和脚本全局换
5、手动安装的模块需要使用相对路径引入;手动安装的模块版本要和原项目要求一致;手动安装的模块的依赖要一并安装。

## 通过vue-cli命令行创建uni-app

1、安装环境

// 确认手脚架是否安装
 vue --version
//全局安装vue-cli
npm install -g @vue/cli
//创建uni-app 推荐使用正式版
vue create -p dcloudio/uni-preset-vue 项目文件名称

创建项目步骤

2、项目文件迁移
修改页面文件名称,删除每个页面的main.js和main.json文件,将main.json导航和其他配置信息写入pages.json文件中,并将页面名称修改为main.vue。注意:这里不需要改文件夹的名称
文件迁移路径

3、完成文件迁移后根据package.json配置文件中的依赖配置下载安装

npm install
//或是使用yarn
yarn
// 根据报错或是警告需要自己安装指定包
npm install --save 缺少包名称
//开发构建
npm run dev:mp-weixin
//发版打包构建
npm run build:mp-weixin
// 包缺失报错
npm WARN saveError Unexpected token / in JSON at position 4664
npm WARN @dcloudio/uni-automator@2.0.0-29820201110001 requires a peer of adbkit@^2.11.1 but none is installed. You must install peer dependencies yourself.
npm WARN @dcloudio/uni-automator@2.0.0-29820201110001 requires a peer of jimp@^0.10.1 but none is installed. You must install peer dependencies yourself.
npm WARN @dcloudio/uni-automator@2.0.0-29820201110001 requires a peer of node-simctl@^6.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN @dcloudio/uni-automator@2.0.0-29820201110001 requires a peer of puppeteer@^3.0.1 but none is installed. You must install peer dependencies yourself.

推荐阅读更多精彩内容