vue2+vant2之H5页面
菜鸡踩坑记
1.H5开发,用于页面重新载入,类似于页面刷新功能
window.parent.location.reload() //当前页面的父页面刷新 window.location.reload() //当前页面刷新
2.打开移动端的log
// import vConsole from 'vconsole' // let Vconsole=new vConsole();
3.Vue Router 的传参使用和区别
参考:https://blog.csdn.net/mf_717714/article/details/81945218
4.H5之微信支付开发文档
https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_3
5.h5判断是安卓访问还是ios访问
let ran = navigator.userAgent let isAndroid = ran.indexOf('Android') > -1 || ran.indexOf('Linux') > -1 let isIOS = !!ran.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if (isAndroid) { // 安卓代码块 } if (isIOS) { // ios代码块 }
6.关于ios new date() NaN解决办法
因ios真机上无法识别newdate=“2022-04-20 11:03:35”格式
将时间转换为ios能识别的格式“2022/04/20 11:03:35”
newdate.replace(/-/g,"/")
//即可
7.关于css优惠券内凹圆角的兼容性问题处理
// 先判断当前机型是否为ios
getPhoneType () { let ua = navigator.userAgent.toLowerCase() console.log(ua,'usssaaaaaaaa'); this.modelClass= ua.includes('iphone') ? 'ios' : 'android' console.log(this.modelClass,'modelClass'); },
给ios和android不同的class保证在两种机型上面都不会出错
.croIphone{ width: 100%; height: 180px; border-bottom: 1px dashed black; margin: auto; -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath data-name='椭圆 1' d='M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z' fill-rule='evenodd'/%3E%3C/svg%3E") 20; background: linear-gradient( 45deg, white, white); } .croAndroid{ width: 100%; height: 180px; // border: 1px solid #58c4e6; position: relative; padding-top: 20px; // background: #fff; border-bottom: 1px dashed black; margin: auto; -webkit-mask: radial-gradient(circle at 0 0, transparent 20px, white 0), radial-gradient(circle at right 0, transparent 20px, white 0), radial-gradient(circle at 0 100%, transparent 20px, white 0), radial-gradient(circle at right 100%, transparent 20px, white 0); -webkit-mask-composite: source-in; background: linear-gradient(45deg, white, white); }
效果如上图
8.当h5的自定义页面,在路由不变,参数变化的情况(例如cyhlg?Id=52111变为cyhlg?Id=52112)Vue生命周期不会重载页面,需要手动刷新页面(体验感极差)。解决:监听路由变化,刷新页面
// 监听,当路由发生变化的时候执行 watch: { $route() { console.log('进入路由变化'); this.id= this.$route.query.id window.location.reload() }, id(){ if (this.id) { this.getDetail(true); } } },