Ye Plugins

userInfo 字段对象结构：

{
    "portrait":"https://img1.baidu.com/it/u=440202259,2734237708&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    "userId":"1",
    "alias":"",
    "name":"融云用户 1",
    "extra":""
}

faceList: ['url1', 'url2'];

<template>
  <view>
    <!-- 此处仅为演示初始化时消息数组结构传入，未给options等赋值，请勿直接复制使用 -->
    <yeim-chat-page :messages="messages" />
  </view>
</template>
<script>
  export default {
    data() {
      return {
        messages: [
          {
            ID: '144115242122962694-1666581007-32219913',
            conversationID: 'C2C2',
            conversationType: 'C2C',
            time: 1666581008,
            sequence: 1109260003,
            clientSequence: 1109260003,
            random: 32219913,
            priority: 'Normal',
            nick: '妖精不会飞',
            avatar:
              'https://img1.baidu.com/it/u=440202259,2734237708&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            isPeerRead: true,
            nameCard: '',
            _elements: [
              {
                type: 'TIMTextElem',
                content: {
                  text: '你好',
                },
              },
            ],
            isPlaceMessage: 0,
            isRevoked: false,
            from: '1',
            to: '2',
            flow: 'out',
            isSystemMessage: false,
            protocol: 'JSON',
            isResend: false,
            isRead: true,
            status: 'success',
            _onlineOnlyFlag: false,
            _groupAtInfoList: [],
            _relayFlag: false,
            atUserList: [],
            cloudCustomData: '',
            isDeleted: false,
            isModified: false,
            _isExcludedFromUnreadCount: false,
            _isExcludedFromLastMessage: false,
            clientTime: 1666581007,
            senderTinyID: '144115242122962694',
            readReceiptInfo: {},
            needReadReceipt: false,
            version: 0,
            isBroadcastMessage: false,
            payload: {
              text: '你好',
            },
            type: 'TIMTextElem',
          },
        ],
      };
    },
  };
</script>

[
  {
    "ID": "144115242311226482-1686049232-82482770",
    "conversationID": "C2Cuser2",
    "conversationType": "C2C",
    "time": 1686049232,
    "sequence": 1900320001,
    "clientSequence": 1900320001,
    "random": 82482770,
    "priority": "Normal",
    "nick": "妖精不会飞",
    "avatar": "https://img1.baidu.com/it/u=440202259,2734237708&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    "isPeerRead": false,
    "nameCard": "",
    "_elements": [
      {
        "type": "TIMCustomElem",
        "content": {
          "data": "tips",
          "description": "群主邀请了xxx、lll、zzz进入了群聊",
          "extension": ""
        }
      }
    ],
    "isPlaceMessage": 0,
    "isRevoked": false,
    "from": "1",
    "to": "user2",
    "flow": "out",
    "isSystemMessage": false,
    "protocol": "JSON",
    "isResend": false,
    "isRead": true,
    "status": "success",
    "_onlineOnlyFlag": false,
    "_groupAtInfoList": [],
    "_relayFlag": false,
    "atUserList": [],
    "cloudCustomData": "",
    "isDeleted": false,
    "isModified": false,
    "_isExcludedFromUnreadCount": false,
    "_isExcludedFromLastMessage": false,
    "clientTime": 1686049232,
    "senderTinyID": "144115242311226482",
    "readReceiptInfo": {},
    "needReadReceipt": false,
    "version": 0,
    "isBroadcastMessage": false,
    "payload": {
      "data": "tips",
      "description": "啊实打实大大是的",
      "extension": ""
    },
    "type": "TIMCustomElem"
  }
]

[
  {
    "sequence": 5740984,
    "messageId": "405076915945541-1681032133432-1",
    "userId": "user1",
    "conversationId": "user2",
    "conversationType": "private",
    "direction": "out",
    "from": "user1",
    "fromUserInfo": {
      "nickname": "没有毛病",
      "avatarUrl": "https://api.multiavatar.com/99521.png"
    },
    "to": "user2",
    "type": "custom",
    "body": {
      "custom": {
        "type": "tips",
        "data": "群主邀请了xxx、lll、zzz进入了群聊"
      }
    },
    "extra": "",
    "isRead": 0,
    "isRevoke": 0,
    "isDeleted": 0,
    "status": "success",
    "receive": 0,
    "time": 1681032133432
  }
]

<template>
  <view>
    <!-- 此处仅为演示事件，未初始化参数，请勿直接复制使用 -->
    <yeim-chat-page @avatar-action="@avatarAction" />
  </view>
</template>
<script>
  export default {
    data() {
      return {};
    },
    methods: {
      avatarAction(e) {
        console.log(e);
        /*
        当用户点击消息列表的头像后，此处回调结果：
        {
          "type":"avatarAction",
          "timeStamp":1666691669115,
          "target":{
              "id":"",
              "dataset":{

              },
              "offsetLeft":0,
              "offsetTop":0
          },
          "currentTarget":{
              "id":"",
              "dataset":{

              },
              "offsetLeft":0,
              "offsetTop":0
          },
          "detail":{
              "messageId":"144115242122962694-1666684242-36090699"
          },
          "stopPropagation":"function() { [native code] }"
        } 
        */
      },
    },
  };
</script>

<template>
  <view>
    <!-- 此处仅为演示方法，未初始化参数，请勿直接复制使用 -->
    <yeim-chat-page ref="chatpage" />
  </view>
</template>
<script>
  export default {
    data() {
      return {};
    },
    onReady() {
      this.$refs.chatpage.setBadge(5);
    },
  };
</script>

<template>
  <view>
    <!-- 此处仅为演示方法，未初始化参数，请勿直接复制使用 -->
    <yeim-chat-page ref="chatpage" />
  </view>
</template>
<script>
  export default {
    data() {
      return {};
    },
    onReady() {
      this.$refs.chatpage.setOnlineStatus(true);
    },
  };
</script>

<template>
  <view>
    <!-- 此处仅为演示方法，未初始化参数，请勿直接复制使用 -->
    <yeim-chat-page ref="chatpage" @load-more="loadMore" />
  </view>
</template>
<script>
  export default {
    data() {
      return {};
    },
    method: {
      loadMore() {
        setTimeout(() => {
          // 模拟加载历史记录
          let messages = getHistoryList();
          // 完成加载历史记录
          this.$refs.chatpage.finishLoadMore(messages);
          // TODO
          // 如果没有更多历史记录
          // this.$refs.chatpage.finishLoadMore([]);
        }, 2000);
      },
    },
  };
</script>

<template>
  <view>
    <!-- 此处仅为演示方法，未初始化参数，请勿直接复制使用 -->
    <yeim-chat-page ref="chatpage" @send="send" />
  </view>
</template>
<script>
  export default {
    data() {
      return {};
    },
    onLoad() {
      //当收到新消息时候，调用链：onMessage->insertMessage
      TIM.on(TIM.EVENT.MESSAGE_RECEIVED, this.onMessage);
    },
    method: {
      onMessage(e) {
        let list = e.data;
        for (let i = 0; i < list.length; i++) {
          //TODO 此处应做去重处理
          let message = list[i];
          this.$refs.chatpage.insertMessage(message);
        }
      },
      send(e) {
        let detail = e.detail;
        let text = detail.text;
        let message = TIM.createTextMessage({
          to: '对方ID',
          conversationType: TIM.TYPES.CONV_C2C,
          payload: {
            text: text,
          },
        });
        this.$refs.chatpage.insertMessage(message);
        let promise = TIM.sendMessage(message);
        promise
          .then((imResponse) => {
            //发送消息一般需要耗时，但若等待发送完成后再将消息插入到消息列表，那么用户是有感知的，明显会感觉到按下发送按钮后，等了一下消息才弹出来。
            //基于这种情况，我们可以在创建消息后直接调用insertMessage，此时消息结构中，消息状态一般为`发送中`，那么我们在调用发送接口发送完成后，再调用updateMessageStatus，就可以刷新当前消息状态
            this.$refs.chatpage.updateMessageStatus(imResponse.data.message);
          })
          .catch((imError) => {
            message.status = 'fail';
            this.$refs.chatpage.updateMessageStatus(imResponse.data.message);
          });
      },
    },
  };
</script>

<template>
  <view>
    <!-- 此处仅为演示方法，未初始化参数，请勿直接复制使用 -->
    <yeim-chat-page ref="chatpage" />
  </view>
</template>
<script>
  export default {
    data() {
      return {};
    },
    onBackPress() {
      this.$refs.chatpage.restore();
    },
  };
</script>

<template>
  <view>
    <button class="button" @click="open">打开某个用户的聊天会话页面</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {
      open() {
        //由于腾讯IM获取历史聊天记录无缓存情况下会请求网络，导致进入会话详情页面，组件无法第一时间给messages赋值，从而影响用户体验
        //所以此处建议在进入页面之前获取聊天记录，使用全局变量或者Vuex的方式给会话页面传值。

        //Tips：如果可以保证在会话页面里拉取聊天记录的速度，或者可以保证直接从本地缓存里拉取，也可以不在此处获取，直接在会话详情页面onLoad里getMessageList

        let promise = TIM.getMessageList({
          conversationID: '此处填会话ID',
          count: 15,
        });
        promise
          .then((imResponse) => {
            console.log(imResponse);

            //TODO
            //此处按上述原因，全局变量赋值imResponse
            //可使用globalData或者Vuex实现
            //我在此处未写具体实现逻辑，这里应自行实现
            // eg: getApp().globalData.imResponse = imResponse;

            // preloadPage 预加载nvue页面，保证了渲染效率
            // `/pages/index/chat` 为demo中组件所在页面，也即是下方代码块所显示内容
            // 会话ID和会话名称也需自行替换
            // 此处的url可自行修改，如果有其他方式去给会话详情页面传递会话信息，也可以直接去掉id、name
            let url =
              '/pages/index/chat?id=' +
              会话ID +
              '&name=' +
              会话名称 +
              '&time=' +
              new Date().getTime();
            uni.preloadPage({
              url: url,
              complete: () => {
                setTimeout(() => {
                  uni.navigateTo({
                    url: url,
                  });
                }, 100);
              },
              fail: (e) => {
                console.log('页面预加载失败：' + e);
              },
            });
          })
          .catch(function (imError) {
            console.warn('getMessageList error:', imError);
          });
      },
    },
  };
</script>

{
  "path": "pages/index/chat",
  "style": {
    "enablePullDownRefresh": false,
    "disableScroll": true,
    "navigationStyle": "custom",
    "navigationBarTextStyle": "black"
  }
}

<template>
  <view>
    <yeim-chat-page
      ref="chatpage"
      :style="style"
      :options="options"
      :messages="messages"
      @navigate-back="navigateBack"
      @navigate-more="navigateMore"
      @load-more="loadMore"
      @avatar-action="avatarAction"
      @send="sendTextMessage"
      @voice-end="voiceEnd"
      @tools-action="toolsAction"
      @revoke-message="revokeMessage"
      @delete-message="deleteMessage"
    >
    </yeim-chat-page>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        time: 0,
        style: {
          width: uni.getSystemInfoSync().screenWidth + 'px',
          height: uni.getSystemInfoSync().screenHeight + 'px',
        },
        options: {},
        conversation: {},
        messages: [],
        nextReqMessageID: '',
        isCompleted: false,
      };
    },
    onLoad(option) {
      //接收url参数，转会话信息
      this.conversation.id = option.id;
      this.conversation.name = option.name;

      //url random，用于解除预加载
      this.time = option.time;

      //组件初始化参数
      this.options = {
        structure: 'tim', //消息结构类型： tim
        userInfo: {
          id: 'userid1',
          name: '用户本人',
        }, // 当前登录用户
        conversation: this.conversation, // 会话用户信息（群信息）：name
        badge: 10, // 未读角标
        showOnlineStatus: true, //是否显示在线状态
        onlineStatus: true, // 是否在线
        showName: false, //是否显示列表内除自己外，别人的名称
        amapWebKey: '高德web key', // 如需要位置消息，则需填写高德地图 Web Key用作显示位置消息的静态地图
        //更多功能
        tools: [
          {
            name: '相册',
            icon: '/static/ic_more_item_image.png',
            action: 'album',
          },
          {
            name: '视频',
            icon: '/static/ic_more_item_cap.png',
            action: 'photograph',
          },
          {
            name: '视频通话',
            icon: '/static/ic_more_item_video_call.png',
            action: 'videoCall',
          },
          {
            name: '语音通话',
            icon: '/static/ic_more_item_voice_call.png',
            action: 'voiceCall',
          },
          {
            name: '文件',
            icon: '/static/ic_more_item_files.png',
            action: 'files',
          },
          {
            name: '位置',
            icon: '/static/ic_more_item_location.png',
            action: 'location',
          },
        ],
      };

      //此处承接上个页面的：imResponse（全局变量或者Vuex赋值）

      //这里假设我已经拿到了imResponse
      // eg: const imResponse = getApp().globalData.imResponse;
      const messageList = imResponse.data.messageList;
      this.nextReqMessageID = imResponse.data.nextReqMessageID;
      this.isCompleted = imResponse.data.isCompleted;

      //给组件 messages 赋值
      this.messages = messageList;
    },
    onShow() {
      //监听腾讯IM MESSAGE_RECEIVED时间，收到消息后调用onMessage
      TIM.on(TIM.EVENT.MESSAGE_RECEIVED, this.onMessage, this);
    },
    onUnload() {
      //解除预加载
      let url =
        '/pages/index/chat?id=' +
        this.conversation.id +
        '&name=' +
        this.conversation.name +
        '&time=' +
        this.time;
      uni.unPreloadPage({
        url: url,
      });

      //取消监听MESSAGE_RECEIVED
      TIM.off(TIM.EVENT.MESSAGE_RECEIVED, this.onMessage);
    },
    onBackPress() {
      //执行恢复设置，防止UI错位
      this.$refs.chatpage.restore();

      //解除预加载
      let url =
        '/pages/index/chat?id=' +
        this.conversation.id +
        '&name=' +
        this.conversation.name +
        '&time=' +
        this.time;
      uni.unPreloadPage({
        url: url,
      });

      //取消监听MESSAGE_RECEIVED
      TIM.off(TIM.EVENT.MESSAGE_RECEIVED, this.onMessage);
    },
    methods: {
      onMessage: function (e) {
        //收到消息，插入到消息列表中
        try {
          let list = e.data;
          if (list) {
            for (let i = 0; i < list.length; i++) {
              let message = list[i];
              //去重、防乱入
              if (message.from === this.conversation.id) {
                let index = this.messages.findIndex((item) => item.ID === message.ID);
                if (index === -1) {
                  //messages可加，也可不加，此处push进去，是可能后续需要用到messages
                  //组件的messages属性，仅在第一次赋值时生效，以后修改messages不影响组件内部消息列表
                  this.messages.push(message);
                  //插入到消息列表
                  this.$refs.chatpage.insertMessage(message);
                }
              }
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      navigateBack() {
        //左侧导航栏返回图标点击事件
      },
      navigateMore() {
        //右侧导航栏更多图标点击事件
      },
      avatarAction(e) {
        //头像点击事件
        console.log(e);
      },
      loadMore() {
        //下拉加载历史记录回调
        if (this.nextReqMessageID != '' && !this.isCompleted) {
          let promise = TIM.getMessageList({
            conversationID: 'C2C' + this.conversation.id,
            nextReqMessageID: this.nextReqMessageID,
            count: 15,
          });
          promise.then((imResponse) => {
            const messageList = imResponse.data.messageList; // 消息列表。
            this.nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
            this.isCompleted = imResponse.data.isCompleted;
            this.$refs.chatpage.finishLoadMore(messageList);
          });
        } else {
          this.$refs.chatpage.finishLoadMore([]);
        }
      },
      sendTextMessage(e) {
        //发送按钮点击事件
        let detail = e.detail;
        let text = detail.text;
        if (text != '') {
          let message = TIM.createTextMessage({
            to: this.conversation.id,
            conversationType: TIM.TYPES.CONV_C2C,
            payload: {
              text: text,
            },
          });

          this.messages.push(message);
          this.$refs.chatpage.insertMessage(message);

          let promise = TIM.sendMessage(message);

          promise
            .then((imResponse) => {
              this.$refs.chatpage.updateMessageStatus(imResponse.data.message);
            })
            .catch((imError) => {
              console.warn('sendMessage error:', imError);
              message.status = 'fail';
              this.$refs.chatpage.updateMessageStatus(imResponse.data.message);
            });
        }
      },
      voiceEnd(e) {
        //组件内，用户语音完毕事件，只有用户确认发送语音后，才会回调此方法
        const message = TIM.createAudioMessage({
          to: this.conversation.id,
          conversationType: TIM.TYPES.CONV_C2C,
          payload: {
            file: e.detail,
          },
        });

        this.messages.push(message);
        this.$refs.chatpage.insertMessage(message);

        let promise = TIM.sendMessage(message);
        promise
          .then((imResponse) => {
            this.$refs.chatpage.updateMessageStatus(imResponse.data.message);
          })
          .catch(function (imError) {
            console.warn('sendMessage error:', imError);
            message.status = 'fail';
            this.$refs.chatpage.updateMessageStatus(imResponse.data.message);
          });
      },
      revokeMessage(e) {
        //撤回消息回调
        let messageId = e.detail.messageId;
        let message = this.messages.find((item) => item.ID == messageId);
        uni.showLoading({
          title: '撤回中...',
        });
        let promise = TIM.revokeMessage(message);
        promise
          .then((imResponse) => {
            // 消息撤回成功
            uni.hideLoading();
            this.$refs.chatpage.updateMessage(imResponse.data.message);
          })
          .catch(function (imError) {
            uni.hideLoading();
            if (imError.code == 20016) {
              //消息撤回超过了时间限制（默认2分钟）
              uni.showModal({
                title: '提示',
                content: '消息撤回超过了时间限制2分钟',
              });
            }
            // 消息撤回失败
            console.warn('revokeMessage error:', imError);
          });
      },
      deleteMessage(e) {
        //删除消息回调
        let messageId = e.detail.messageId;
        let message = this.messages.find((item) => item.ID == messageId);
        uni.showLoading({
          title: '删除中...',
        });
        let promise = TIM.deleteMessage([message]);
        promise
          .then((imResponse) => {
            // 删除消息成功
            uni.hideLoading();
            this.$refs.chatpage.removeMessage(message);
          })
          .catch(function (imError) {
            uni.hideLoading();
            // 删除消息失败
            console.warn('deleteMessage error:', imError);
            uni.showToast({
              icon: 'error',
              title: '删除失败',
            });
          });
      },
      toolsAction(e) {
        //更多功能点击事件
        if (e.detail) {
          let detail = e.detail;
          let action = detail.action;
          if (action == 'album') {
            uni.chooseImage({
              count: 1,
              sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
              success: (res) => {
                let message = TIM.createImageMessage({
                  to: this.conversation.id,
                  conversationType: TIM.TYPES.CONV_C2C,
                  payload: {
                    file: res,
                  },
                  onProgress: function (event) {
                    console.log('file uploading:', event);
                  },
                });
                this.messages.push(message);
                this.$refs.chatpage.insertMessage(message);

                let promise = TIM.sendMessage(message);
                promise
                  .then((imResponse) => {
                    this.$refs.chatpage.updateMessageStatus(imResponse.data.message);
                  })
                  .catch(function (imError) {
                    console.warn('sendMessage error:', imError);
                    message.status = 'fail';
                    this.$refs.chatpage.updateMessageStatus(imResponse.data.message);
                  });
              },
            });
          } else if (action == 'photograph') {
            uni.chooseVideo({
              count: 1,
              maxDuration: 60, // 设置最长时间60s
              camera: 'back', // 后置摄像头
              success: (res) => {
                let message = TIM.createVideoMessage({
                  to: this.conversation.id,
                  conversationType: TIM.TYPES.CONV_C2C,
                  payload: {
                    file: res,
                  },
                  onProgress: function (event) {
                    console.log('file uploading:', event);
                  },
                });
                this.messages.push(message);
                this.$refs.chatpage.insertMessage(message);

                let promise = TIM.sendMessage(message);
                promise
                  .then((imResponse) => {
                    this.$refs.chatpage.updateMessageStatus(imResponse.data.message);
                  })
                  .catch(function (imError) {
                    console.warn('sendMessage error:', imError);
                    message.status = 'fail';
                    this.$refs.chatpage.updateMessageStatus(imResponse.data.message);
                  });
              },
            });
          } else if (action == 'files') {
          } else if (action == 'location') {
            uni.chooseLocation({
              success: (res) => {
                let message = TIM.createLocationMessage({
                  to: this.conversation.id,
                  conversationType: TIM.TYPES.CONV_C2C,
                  payload: {
                    description: res.name + '|' + res.address,
                    longitude: res.longitude, // 经度
                    latitude: res.latitude, // 纬度
                  },
                });
                let promise = TIM.sendMessage(message);
                promise
                  .then((imResponse) => {
                    this.messages.push(imResponse.data.message);
                    this.$refs.chatpage.insertMessage(imResponse.data.message);
                  })
                  .catch(function (imError) {
                    // 发送失败
                    console.warn('sendMessage error:', imError);
                  });
              },
            });
          }
        }
      },
    },
  };
</script>