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>
Showing
1 changed file
with
18 additions
and
7 deletions
| 1 | <template> | 1 | <template> |
| 2 | <view class="activities-container"> | 2 | <view class="activities-container"> |
| 3 | <!-- WebView内容 --> | 3 | <!-- WebView内容 --> |
| 4 | + <!-- 添加 key 属性,强制 WebView 在 URL 变化时重新渲染 --> | ||
| 4 | <web-view | 5 | <web-view |
| 5 | v-if="webUrl" | 6 | v-if="webUrl" |
| 6 | :src="webUrl" | 7 | :src="webUrl" |
| 8 | + :key="webUrl" | ||
| 7 | class="web-view" | 9 | class="web-view" |
| 8 | @message="handleMessage" | 10 | @message="handleMessage" |
| 9 | @load="handleLoad" | 11 | @load="handleLoad" |
| ... | @@ -107,13 +109,19 @@ const handleGoBack = () => { | ... | @@ -107,13 +109,19 @@ const handleGoBack = () => { |
| 107 | 109 | ||
| 108 | /** | 110 | /** |
| 109 | * 构建包含位置参数的URL | 111 | * 构建包含位置参数的URL |
| 112 | + * 添加时间戳参数以破坏缓存,确保每次加载都是最新内容 | ||
| 110 | */ | 113 | */ |
| 111 | const buildUrlWithLocation = (lng, lat, openid, discount_title, activityId) => { | 114 | const buildUrlWithLocation = (lng, lat, openid, discount_title, activityId) => { |
| 112 | if (lng && lat && baseUrl.value) { | 115 | if (lng && lat && baseUrl.value) { |
| 113 | const separator = baseUrl.value.includes('?') ? '&' : '?' | 116 | const separator = baseUrl.value.includes('?') ? '&' : '?' |
| 114 | - return `${baseUrl.value}${separator}current_lng=${lng}¤t_lat=${lat}&openid=${openid}&discount_title=${discount_title}&activityId=${activityId}` | 117 | + // 添加时间戳参数 _t 确保每次 URL 都不同,强制 WebView 重新加载 |
| 118 | + const timestamp = Date.now() | ||
| 119 | + return `${baseUrl.value}${separator}current_lng=${lng}¤t_lat=${lat}&openid=${openid}&discount_title=${discount_title}&activityId=${activityId}&_t=${timestamp}` | ||
| 115 | } | 120 | } |
| 116 | - return baseUrl.value || '' | 121 | + // 如果没有位置参数,也添加时间戳破坏缓存 |
| 122 | + const separator = baseUrl.value.includes('?') ? '&' : '?' | ||
| 123 | + const timestamp = Date.now() | ||
| 124 | + return baseUrl.value ? `${baseUrl.value}${separator}_t=${timestamp}` : '' | ||
| 117 | } | 125 | } |
| 118 | 126 | ||
| 119 | /** | 127 | /** |
| ... | @@ -121,13 +129,15 @@ const buildUrlWithLocation = (lng, lat, openid, discount_title, activityId) => { | ... | @@ -121,13 +129,15 @@ const buildUrlWithLocation = (lng, lat, openid, discount_title, activityId) => { |
| 121 | */ | 129 | */ |
| 122 | const initPageData = async () => { | 130 | const initPageData = async () => { |
| 123 | try { | 131 | try { |
| 132 | + console.log('=== WebView 初始化开始 ===') | ||
| 133 | + | ||
| 124 | // 获取地图URL | 134 | // 获取地图URL |
| 125 | const mapUrlResponse = await getMapUrlAPI() | 135 | const mapUrlResponse = await getMapUrlAPI() |
| 126 | if (mapUrlResponse.code && mapUrlResponse.data?.url) { | 136 | if (mapUrlResponse.code && mapUrlResponse.data?.url) { |
| 127 | baseUrl.value = mapUrlResponse.data.url | 137 | baseUrl.value = mapUrlResponse.data.url |
| 128 | - console.log('获取到的地图URL:', baseUrl.value) | 138 | + console.log('✅ 获取到的地图URL:', baseUrl.value) |
| 129 | } else { | 139 | } else { |
| 130 | - console.error('获取地图URL失败:', mapUrlResponse.msg) | 140 | + console.error('❌ 获取地图URL失败:', mapUrlResponse.msg) |
| 131 | // 显示错误提示,不使用默认URL | 141 | // 显示错误提示,不使用默认URL |
| 132 | error.value = true | 142 | error.value = true |
| 133 | loading.value = false | 143 | loading.value = false |
| ... | @@ -145,7 +155,7 @@ const initPageData = async () => { | ... | @@ -145,7 +155,7 @@ const initPageData = async () => { |
| 145 | const instance = Taro.getCurrentInstance() | 155 | const instance = Taro.getCurrentInstance() |
| 146 | const { current_lng, current_lat, discount_title, activityId } = instance.router?.params || {} | 156 | const { current_lng, current_lat, discount_title, activityId } = instance.router?.params || {} |
| 147 | 157 | ||
| 148 | - console.log('接收到的位置参数:', { current_lng, current_lat, discount_title, activityId }) | 158 | + console.log('✅ 接收到的位置参数:', { current_lng, current_lat, discount_title, activityId }) |
| 149 | // 处理用户信息 | 159 | // 处理用户信息 |
| 150 | const openid = data?.user.openid || '' | 160 | const openid = data?.user.openid || '' |
| 151 | // 构建完整的URL | 161 | // 构建完整的URL |
| ... | @@ -157,10 +167,11 @@ const initPageData = async () => { | ... | @@ -157,10 +167,11 @@ const initPageData = async () => { |
| 157 | activityId | 167 | activityId |
| 158 | ) | 168 | ) |
| 159 | 169 | ||
| 160 | - console.log('最终WebView URL:', webUrl.value) | 170 | + console.log('🔗 最终WebView URL (完整):', webUrl.value) |
| 171 | + console.log('📋 URL 长度:', webUrl.value.length, '字符') | ||
| 161 | } | 172 | } |
| 162 | } catch (error) { | 173 | } catch (error) { |
| 163 | - console.error('初始化页面数据失败:', error) | 174 | + console.error('❌ 初始化页面数据失败:', error) |
| 164 | // 显示错误状态,不使用默认URL | 175 | // 显示错误状态,不使用默认URL |
| 165 | error.value = true | 176 | error.value = true |
| 166 | loading.value = false | 177 | loading.value = false | ... | ... |
-
Please register or login to post a comment