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

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

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

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

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

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

// 给input框加上maxlength属性，让最大长度等于验证码的位数
<input type="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 每次都是 false
        window.location.reload();
    } 
});

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

//B页面
let savePlayer = {
    id: selectId,
    name: selchk_name_,
    num: chk_count
}

window.localStorage.setItem('savePlayer', JSON.stringify(savePlayer));

3.使用swiper实现轮播图效果，出现图片滑动个数不正常，刷新几次页面，又恢复正常。

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

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