小白记------H5开发遇到的问题，以及苹果兼容的一些坑

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_26067615/article/details/89916535

1.H5的localStorage第二次打开的时候不会清除，例如：

微信公众号第一次登陆之后存一个

[code]localStorage.setItem("login","true");

然后关闭微信，再重新进去，获取

[code]localStorage.getItem("login");

这个打印出来的值是为true的。

2.苹果手机微信用的WKWebview内核，跨域请求接口的时候不会携带上cookie，无法验证登录，会导致接口无权限或者404。

解决方法：服务器采用nginx反向代理，项目和请求接口的链接都换成相同的域名，解决跨域问题，也解决了苹果微信跨域请求不携带cookie的问题。

3.vue项目保存登录状态的问题，刷新后导致全局变量改变，登录状态还原导致刷新就会退出登录。

解决方法：刷新的时候把全局变量存到localStorage

[code]window.addEventListener("beforeunload",()=>{
localStorage.setItem("userState",JSON.stringify(state))
});

在页面重新加载时再从localStorage里面更新全局变量

[code]localStorage.getItem("userState") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userState"))));

4.在做一个数据表格的时候，因为手机屏幕太小，不适合放table，所以自己做一个表格来存放。

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

5.关于时间的一个小问题

[code]new Date();

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

[code]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或者触控区域偏移的问题。

解决方法：

[code]// 失去焦点，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上面滑动那就很卡顿，以下代码可解决这种卡顿的问题：

[code]-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;可能会改变一点点苹果关于滑动的识别机制，然后就行了。强行解释，不管你服不服....

项目未完，更新中.......

 

PS：此文章仅仅是给我自己做一个笔记，有帮到你的是我的荣幸，写得不对的也请指正，不喜勿喷，本人野生前端，比较菜