小程序解决视频缓存问题

昨天在开发中遇到一个问题，我们的抖音小程序中有一个视频，地址为后端提供的固定地址，目的是为了将来视频如果有更换只需要后端更新地址中对应的视频即可，小程序不需要重新发版审核

但是这时候出现了一个缓存问题！

1. 首次打开时视频链接的内容为正确的视频1
2. 将视频的链接内容更改为视频2
3. 此时苹果手机重新打开小程序时视频链接已经切换为视频2
4. 不过安卓手机出现问题，没有展示视频2，而是读取了缓存展示视频1

期间还有一个安卓的测试机出现了一个很离谱的问题，首次打开时展示视频1，更换视频后打开展示视频2，退出重新打开小程序又回到了视频1，非常离谱。。。

查询了一些原因后发现在小程序端通常都会出现这种类似的情况，解决办法基本都是给视频的链接拼接一个时间戳，通过更改链接地址，让其不会读取缓存，而是获取最新的链接资源

<!-- VideoPlayer 为项目中封装的一个视频组件 -->
<VideoPlayer :videoSrc="`https://xxx.com/yyy.mp4?${new Date().getTime()}`"/>

但是与此同时带来了一个新的问题，就是让我的页面某一个组件的吸顶功能失效

吸顶功能逻辑

因为框架库中提供的对应组件存在问题，目前尚未处理，所以需要自己实现吸顶功能

• 监听页面的滚动事件，当元素的顶部移动到页面可视区域的顶部时，将一个响应式变量修改为 true
• 从而让需要吸顶的元素具有吸顶对应的样式

思考问题原因

• 吸顶功能触发的时候会更改一个响应式数据，修改完毕后会触发 虚拟DOM的 更新
• 虚拟DOM 更新的时候发现 video 标签中的路径发生了变化，所以重新渲染了视频标签对应区域
• 最终导致页面在触发吸顶时立即回到顶部

解决方案

• 将直接拼接时间戳更改为在 script 中书写一个普通变量，然后拼接在路径后

<script setup lang="ts">
const newDate: number = new Date().getTime();
</script>
<VideoPlayer :videoSrc="`https://xxx.com/yyy.mp4?${newDate}`"/>