uni-app 使用uni-badge在支付宝小程序会提示警告，内存循环调用

uni-app 使用uni-badge在支付宝小程序会提示警告，内存循环调用

开发环境 版本号 项目创建方式
Windows 22631.3447 HBuilderX
HBuilderX 4.08
第三方开发者工具 3.8.21 2024.04.09
基础库 2.9.6

示例代码：

<uni-badge size="small" :text="5" absolute="rightTop" :offset="[15,5]">  
    <image src="@/static/icon/fp/index_msg.png" alt="" class="img" mode="aspectFit" @click="handleClickMsg" />  
</uni-badge>

操作步骤：

我就用了这么三行，按照官方文档写的。

<uni-badge size="small" :text="5" absolute="rightTop" :offset="[15,5]">  
    <image src="@/static/icon/fp/index_msg.png" alt="" class="img" mode="aspectFit" @click="handleClickMsg" />  
</uni-badge>

预期结果：

正常在图片右上角出现角标。

实际结果：

在本地模拟器是正常的，不会有警告，只有真机调试，或者线上版本才会变得很卡。

bug描述：

在真机调试的时候控制台会报警告：[Vue warn]: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
会把小程序搞得巨卡，根本用不了。


更多关于uni-app 使用uni-badge在支付宝小程序会提示警告，内存循环调用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

似乎是offset的问题，这个去掉就好了。但是去掉了就不是想要的效果了= =

更多关于uni-app 使用uni-badge在支付宝小程序会提示警告，内存循环调用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还有一个就是这个似乎会让我的页面的js代码被识别成html？js的注释会变成<-- sth -->这种形式而不是 //

在使用 uni-badge 组件时，支付宝小程序可能会提示“内存循环调用”的警告。这个问题通常是由于 uni-badge 组件的内部实现在小程序环境中存在某些问题，导致频繁触发更新或渲染，从而引发内存循环调用。

解决方案

以下是一些可能的解决方案：

1. 检查 uni-badge 的属性和使用方式

  • 确保 uni-badge 的属性（如 text、type 等）是静态的，或者只在必要时更新。
  • 避免在 onPageScroll、onReachBottom 等频繁触发的事件中动态更新 uni-badge 的属性。
  • 示例：
    <uni-badge :text="badgeText" type="error"></uni-badge>

2. 使用条件渲染或 v-if

  • 如果 uni-badge 的内容是动态的，可以尝试使用 v-if 来控制组件的渲染，避免不必要的更新。
  • 示例：
    <uni-badge v-if="showBadge" :text="badgeText" type="error"></uni-badge>

3. 替换 uni-badge 为自定义组件

  • 如果问题无法解决，可以考虑使用自定义的徽章组件，避免依赖 uni-badge。
  • 示例：
    <view class="custom-badge">{{ badgeText }}</view>
<style>
.custom-badge {
  background-color: red;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
}
</style>

4. 升级 uni-app 版本

  • 确保使用的是最新版本的 uni-app 和 uni-badge 组件，官方可能已经修复了相关问题。
  • 运行以下命令更新依赖：
    npm update uni-app

5. 在支付宝小程序中排查问题

  • 在支付宝小程序开发工具中，使用调试工具查看具体的调用堆栈，定位问题来源。
  • 如果问题确实是由 uni-badge 组件引起的，可以向 uni-app 官方团队反馈问题。

6. 临时禁用警告

  • 如果问题不影响功能，可以临时禁用支付宝小程序的警告。在 app.json 或 page.json 中添加以下配置：
    {
  "rendererOptions": {
    "warning": false
  }
}
回到顶部