微信小程序webview页面不刷新，webview缓存页面不刷新，小程序webview页面不刷新，小程序webview地址追加参数页面还是缓存，解决办法_微信小程序webview ios不会刷新路径

项目需求，在微信小程序首页的 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})
1
2
3
4
5
6
7
8
9

后台传递过来的地址类似于这样：
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})
1
2
3
4
5
6
7
8
9
10

这样试了一下，不行…，在 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})
1
2
3
4
5
6
7
8
9
10

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

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})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这时候又不行了，在 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})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

但是这样的总感觉破坏了浏览器缓存机制是不是不太好，缓存就是为了方便下一次访问的时候能快一点，不缓存了还快个 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})
1
2
3
4
5
6
7
8
9

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