精华内容
下载资源
问答
  • 微信小程序webview缓存处理

    千次阅读 2020-07-02 20:33:12
    缓存问题 大家都知道,浏览器缓存是个非常有用的特性,它能够提升性能、减少延迟,还可以减少带宽、降低网络负荷。关于浏览器的缓存机制可以总结成下面 2 句话: 浏览器每次发起请求,都会先在浏览器缓存中查找该...

    缓存问题

    大家都知道,浏览器缓存是个非常有用的特性,它能够提升性能、减少延迟,还可以减少带宽、降低网络负荷。关于浏览器的缓存机制可以总结成下面 2 句话:

    • 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识
    • 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

    更进一步,我们可以粗略了解一下强制缓存和协商缓存的运行机理。若强制缓存(Expires 和 Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified/If-Modified-Since 和 Etag/If-None-Match),协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,返回 200,重新返回资源和缓存标识,再存入浏览器缓存中;生效则返回 304,继续使用缓存。这段文字是想让读者拓展一下知识面,如果想要更输入了解,可以通过上面的一些关键字(强缓存、协商缓存、Expire、Cache-Control 等)去查找更详细的资料。

    微信的 web-view 组件就是一个嵌在小程序里的浏览器,它在缓存上并没有完全遵照上述的规则,也即它的缓存并不能及时得到清理。想必下面的操作大家都有尝试过:

    • 手动退出小程序,再次进入;
    • 将微信从后台退出再打开并重新进入小程序;
    • 修改 Nginx 关于 Cache-Control 的配置;
    • 用 debugx5.qq.com 手动清除安卓微信浏览器缓存;
    • iOS 利用微信自带清楚缓存功能。

    无法及时刷新缓存会导致发布了最新的页面,而小程序里仍然是以前的页面,从而会带来许多问题,如前后端的数据不一致,新的特性无法及时起作用,修改的问题没有得到解决等等。这里需要说明一下:web-view 在过一段时间(时间不定,一天或者几小时,无明显规律)是可以进行缓存刷新的,而本 Chat 要解决的是及时刷新的问题。

    解决问题

    解决思路

    浏览器访问资源是通过 URL 地址,如果内嵌 H5 的地址不发生变化,那么 web-view 访问资源会从缓存里取,而缓存里并没有最新的数据,这就导致了服务端的最新资源根本无法到达浏览器,这也就解释了为什么修改 Nginx 的 Cache-Control 配置也无法生效的原因。所以,要想彻底解决及时刷新,必须让 web-view 去访问新的地址。我们假定小程序访问的 URL 地址为:

    https://www.yourdomain.com/101/#/index
    

    其中 101 就是构建的一个版本号,每次递增,保证次次不同即可。

    小程序获取最新版本号

    在小程序中,我们利用 app 的 onShow 钩子函数 [1] 来完成最新的 URL 获取,同时还要保证只有获取了版本号之后才能加载其他的页面,因此这里要用到同步接口调用 [2]。请参考下面代码:

    //这里加入同步请求到服务器获取最新路径
    onShow: function (options) {
        this.getFEVersion()
    },
    getFEVersion: function () {
        //下面是利用Promise进行同步调用的写法
        return new Promise(function (resolve, reject) {
          wx.request({
            //下面是本机调试的一个地址,上线时请改成自己服务端的地址
            url: 'http://192.168.0.168:8090/getFEVersion',
            data: {},
            method: 'POST',
            header: {
              'content-type': 'application/json',
            },
            success: function (res) {
              if (res.data.success) {
                const app = getApp();
                //res.data.version 是从服务端返回的最新fe的版本号,即上面的数字101
                app.globalData.feUrl = 'https://www.yourdomain.com/' + res.data.version + '/#/index'
              }
              resolve();
            },
            fail: function (error) {
              console.log(error);
              reject();
            }
    
          })
        });
      },
    

    Nginx 配置

    Nginx 正则规则,~ 表示区分大小写的正则匹配,\d 是数字的匹配的正则表达式,正好可以匹配 101 这样的数字表达式。

    server{
           ##其他配置
           ##......
           ##其他配置
    
           location ~ /\d {
              root /mnt/projects/FE/;
           }
     }
    

    在服务器上存放项目的路径为 /mnt/projects/FE/101,下图是 Vue 项目构建好的样子。

    服务端接口

    下面是服务端接口的参考代码,我们可以将最新的版本号存入数据库:

    @RequestMapping(value = "getFEVersion", method = RequestMethod.POST)
    public Object getFEVersion(HttpServletRequest request) {
        ResponseVo responseVo = new ResponseVo();
        //从数据库中获得最新的版本号
        responseVo.setSuccess("101");
        return responseVo;
    }
    

    总结

    到此,我们将小程序发布上线,重启 Nginx 使得配置生效,后续每次构建前端工程,都生成一个新的版本号,如 102、103 等等,将该版本号填入数据库中,后端接口都会及时返回最新版本号,使得小程序总是以最新的路径加载,从而做到 web-view 都能及时的加载最新的 H5 页面。

    展开全文
  • 主要介绍了微信小程序webview交互实现支付功能,文中通过示例代码介绍的非常详细,对大家学习或者使用小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 项目需求,在微信小程序首页的 banner 图,打开公司官网,这个功能很好实现,就是专门整个 webview 组件所在页面,以后凡是有这种需求的都跳转到这个页面,只需要切换不同的路由地址就行了,可是最近出现了一个问题...

    项目需求,在微信小程序首页的 banner 图,打开公司官网,这个功能很好实现,就是专门整个 webview 组件所在页面,以后凡是有这种需求的都跳转到这个页面,只需要切换不同的路由地址就行了,可是最近出现了一个问题:::

    官网上的所有数据都是静态数据,没用到服务端,纯静态的,这时候需要修改一下公司的电话,还有某些字眼,改完之后直接放服务器上了

    使用 PC 端浏览器访问官网,查看已经改过来了,于是就没再管,过了段时间,领导说怎么还没改过来,???什么情况???
    领导说是用微信小程序访问的,没改过来,将小程序 kill ,delete 都不行,什么鬼,都想摔手机了

    想一想,肯定是微信那边的缓存,要不然怎么可能干掉了小程序了还缓存在上个页面,于是清理了微信的缓存,不放心,干掉了微信,重新打开,登录,哎?刷新过来了!!!

    注意(Attention,敲黑板)
    这里清除微信缓存不是用的微信设置里边的清除缓存,是手机设置里边清除微信的数据,这样的操作导致微信里边最终什么都没有了,账号里边的东西都没了,所以不建议自己尝试,我是用了一个微信小号进行的尝试

    总不能让客户也干掉微信吧,得想个办法解决一下:

    直接上解决办法,有兴趣的可以往下继续看,看看问题是怎么解决的:

    path = encodeURIComponent(res.data.path); //从后台获取地址
    wx.navigateTo({
      url: '../webView/webView?url='+path
    })
    
    // webView 页面
    let url = opts.url ? opts.url:'';
    url = decodeURIComponent(url);
    this.setData({url})
    

    后台传递过来的地址类似于这样:
    https://www.aaa.com?v=1.0.0
    改部分数据:
    https://www.aaa.com?v=1.0.1

    提示:
    有的小伙伴项目是 vue 的项目地址,询问 vue 项目地址追加随机串怎么追加?这里给个例子:
    https://www.aaa.com/?bbb=bbb&aaa=aaa#/index/h 这样追加参数,不要追加在 # 号之后

    问题描述
    好多同学说追加参数,追加随机串的那种方式不好使,其实不然,追加参数,追加随机串还是好使的,只是传递过去的地址没有将你追加的参数或者随机串携带过去,需要传递之前编码,传递之后解码就好使了

    有兴趣的可以往下看看怎么解决问题的:

    web-view 本质就是一个浏览器吧,那给 url 地址添加一个随机串不就行了?说干就干

    //跳转之前的页面给 url 添加后缀
    path = res.data.path; //从后台获取地址
    path += '?randstr=' + new Date().getTime() + '' + Math.round(Math.random() * 10000);
    wx.navigateTo({
      url: '../webView/webView?url='+path
    })
    
    // webView 页面
    let url = opts.url ? opts.url:'';
    this.setData({url})
    

    这样试了一下,不行…,在 webView 页面输出的 url 不带刚才添加的参数,直接在 webView 页面写死一个地址,这样倒是可行,

    改一下这样倒是可行,给地址后面增加随机串 ,防止缓存:

    //跳转之前的页面给 url 添加后缀
    path = res.data.path; //从后台获取地址
    wx.navigateTo({
      url: '../webView/webView?url='+path
    })
    
    // webView 页面
    let url = opts.url ? opts.url:'';
    url += '?randstr=' + new Date().getTime() + '' + Math.round(Math.random() * 10000);
    this.setData({url})
    

    但是地址不可能就只给个域名吧,有时候 携带参数的怎么办?再继续改进,还是传递之前追加随机串

    path = res.data.path; //从后台获取地址
    let randStr = new Date().getTime() + '' + Math.round(Math.random() * 10000);
    //判断是否有问号
    if(/\?/g.test(path)){ // 有问号
    	path += '&rand_str=' + randStr;
    }else{ // 没问号
    	path += '?rand_str=' + randStr;
    }
    wx.navigateTo({
      url: '../webView/webView?url='+path
    })
    
    // webView 页面
    let url = opts.url ? opts.url:'';
    this.setData({url})
    

    这时候又不行了,在 webView 页面接收到的参数又变成了一个域名,追加的参数丢了,继续改,估计微信 navigateTo 的时候将第二个问号的东西给干掉了,转换一下,这次的好使了

    path = res.data.path; //从后台获取地址
    let randStr = new Date().getTime() + '' + Math.round(Math.random() * 10000);
    //判断是否有问号
    if(/\?/g.test(path)){ // 有问号
    	path += '&rand_str=' + randStr;
    }else{ // 没问号
    	path += '?rand_str=' + randStr;
    }
    path = encodeURIComponent(path);
    wx.navigateTo({
      url: '../webView/webView?url='+path
    })
    
    // webView 页面
    let url = opts.url ? opts.url:'';
    url = decodeURIComponent(url);
    this.setData({url})
    

    但是这样的总感觉破坏了浏览器缓存机制是不是不太好,缓存就是为了方便下一次访问的时候能快一点,不缓存了还快个 der 啊,既然追加参数都行了,那就有得是办法了,后台数据库填写地址得时候追加个版本号,这样以后如果更改了页面部分内容,只需要改一个版本号就行了,也不妨碍浏览器下一次进行缓存,OK,原来最终解决办法不是在代码里追加随机串,而是跳转得时候编码,接收得时候解码啊,如果不编码和解码,追加的参数不好使

    path = encodeURIComponent(res.data.path); //从后台获取地址
    wx.navigateTo({
      url: '../webView/webView?url='+path
    })
    
    // webView 页面
    let url = opts.url ? opts.url:'';
    url = decodeURIComponent(url);
    this.setData({url})
    

    后台传递过来的地址类似于这样:
    https://www.aaa.com?v=1.0.0
    改部分数据:
    https://www.aaa.com?v=1.0.1

    展开全文
  • 场景: 1.内嵌使用的是 vue + webpack 打包的单页面 2.更新内容后,webview里面的内容无法更新, 解决办法 1.在url后面加时间戳, 这个在苹果可以实时解决缓存,安卓...3.以上能解决新的打包项目在webview 缓存问题,

    场景:

    1.内嵌使用的是 vue + webpack 打包的单页面

    2.更新内容后,webview里面的内容无法更新,

    解决办法

    1.在url后面加时间戳, 这个在苹果可以实时解决缓存,安卓有些机子不行

    2.在安卓机子不行的时候,需要在webpack打包的时候加上 hash配置,不懂hash配置的,可以百度一下,

    并且在index.html 里面meta标签加上http-equiv=“cache-control” content=“no-cache”

    3.以上能解决新的打包项目在webview 缓存问题,

    4.因为原先已经有缓存,进不到新打包的项目里面,走不到新的代码,所有还是会存在缓存问题,只需微信打开http://debugtbs.qq.com,然后根据里面提示,进入页面,里面有一个清除本地缓存选项,清除后,下次进去就可以了。

    5.完美解决webview缓存问题

    展开全文
  • 我们在发布新版本的时候,在打开微信小程序嵌套的h5页面和微信公众号h5页面的时候,常常会发现页面还是上个版本的旧页面或者打开直接空白 白屏了,那么为什么会存在这个问题呢? 原因是微信浏览器为了提高性能,...

     一、缓存带来的问题和原因

            我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白 白屏了,那么为什么会存在这个问题呢?

            原因是微信浏览器为了提高性能,自带缓存功能,缓存了html文件,比如页面 https://www.xxx.com/abc.html,虽然这个页面有改动,但是页面路径还是同一个,还是https://www.xxx.com/abc.html,缓存就会生效,还是会请求到旧的资源;也因为有时手动清除了缓存,缓存资源不存在会造成空白的现象。

            如果不处理,缓存第二天或过几个小时后就自动清除,这个功能有好有坏,但缓存问题确实对发布新版本造成很大的困扰,总不能让用户手动清除缓存吧,而且清除缓存后还不一定成功有效。

     二、怎么解决

            在这之前我们肯定已经做了尝试,比如服务器 cache-control 强缓存协商缓存,还有加时间戳等等,发布后还是没有用。在本文中会采用修改请求路径的方式做测试。

    例如下面常规的清除缓存的方式,参考我的另外一篇文章

    h5、微信浏览器、微信公众号清理缓存的常用方法_飞歌Fly的博客-CSDN博客h5浏览器特别是微信公众号存在缓存的问题,让我们在测试、产品、用户面前彻底丢了面子,他们会问。为什么会有缓存?别人的产品可以做到,为什么我们的不可以?下面提供几种方案可以尝试处理h5浏览器缓存的问题。一、普通h5浏览器清理缓存方式。1、在index.html文件中加入清理缓存的meta标签(有些浏览器有用,有些浏览器然并卵)<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /&https://blog.csdn.net/qq_35430000/article/details/111572760

    hash路由和history路由的区别:

    hash 路由:hash 就是指 url 尾巴后的 # 号以及后面的字符,监听 url 中 hash 的变化,然后渲染不同的内容,这种路由不向服务器发送请求,不需要服务端的支持;
    history 路由:监听 url 中的路径变化,需要客户端和服务端共同的支持;

            vue项目默认采用的就是hash路由,带#号的路由,例如https://www.xxx.com/policy/#/abc.vue,#后面无论改变什么内容都不会向服务器发送请求,也不会清除缓存。所以hash路由模式后面加版本号还是时间戳都不会有太大作用,例如https://www.xxx.com/policy/#/abc.vue?version=1.0&t=Date.now()。

    另外采用history模式加版本号和时间戳重新发起请求清理缓存应该是可行的,因为url访问路径已经改变,这个我没有具体尝试,如果有效果就不需要下面的步骤了。history模式需要nginx加一些处理,要不然刷新会404。

    三、具体做法

    重点:既然#符号后面内容改变无效,那能不能在 #符号前面加版本号改变请求路径呢?

    举例:原访问路径是  https://www.xxx.com/policy/#/abc.vue,policy是项目名称,前端项目放在服务器data/hdwork-h5目录下。

    在#前面加版本号就变成:https://www.xxx.com/policy/123/#/abc.vue,123是版本号的举例,这个可以自己定,是个数字就可以,这种做法简单,只需要nginx再多加一个匹配数字的配置就可以。以下是nginx项目的配置参考,具体以自己项目定义。这里只给出了匹配/policy/\d+ 匹配数字的案例,不加数字的/policy 就是原逻辑。

    这样 加版本号https://www.xxx.com/policy/{版本号}/#/abc.vue 和 不加版本号https://www.xxx.com/policy/#/abc.vue,这两种方式都是可以正常访问的

    原理就是 当我们请求带版本号的请求路径https://www.xxx.com/policy/123/#/abc.vue时,会自动重写成 正常的访问路径https://www.xxx.com/policy/#/abc.vue,这样就达到了修改请求路径从而让微信浏览器以为这是一个新的路径,就不会有缓存的情况。

    四、版本号怎么定

            版本号只要是数字就可以,因为nginx 正则就是 /d匹配数字,需要其他正则规则自己配置。版本号的产生可以在每次前端构建发版的时候定义一个全局变量 version然后获取;也可以和后端约定,通过接口的形式获取版本号,每次发新版本,version都+1更新,版本号只要和上次就版本不一致就可以。建议还是通过接口形式获取版本号,这样比较好维护也好变更,拿到版本号后在原请求路径上追加版本号。

    https://www.xxx.com/policy/{版本号}/#/abc.vue

    五、加版本号的一些问题

            有一些微信小程序需要分享二维码或者分享给第三方的链接。因为二维码都比较固定,不会经常变化。所以对于分享出去的链接最好先把版本号去掉,等扫码进入或者链接进入时,再请求接口把版本号拼接上。

    展开全文
  • 项目是小程序(wepy), 部分页面使用webview(vue). 经常会遇见一个场景: 当小程序navigateTo到一些页面对用户的”收藏状态”, “身材细节”做了修改后, 用户点击返回按钮回到上一个页面, 收藏的状态或是身材细节没有...
  • 本文给大家分享的是如何在微信小程序中播放缓存到本地的音频文件的方法,区分了IOS和安卓的不同策略,非常不错,推荐给大家
  • 微信小程序webview内嵌H5页面缓存 参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择。vue项目已经更新到nginx上线成功,...
  • 微信小程序webView跳转

    2021-04-25 17:47:45
    1、跳转webView页面,并传参数 <button bindtap="goWebView">跳转webView</button> //跳转webview goWebView(){ const userId = '20210105175850-1d7a5f0d13_user'; const path = "wmh5.fenzhan...
  • 微信小程序 webview 页面刷新

    千次阅读 2019-01-15 08:58:57
    微信小程序 webview 页面刷新 问题描述 在微信小程序原生页面做了操作,数据发生改变,回到 webview 页面时需要更新 webview 里面的数据。由于小程序没有提供与 webview 的实时通信能力,因此刷新页面是个可考虑的...
  • } 实现方式超级简单,但是我调了好多次都没有实现效果,研究了半天发现是页面缓存的问题,于是在head标签内加载css文件的时候改成了以下写法 )?>"> ==================================== 2020年6月28日 16:03:03 ...
  • 一招解决微信小程序中的H5缓存问题

    千次阅读 2021-08-20 23:03:39
    一招解决微信小程序中的H5缓存问题 1、问题描述 开发过程中,为了更新代码方便,往往会在小程序中嵌入H5页面。但问题来了,小程序原生代码更新版本后,简单的从微信中删除或者代码强刷就可以解决缓存问题,但小程序...
  • @TOC微信小程序webview(安卓)兼容localStorage 和cookie 一.出现问题 最近一一个项目小程序webview页面使用到小程序穿过去的数据进行调用,在苹果的手机都是没有用问题的,一直好好的,后面测试拿来了国产的各大...
  • 一种是文件url后面加随机参数,保证每次的参数不一样,浏览器就不会去取缓存的数据 比如原来是http://localhost:8081/pyqms/jsp/mobile/js/my.js,改成http://localhost:8081/pyqms/jsp/mobile/js/my.js?aa=随机...
  • 小程序webview缓存问题

    千次阅读 2019-12-30 14:19:54
    每次修改H5的项目,发现小程序里面没有办法,需要手动清楚微信数据,但是对于用户来说不可能的 在webview的页面添加时间戳 t=${new Date().getTime()} onLoad(query) { let url = decodeURIComponent(query.url) ...
  • 解决小程序webview缓存机制

    千次阅读 2019-10-08 01:59:06
    在打开webview的时候在地址后面加上随机数或者字符串 并且H5页面使用文件hash 转载于:https://www.cnblogs.com/ckAng/p/9474244.html
  • 微信小程序刷新webview页面问题

    万次阅读 2018-03-09 17:41:47
    一、背景 &nbsp;&nbsp;&nbsp;&nbsp;...我这边小程序的首页使用的是web-view...二、微信小程序的生命周期函数 生命周期函数 onLoad: 页面加载 一个页面只会调用一次。 接收页面参数可以获取wx.navi...
  • 这篇文章主要介绍了微信小程序webview与h5通过postMessage实现实时通讯的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 ...
  • 微信的文档中有一个章节说明了『 原生组件的使用限制 』有这么一段话 『由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制: 原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为...
  • 最近做一个小程序项目,特点是页面超多,开发周期紧,性能要求不高,都用小程序原生语法写的话 估计要分包,这样就复杂了.于是项目采用了webview嵌套H5的方案,使用vue开发,周期短,开发效率高. 写H5页面不可避免的会遇到...
  • 关于小程序web-view缓存的清理

    千次阅读 2020-12-18 10:47:05
    <web-view :src="url" a:if="url"></web-view> 由于webview跳到h5界面是vue写的单页面应用 ... 将微信从后台退出再打开并重新进入小程序; 修改 Nginx 关于 Cache-Control 的配置; ...
  • 微信小程序中获取时间戳IOS不兼容

    千次阅读 2018-01-30 16:39:43
    一、时间转换问题: 就是new Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下 1.替换”-“为”/“ ...var thisData = r_that.data.thisDate.replace(/-/g, '/');...
  • 微信小程序测试方案

    千次阅读 2019-05-19 15:13:42
    一个view模块对应一个webview组件,小程序支持多个view存在,view模块通过微信jsbridge对象来跟后台通信。 小程序类型 小程序主要分为三个版本类型:开发版、体验版、正式版。开发板和体验版无需审核,需要给微信号...
  • 这是写在h5页面里面的 window.addEventListener('popstate', (event) => { wx.miniProgram.navigateBack(); }); const code = getSearch('code'); // 伪代码,获取查询参数 ... // 微信环境 const redirectUrl =

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,238
精华内容 1,695
关键字:

微信小程序webview缓存

微信小程序 订阅