hookehuyr

fix(Activities): 修复 WebView 缓存导致的页面不更新问题

问题描述:
- 用户报告活动页面 WebView 内容总是显示旧版本
- 即使后端 H5 页面已更新,小程序仍显示缓存内容

解决方案:
1. 添加 key 属性强制重新渲染
   - 给 web-view 组件添加 :key="webUrl"
   - URL 变化时强制销毁并重新创建 WebView

2. 添加时间戳参数破坏缓存
   - 在 URL 末尾添加 &_t=${timestamp} 参数
   - 确保每次请求的 URL 都不同,避免缓存命中
   - 即使没有位置参数也添加时间戳

3. 增强调试日志
   - 添加表情符号标记(✅ ❌ 🔗 📋)
   - 输出完整 URL 和长度信息
   - 便于排查缓存问题

测试建议:
- 清除小程序缓存后重新编译
- 查看控制台日志确认 URL 包含时间戳参数
- 验证每次进入页面 _t 值都不同

影响文件:
- src/pages/Activities/index.vue

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
<template>
<view class="activities-container">
<!-- WebView内容 -->
<!-- 添加 key 属性,强制 WebView 在 URL 变化时重新渲染 -->
<web-view
v-if="webUrl"
:src="webUrl"
:key="webUrl"
class="web-view"
@message="handleMessage"
@load="handleLoad"
......@@ -107,13 +109,19 @@ const handleGoBack = () => {
/**
* 构建包含位置参数的URL
* 添加时间戳参数以破坏缓存,确保每次加载都是最新内容
*/
const buildUrlWithLocation = (lng, lat, openid, discount_title, activityId) => {
if (lng && lat && baseUrl.value) {
const separator = baseUrl.value.includes('?') ? '&' : '?'
return `${baseUrl.value}${separator}current_lng=${lng}&current_lat=${lat}&openid=${openid}&discount_title=${discount_title}&activityId=${activityId}`
// 添加时间戳参数 _t 确保每次 URL 都不同,强制 WebView 重新加载
const timestamp = Date.now()
return `${baseUrl.value}${separator}current_lng=${lng}&current_lat=${lat}&openid=${openid}&discount_title=${discount_title}&activityId=${activityId}&_t=${timestamp}`
}
return baseUrl.value || ''
// 如果没有位置参数,也添加时间戳破坏缓存
const separator = baseUrl.value.includes('?') ? '&' : '?'
const timestamp = Date.now()
return baseUrl.value ? `${baseUrl.value}${separator}_t=${timestamp}` : ''
}
/**
......@@ -121,13 +129,15 @@ const buildUrlWithLocation = (lng, lat, openid, discount_title, activityId) => {
*/
const initPageData = async () => {
try {
console.log('=== WebView 初始化开始 ===')
// 获取地图URL
const mapUrlResponse = await getMapUrlAPI()
if (mapUrlResponse.code && mapUrlResponse.data?.url) {
baseUrl.value = mapUrlResponse.data.url
console.log('获取到的地图URL:', baseUrl.value)
console.log('获取到的地图URL:', baseUrl.value)
} else {
console.error('获取地图URL失败:', mapUrlResponse.msg)
console.error('获取地图URL失败:', mapUrlResponse.msg)
// 显示错误提示,不使用默认URL
error.value = true
loading.value = false
......@@ -145,7 +155,7 @@ const initPageData = async () => {
const instance = Taro.getCurrentInstance()
const { current_lng, current_lat, discount_title, activityId } = instance.router?.params || {}
console.log('接收到的位置参数:', { current_lng, current_lat, discount_title, activityId })
console.log('接收到的位置参数:', { current_lng, current_lat, discount_title, activityId })
// 处理用户信息
const openid = data?.user.openid || ''
// 构建完整的URL
......@@ -157,10 +167,11 @@ const initPageData = async () => {
activityId
)
console.log('最终WebView URL:', webUrl.value)
console.log('🔗 最终WebView URL (完整):', webUrl.value)
console.log('📋 URL 长度:', webUrl.value.length, '字符')
}
} catch (error) {
console.error('初始化页面数据失败:', error)
console.error('初始化页面数据失败:', error)
// 显示错误状态,不使用默认URL
error.value = true
loading.value = false
......