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

Wesley13
• 阅读 883

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;可能会改变一点点苹果关于滑动的识别机制,然后就行了。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
java中比较两个时间的差值
项目背景1.某篇文稿的发布时间是publishDate,例如:2020072118:00:41。2.现要求判断该篇文稿的发布时间是否在近30天之内。publicstaticlongdayDiff(DatecurrentDate,DatepublishDate){LongcurrentTimecurrentDat
梦
3年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这