关于mpvue写小程序移植到uni-app的总结

目录

1.单位

2.对不同机型的兼容

iphone

3.对路由的配置

1.uni-app的navigateback不能实现刷新之后还能返回到上一个页面的操作。不能实现刷新之后还能返回到上一个页面的需求

2.对有自定义底部tabbar页面刷新之后回到第一个页面

---

原来的项目用的是mpvue+colorui+vant-weapp的框架

想着可能以后会转成android或者ios

就把mpvue 转成了uni-app

参考了uni-app官网的mpvue转uni-app

https://ask.dcloud.net.cn/article/34945

但是却发现有些地方不通用

1.单位

之前的项目用的px的单位但是在uniapp上px不能直接转成自适应 看文档才知道得在src 下的mainifest.json里 用transformPx:true

才能开启px的自适应 但是这样其实是把px 转成了rpx  但是rpx其实应该是2倍的px。但这里并没有转成2倍的而是1倍的。看了无数的文档也没有什么好的解决办法。只能手动吧所有的px转成了2倍的rpx来写。

2.对不同机型的兼容

iphone

1.h5页面和小程序有许多的不同之处。其中h5中微信登录得刷新。但是在ios9这个版本 刷新之后会局部变得非常大 

参考了 https://blog.csdn.net/wozaixiaoximen/article/details/56484479之后得知ios9版本在

解决办法:mate标签下得再加一个shrink-to-fit=no

 

2.在ios9下拉箭头

对父元素display:flex 然后子元素postion:absolute;right:0这种垂直右边对齐方式是无法对齐的。

解决办法:加一个top等于高度的一半来垂直居中

 

3.在iphonex span标签不设定宽度在父元素display:flex会换行

解决办法：在span标签加一个white-space: nowrap;才能不换行

4.h5分享的时候ios手机上分享用不了的问题

解决办法:网上说了很多用location.href,window.open还有截取路由的办法。实验了很久只能用location.href这样来写window.open会打开新页面而不是重定向这样要是自定义返回按钮就无法使用了。截取路由uni-app路由已经封装好了。才疏学浅研究了半天算了。但是用了location.href的话uni-app的路由就无法使用了

5.用location.href来跳转无法使用uni-app

解决办法:用history这个内置对象来进行路由的跳转

6.关于ios9宽度会超出屏幕之外

解决办法:

{
width:100vw;
overflow-x:hidden;
}

3.对路由的配置

1.uni-app的navigateback不能实现刷新之后还能返回到上一个页面的操作。不能实现刷新之后还能返回到上一个页面的需求

解决办法:用history.go或者history.back这种原生内置对象来进行路由的跳转就能有效的避免

2.对有自定义底部tabbar页面刷新之后回到第一个页面

解决办法:每次跳转的时候在顶部都加上一个参数index=当前页面下标然后用this.$route.query来获取下标自定义加载页面

4.支付

1.对于微信浏览器h5支付一直失败的原因

1.1在ios上为timeStamp为空而安卓是好的情况下

解决办法:前端直接用后台传的值，后台传的值得是字符串

1.2在ios和安卓都无效但是传的参数是对的情况下

解决办法:不要用微信的包。直接用微信的内置对象WeixinJSBridge来进行支付