uni-app 微信小程序热更新问题

uni-app 微信小程序热更新问题

类别 信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.3.4
第三方开发者工具版本号 1.05.2111300
基础库版本号 2.21.2
项目创建方式 HBuilderX

示例代码：

<template>  
  <view class="container">  
    <button class="item" @click="showDrawer" size="mini">打开抽屉</button>  
    <uni-drawer ref="xx" mode="left">  
      <view>aaaaaaaaaaa</view>  
    </uni-drawer>  
  </view>  
</template>  

<script setup>  
import { ref } from 'vue'  

let xx = ref(null)  

function showDrawer() {  
  xx.value.open()  
}  
</script>  

<style scoped>  
.item {  
  margin: 20rpx;  
  padding: 20rpx;  
}  
</style>

操作步骤：

  1. 编译上述示例至微信小程序工具，点击按钮正常打开drawer。
  2. 随便修改(加空格或换行)一下代码，保存后触发热更新。
  3. 再次点击按钮，打不开drawer了。
  4. 重新编译运行才可以正常打开drawer。

预期结果：

热更新后可正常打开drawer

实际结果：

热更新后打不开drawer

bug描述：

页面上点击按钮通过ref open打开uni-drawer，首次启动编译后在小程序开发工具正常可以打开，再随便编辑一下页面再保存，开发工具里就打不开drawer了。

即微信小程序热更新有问题


更多关于uni-app 微信小程序热更新问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

预计下个版本修复，已加分，感谢您的反馈！

更多关于uni-app 微信小程序热更新问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilder X 3.3.5已修复，请升级

根据你提供的信息，这个问题是 uni-app 在微信开发者工具中热更新时的一个已知问题。主要原因是热更新后，组件的引用关系可能没有正确重建，导致 ref 失效。

具体到你的代码，在热更新后，xx.value 可能变为 null 或无法正确指向 uni-drawer 组件实例，因此调用 xx.value.open() 会失败。

临时解决方案：

  1. 使用 getCurrentInstance 获取实例：在 <script setup> 中，可以通过 getCurrentInstance() 获取当前组件实例，然后通过 proxy.$refs 来访问 ref。这种方式在热更新后可能更稳定。
    import { ref, getCurrentInstance } from 'vue'

const instance = getCurrentInstance()

function showDrawer() {
  instance.proxy.$refs.xx.open()
}
回到顶部