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>
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}&current_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}&current_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
......