uni-app引入uni-im后用户列表页面无法显示注册用户名

uni-app引入uni-im后用户列表页面无法显示注册用户名

问题

使用了uni-im后，说明文档中关于“基于老版uni-id(版本号：3.x) 开发的项目，需要如下改造： 在登录成功和token续期后，绑定当前账号与设备推送标识的关联关系。示例代码：**”

我想问一下，这段代码是需要在哪个文件里添加呢？

const uniIdCo = uniCloud.importObject("uni-id-co", {customUI: true})
uni.getPushClientId({
success: async function(e) {
console.log(e)
let pushClientId = e.cid
let res = await uniIdCo.setPushCid({
pushClientId
})
console.log('getPushClientId', res);
},
fail(e) {
console.error(e)
}
})
信息 描述
版本号 3.x

更多关于uni-app引入uni-im后用户列表页面无法显示注册用户名的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

放在登录之后

更多关于uni-app引入uni-im后用户列表页面无法显示注册用户名的实战教程也可以访问 https://www.itying.com/category-93-b0.html


this.$H.post(“user/app/smsLogin”, this.form).then(res => { console.log(“user/app/smsLogin”,res) if (res.code == 0) { let token = res.token let uniIdToken = res.uniIdToken // 存储你自己项目的token到storage（仅供参考，根据你自己的登录逻辑而定） uni.setStorageSync(‘token’, token) uni.setStorageSync(‘userInfo’, res.userInfo) // 存储uni-id的token和token过期时间到storage（必须按以下格式存储） uni.setStorageSync(‘uni_id_token_expired’, uniIdToken.tokenExpired) uni.setStorageSync(‘uni_id_token’, uniIdToken.token) // 获取push的ClientId同步到uni-id uni.getPushClientId({ success: async function(e) { console.log(‘async’,e) let pushClientId = e.cid console.log(‘pushClientId’,pushClientId);
let res = await uniIdCo.setPushCid({
pushClientId
})
console.log(‘getPushClientId’, res);
},
fail(e) {
console.log(‘fail’,e)
}
})
//更新本地用户信息
uniIdMutations.updateUserInfo()
// 通知其他模块登录成功
uni.$emit(‘uni-id-pages-login-success’)
uni.switchTab({
url: ‘/pages/index/index’
});
uni.hideLoading();
}
})

在uni-app中引入uni-im后，如果遇到用户列表页面无法显示注册用户名的问题，这通常与数据绑定或API调用相关。下面我将提供一个简单的代码示例，展示如何在uni-app中集成uni-im并正确显示用户列表及其用户名。

首先，确保你已经在项目中正确引入了uni-im插件，并在manifest.json中进行了配置。

1. 引入uni-im SDK

在main.js中引入uni-im SDK（如果尚未引入）：

import uniIm from '@dcloudio/uni-im';

Vue.prototype.$uniIm = uniIm;

2. 获取用户列表

在用户列表页面（如UserList.vue），使用uni-im的API获取用户列表，并绑定到页面数据上。

<template>
  <view>
    <view v-for="user in userList" :key="user.id">
      {{ user.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userList: []
    };
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    async getUserList() {
      try {
        const res = await this.$uniIm.getContactList();
        if (res.code === 0) {
          // 假设返回的数据结构为 { code: 0, data: [{ id, name, ... }] }
          this.userList = res.data.map(user => ({
            id: user.id,
            name: user.name || '未命名用户' // 处理未设置用户名的情况
          }));
        } else {
          console.error('获取用户列表失败', res.msg);
        }
      } catch (error) {
        console.error('获取用户列表时发生错误', error);
      }
    }
  }
};
</script>

3. 注意事项

  • API权限：确保你的应用有权限调用uni-im的相关API。
  • 数据格式：检查getContactList返回的数据格式，确保正确解析用户名。
  • 错误处理：在实际应用中，应添加更多的错误处理和用户反馈机制。
  • 用户注册：确保用户在注册时已正确设置了用户名，或在获取用户列表后进行必要的处理（如上例中的name || '未命名用户'）。

通过上述代码，你应该能够在uni-app中正确显示用户列表及其用户名。如果问题仍然存在，请检查uni-im的文档和API调用日志，以确保所有步骤都正确无误。

回到顶部