uni-app open-data 组件缺少 binderror 事件

uni-app open-data 组件缺少 binderror 事件

示例代码：

<open-data v-if="userStore.info.groupId" type="groupName" :open-gid="userStore.info.groupId" [@binderror](/user/binderror)="onErrorGroup"></open-data>  

// 群名称显示错误
const onErrorGroup = (e)=>{
Tip.toast('不在群内')
}

操作步骤：

<open-data v-if="userStore.info.groupId" type="groupName" :open-gid="userStore.info.groupId" [@binderror](/user/binderror)="onErrorGroup"></open-data>  

// 群名称显示错误
const onErrorGroup = (e)=>{
Tip.toast('不在群内')
}

预期结果：

微信用户不在群内时触发 binderror 提示不在群内

实际结果：

没有反应

示例图片

bug描述：

微信小程序的 open-data 有个 binderror 事件，微信群名称不显示时会提示错误。uniapp的 open-data 没有这个事件 硬写@binderror=“onErrorGroup” 也不会触发。

信息项 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
PC开发环境版本 windows 11
HBuilderX类型 正式
HBuilderX版本 4.17
第三方开发者工具 1.06.2402040
基础库版本 3.3.0
项目创建方式 HBuilderX

更多关于uni-app open-data 组件缺少 binderror 事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app open-data 组件缺少 binderror 事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，<open-data> 组件用于展示微信开放平台的数据，比如用户昵称、头像等。然而，<open-data> 组件确实没有提供 binderror 事件来处理数据加载失败的情况。这是 uni-app 框架或微信小程序原生组件的一个限制。

如果你需要处理 open-data 组件加载失败的情况，可以考虑以下几种方法：

1. 使用 v-if 控制显示

你可以通过 v-if 或 v-show 来控制 open-data 组件的显示，结合其他逻辑来判断数据是否加载成功。

<template>
  <view>
    <open-data v-if="isDataLoaded" type="userNickName"></open-data>
    <view v-else>数据加载失败</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDataLoaded: true // 根据实际情况设置
    };
  }
};
</script>

2. 使用 wx.getUserInfo 代替

如果你需要获取用户信息，并且希望有更多的控制权，可以使用 wx.getUserInfo API 来获取用户信息，并根据返回结果处理错误。

<template>
  <view>
    <view v-if="userInfo">{{ userInfo.nickName }}</view>
    <view v-else>数据加载失败</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null
    };
  },
  mounted() {
    wx.getUserInfo({
      success: (res) => {
        this.userInfo = res.userInfo;
      },
      fail: (err) => {
        console.error('获取用户信息失败', err);
      }
    });
  }
};
</script>

3. 自定义错误处理逻辑

如果你仍然需要使用 open-data 组件，可以通过其他方式自定义错误处理逻辑。例如，设置一个定时器来检测 open-data 是否加载成功。

<template>
  <view>
    <open-data type="userNickName" id="openData"></open-data>
    <view v-if="isError">数据加载失败</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isError: false
    };
  },
  mounted() {
    setTimeout(() => {
      const openData = document.getElementById('openData');
      if (!openData || !openData.innerText) {
        this.isError = true;
      }
    }, 3000); // 3秒后检测是否加载成功
  }
};
</script>
回到顶部