当小程序内用web-view组件嵌套了h5页面,当h5页面更换了内容后,小程序里的h5页面不更新怎么办?

当小程序内用web-view组件嵌套了h5页面,当h5页面更换了内容后,小程序里的h5页面不更新怎么办?

这个是小程序缓存了h5的内容造成的,可以在h5链接后面拼接个参数,加上时间戳就好了,代码如下

<view>
  <web-view src="{{src}}"></web-view>
</view>
Page({
  data: {
    src: `https://xxx/xxx/xxx/xxx.html?timestamp=${new Date().getTime()}#wechat_redirect`,
  },
});

参考文章:https://blog.csdn.net/qq_37210523/article/details/115534130
参考文章讲得很详细,其中第二点讲了在h5源码页面的head头部添加不缓存的配置,经过测试,如果加了不缓存的配置之后,会导致每次加载h5页面都会请求2~3s,因为业务需要,会频繁打开h5页面,这样子体验不好,就没加了。因为配置了上面代码后问题已经得到了解决。

### uni-app 小程序嵌套 H5 页面数据传递方法 #### 实现原理 在uni-app的小程序环境中,通过`<web-view>`组件可以加载外部H5页面。为了实现从小程序H5的数据传输,可以通过URL参数的方式,在加载H5页面时将所需数据作为查询字符串附加到目标网址后面。 #### 代码示例 ##### 小程序端配置 当需要向H5页面传递数据时,可以在设置`src`属性的同时构建带有参数的完整路径: ```html <!--小程序中定义web-view --> <template> <view> <!-- 使用v-bind动态绑定url地址,并附带要送给H5的数据 --> <web-view :src="'https://example.com/h5page?data=' + encodeURIComponent(JSON.stringify(data))"></web-view> </view> </template> <script> export default { data() { return { // 需要传递至H5的数据对象 data: { key1: 'value1', key2: 'value2' } }; }, }; </script> ``` 上述代码展示了如何利用JavaScript中的`JSON.stringify()`函数序列化复杂类型(如对象),并通过`encodeURIComponent()`编码确保特殊字符会破坏URL结构[^1]。 ##### 接收方(H5)解析逻辑 对于接收到的请求,H5页面则需读取并解析这些参数: ```javascript // 获取当前页面URL上的query string部分 const queryString = window.location.search; // 解析queryString得到键值对形式的对象 function getQueryParams(qs){ qs = qs.split("+").join(" "); var params={}, tokens, re=/\[(.*?)\]/g, // 匹配[]内的内容用于处理数组型参数 m; tokens=qs.substring(1).split("&"); for(var i=0;i<tokens.length;i++){ var p=tokens[i].split('='); if (m=re.exec(p[0])){ var targetKey=m[1]; if(!params[p[0]]){ params[p[0]]=[]; } params[p[0]][targetKey]=decodeURIComponent((p[1]+''==='true'||p[1]+''==='false')?(p[1]==='true'?true:false):p[1]); }else{ if (!/[^\w\-\.]/.test(p[0])){ params[p[0]]=decodeURIComponent(p[1]); } } } try { // 如果是json格式,则尝试反序列化成js对象 const jsonDataStr=params['data']; delete params['data']; // 移除原始未解码本 Object.assign(params, JSON.parse(decodeURIComponent(jsonDataStr))); } catch(e){} return params; } console.log('Received Data:', getQueryParams(queryString)); ``` 此段脚本负责提取并转换来自小程序的输入信息,使其能够被H5应用正常理解和使用[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TANGYC_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值