微信公众号H5页面--前端开发踩坑

发布网友发布时间：2024-09-08 17:52

我来回答

共1个回答

热心网友时间：2024-09-29 09:00

最近开发一个微信公众号项目，记录总结下遇到的一些移动端兼容性问题和bug。

1.iphone手机接收验证码，点击验证码，会自动填充两次

原因分析：IOS系统bug,当点击键盘上面的验证码时，会触发UITextFieldTextDidChangeNotification监听事件，收到两个相同的回调。

解决方法：根据验证码长度*输入框长度

//给input框加上maxlength属性，让最大长度等于验证码的位数<inputtype="text"placeholder="请输入验证码"id="codeValue"maxlength="4">2.不同页面之间传递数据

问题描述：首先从A页面点击选择信息框，跳转到B页面，在当前页面选择相应信息，点击确定返回A页面；A页面的信息框就显示在B页面选择的信息。因为离开A页面需要数据消失，所以使用window.sessionStorage在存储B页面选择的信息，在A页面获取存储的数据显示到页面中。在安卓手机可以实现效果，但是使用iphone手机选择了信息，返回A页面，结果没有信息显示。

原因分析：

1.B页面的确定按钮使用了window.history.go(-1)方法返回上一页并刷新，iphone手机不会重新加载页面，因为IOS系统会直接调用缓存

2.sessionStorage存储为会话存储，一旦关闭浏览器窗口或者标签页，那么通过sessionStorage存储的数据也会被清除。有些移动端浏览器切换页面，会关闭原来的页面（相当于打开一个新的页面），因此数据就被清除了，在A页面就获取不到数据。

解决方法：

第一种情况的解决方法：用pageshow事件（用户浏览网页时触发，包括了后退/前进按钮操作）监听页面是不是从缓存中读取，为真就重新加载页面

//A页面window.addEventListener('pageshow',function(event){//persisted表示网页是否是来自缓存if(event.persisted){//ios有效,android每次都是falsewindow.location.reload();}});

第二种情况的解决方法：使用window.localStorage存储数据，使用之后手动清除数据

//B页面letsavePlayer={id:selectId,name:selchk_name_,num:chk_count}window.localStorage.setItem('savePlayer',JSON.stringify(savePlayer));3.使用swiper实现轮播图效果，出现图片滑动个数不正常，刷新几次页面，又恢复正常。

原因分析：使用了rem实现移动端页面适配，但是在执行swiper调用的时候，控制rem的js还没有加载完

解决方法：DOM加载完毕之后执行swiper调用

原文：https://juejin.cn/post/7101886975770099720