H5开发遇到的问题,以及苹果兼容的一些坑

那年仲夏 提交于 2020-02-26 23:10:30

1.H5的localStorage第二次打开的时候不会清除,例如:
微信公众号第一次登陆之后存一个

localStorage.setItem("login","true");
然后关闭微信,再重新进去,获取

localStorage.getItem("login");
这个打印出来的值是为true的。

2.苹果手机微信用的WKWebview内核,跨域请求接口的时候不会携带上cookie,无法验证登录,会导致接口无权限或者404。
解决方法:服务器采用nginx反向代理,项目和请求接口的链接都换成相同的域名,解决跨域问题,也解决了苹果微信跨域请求不携带cookie的问题。

3.vue项目保存登录状态的问题,刷新后导致全局变量改变,登录状态还原导致刷新就会退出登录。
解决方法:刷新的时候把全局变量存到localStorage

window.addEventListener("beforeunload",()=>{
    localStorage.setItem("userState",JSON.stringify(state))
});
在页面重新加载时再从localStorage里面更新全局变量

localStorage.getItem("userState") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userState"))));
4.在做一个数据表格的时候,因为手机屏幕太小,不适合放table,所以自己做一个表格来存放。


实现的效果是:蓝色框是能上下滚动,红色框能左右滑动。期间遇到一个问题,在谷歌和安卓上正常,在苹果中红色框里面的蓝色框就不能左右滑动,上面的title可以左右滑动,上面的title滑动的时候也能把下面的数字带着滑动,后来找到了原因,因为顶层用了float,导致后代也跟着继承了浮动,脱离了文本流,所以在苹果上面不能左右滑动了。(PS:这图截得时候是我在调的时候的图,数据没对齐是当时改了样式的,正常的是一个title对应下面一列数字)

5.关于时间的一个小问题
new Date();
括号里面填不是正常的时间格式的时候,谷歌和安卓是正常的,苹果会报错,这个当时报错说的很模糊,而且代码也是别人写的,所以我看了老半天才知道。还有一个小问题,需要注意一下的:

let date = "2019-05-07";
let date1 = "2019/05/07";
console.log(new Date(date).getTime());
console.log(new Date(date1).getTime());
这两个打印出来的时间戳是不一样的,

用 / 的打印的是当前日期0点时候的时间戳,用 - 打印的时候当前日期8点的时候的时间戳。

6.ios焦点移位的问题,iOS端输入法弹出后,输入框上移遮挡,输入法关闭后UI或者触控区域偏移的问题。
解决方法:

// 失去焦点,window滚回原本的位置
function blur(){
    window.setTimeout(function(){
          window.scrollTo(0,document.body.clientHeight);
    }, 500);
};
 
// 获得焦点,window滚动到0,可以自定义位置
function focus(){
    window.setTimeout(function(){
          window.scrollTo(0,0);
    }, 500);
};
 
// 判断是否为iOS端
let u = navigator.userAgent, app = navigator.appVersion;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);  // iOS终端
 
// 判断后调用,推荐在vue里直接绑定输入框的focus和blur事件
if (isiOS) {
       ......   
}
6.ios滑动不流畅
跟第四个问题情况一样,都是表格,在安卓和谷歌上滑动很流畅,在ios上面滑动就很木。给div设置overflow:scroll;在ios上面滑动那就很卡顿,以下代码可解决这种卡顿的问题:

-webkit-overflow-scrolling: touch;
因为这行代码启用了硬件加速特性,所以滑动很流畅。

实际上,Safari真的用了原生控件来实现,对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。

ps:在我一个页面也用了这个表格,一顿乱操作之后(改了样式和结构),又出现了问题四的情况,红框中的蓝框不能左右滑动,但是现在不是浮动的原因了,也不知道啥原因,就是在苹果上面不行,当我加了上面这句代码之后,又可以了。我调试的时候发现红框里面的蓝框是一个div,我给它设置了overflow-y: scroll;(这个div只能竖向滑动,横向的话我是让红框整体滑动,实现表头和内容对齐的效果),去掉这个overflow-y: scroll;横向可以了,竖向也可以,但是我往上滑动,表头就消失了,这不是我要的效果,所以我猜想可能是ios识别机制的原因,我给这个div设置了overflow-y: scroll;滑动这个div的时候苹果就只识别overflow-y,不会触发父级的滑动,-webkit-overflow-scrolling: touch;可能会改变一点点苹果关于滑动的识别机制,然后就行了。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!