微信公众号h5开发缓存解决方案

公司的积分商城项目,经常有变更临时需求,上线后,客户大部分反馈并没有更新。由此推断是页面缓存问题。
而微信浏览器的缓存机制,是一贯被诟病的。各种机型测下来,用户不断的点刷新,可以解决一部分。但是如果用户不主动刷新,用户就一直看不到新版本。
在这里插入图片描述
在这里插入图片描述

以下文章,从解决问题的思路出发,循序渐进给出缓存的解决方案。

从前端项目的架构来说:
client端 <—> nginx cache <—>源服务器
我们考虑问题,从这三个方向出发,发散思维,排除问题。

  1. 从自身项目 (client端的代码) 出发加时间戳,比如线上html引入的html,css,js文件都加上时间戳,确保引入的文件从服务器上获取,而不是使用微信的缓存文件。如果是用webpack打包工具重新打包的,因为hash值变了,所以仅要给入口的html文件增加时间戳。

  2. 给html文件增加上meta头,经过测试,也许仅对html文件由内部引用有用,但是对于微信缓存机制是没啥用的。在这里插入图片描述

  3. nginx的静态服务器出发。因为nginx收到客户端的请求的时候,默认使用缓存,不再去源服务器取。所以更改nginx的缓存设置是解决微信缓存的关键步骤。这个需要运维同学配合。

        location /html/ {
        
    #解决微信缓存页面配置

    add_header Cache-Control "no-store";

    expires -1;

        }
  1. 源服务器出发。朋友是安卓开发,他们说他们项目组也经常碰到这样的缓存问题,他们的处理方法是每次发版都到堡垒机上,把服务器的缓存清理一遍。这个方法我们公司没有去试过。因为前面三步已经把这个缓存解决的差不多了。
  2. 前面三步分析了之后,发布上线,但是仍然有老牌的机型说仍然有缓存。这时候,我们怀疑是公众号商城链接的是一个html地址。html这个地址不变的话,微信还是给了缓存页面。由此我们开始考虑怎么客户无感知的状态下,能够让入口的html文件也能加上时间戳,让微信浏览器不使用原来的缓存页面呢。经过几个人的思维碰撞,从自身业务逻辑出发,我们商城的授权登录,是服务器从客户端的去取session,并且规定了session有效期限是2小时。如果超过两个小时,页面的任意接口,都会返回超时认证不通过,静默location到授权接口,完成授权之后,再跳转回来时,为html加上时间戳,这个过程是我们代码里面处理的,用户仅感知了页面的刷新。
  3. 另外,关于html页面入口不更新,还可以使用打开页面重新reload一次。也就是每次都主动刷新一次。但是这样做,每次都会刷新页面。造成不良好的用户体验。
  4. 关于html页面入口不更新,我同事还提出,由后台写接口,告知前端是否有新版本更新,如果有的话,当前html加上版本号,且重新加载页面一次或者location一次。
  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
微信公众号 H5 开发中,如果需要进行横屏签名,需要按照以下步骤进行: 1. 在页面头部添加 meta 标签,设置 viewport 的宽度和高度,以及 initial-scale、maximum-scale 和 minimum-scale 等属性,例如: ```html <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"> ``` 2. 在 CSS 样式表中设置 body 元素的样式,例如: ```css body { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); transform-origin: left top 0; width: 100vh; height: 100vw; overflow-x: hidden; position: absolute; top: 100%; left: 0; } ``` 其中,-webkit-transform、-moz-transform、-ms-transform 和 -o-transform 是为了兼容不同的浏览器内核,transform-origin 是设置旋转的中心点,width 和 height 分别设置页面的宽度和高度,overflow-x:hidden 是为了隐藏横向滚动条,position:absolute、top:100% 和 left:0 是为了把页面移动到底部位置。 3. 在 JavaScript 中监听窗口大小变化事件,重新计算页面样式,例如: ```js window.addEventListener('resize', function() { var width = window.innerWidth; var height = window.innerHeight; if (width < height) { document.body.classList.add('portrait'); document.body.classList.remove('landscape'); } else { document.body.classList.add('landscape'); document.body.classList.remove('portrait'); } }); ``` 其中,如果窗口宽度小于高度,则添加 portrait 类,否则添加 landscape 类,然后在 CSS 样式表中设置不同的样式,以适应不同的屏幕方向。 以上就是微信公众号 H5 开发中如何进行横屏签名的步骤,希望能对你有帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值