微信H5下IOS返回不刷新页面解决方案

[xianzou]

微信H5下IOS返回不刷新页面解决方案

IOS下跳转到第三方应用然后点击后台会页面不会刷新，导致数据都是旧的，这样会存在bug，例如数据不一致等，解决方案，通过window.onpageshow事件判定进行刷新操作。

//判定是不是微信和IOS
export const isWeiXinAndIos = () => {
    // window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
    const ua = `${window.navigator.userAgent.toLowerCase()}`;
    // 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是IOS系统
    const isWeixin = (/MicroMessenger/i).test(ua); // 是在微信浏览器
    const isIos = (/\(i[^;]+;( U;)? CPU.+Mac OS X/i).test(ua); // 是IOS系统

    return isWeixin && isIos;
};

BasicLayout.js

useEffect(() =>{
    //是不是ios和微信
    const isWXAndIos = isWeiXinAndIos();

    if (isWXAndIos) {
        // 如果是ios,强制刷新页面，解决ios跳转到第三方应用不刷新页面
        window.onpageshow = event => {
            if (event.persisted) {
                window.location.reload();
            }
        };
    }
},[])

完美解决IOS后退不刷新页面；