微信小程序接入腾讯IM即时通讯，实现在线聊天

最新推荐文章于 2024-04-24 22:51:49 发布
最新推荐文章于 2024-04-24 22:51:49 发布
阅读量6.6k 收藏 34
点赞数 6
文章标签： java 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45351390/article/details/116869304
版权

最近在帮朋友写一个二手交易平台，买卖双方在线沟通的功能(类似于某鱼）

  1. 先上传做完的效果图，后续再更新源码，目前实现了消息列表显示未读数量，显示最后一条信息内容，收到信息后刷新列表。在这里插入图片描述
  2. 聊天页面

在这里插入图片描述
不要吐槽页面，因为这是一个万能的Java攻城狮写的。。。

-----------------------------------------------------2021-07-19-----------------------------------------------

会话列表代码

<!--pages/msg/msg.wxml-->
<view style="height:500px;width:100%;">
  <block wx:for="{{data}}" wx:for-index="idx" wx:for-item="item" wx:key="item" >
    <view style="display:flex; border-bottom: 1px solid #9999995c;padding-top: 15px;padding-bottom:15px"  bindtap="godateils" 
    data-info="{{item}}">
      <view>
        <image src="../../images/head.png" style="width:50px;height:50px"></image>
      </view>

      <view style="display:block;    width: 71%;    margin-left: 10px;">
        <view>{{item.userProfile.nick}}</view>
        <view style="padding-top: 10px;">{{item.lastMessage.messageForShow}}</view>
      </view>

      <view style=" padding-top: 10px;" wx:if="{{item.unreadCount!=0}}">
        <view class="unreadCount">{{item.unreadCount}}</view>
      </view>
    </view>
  </block>
</view>

/* pages/msg/msg.wxss */
.unreadCount{
  background: #ff0000ad;
  width: 25px;
  height: 25px;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 25px;
}

// pages/msg/msg.js
const app = getApp()
const {
  getDatePattern,
  isJSON
} = getApp().require('utils/util');
let DATA_APP = getApp() && getApp().globalData || {};
let DATA_TIM = DATA_APP.TIM || {};
let TIM_MSG = [];
const config = require("../../config.js");
import {
  loginTIM
} from '../../plugin/im-init.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    data: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.init();
  },


  init() {
    loginTIM(getApp().globalData)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var that = this;
    wx.showLoading({
      title: '数据拉取中...',
    })
    setTimeout(() => {
      let promise = DATA_TIM.getConversationList();
      promise.then(function (imResponse) {
        const conversationList = imResponse.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
        that.data.data = conversationList
        console.log("第一次打印===" + JSON.stringify(conversationList))
        that.getUser(0)
        console.log(JSON.stringify(that.data.data))
      }).catch(function (imError) {
        console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
      });
    }, 3000);


    wx.event.on('received', (e) => {
      var that = this;
      let promise = DATA_TIM.getConversationList();
      promise.then(function (imResponse) {
        const conversationList = imResponse.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
        that.data.data = conversationList
        that.getUser(0)
      }).catch(function (imError) {
        console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
      });
    });

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    let promise = DATA_TIM.getConversationList();
    promise.then(function (imResponse) {
      const conversationList = imResponse.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
      that.data.data = conversationList
      console.log("第一次打印===" + JSON.stringify(that.data.data))
      console.log("第一次打印===" + JSON.stringify(that.data.data.length))
      that.getUser(0)
      console.log(JSON.stringify(that.data.data))
    }).catch(function (imError) {
      console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
    });
  },

  getUser: function (i) {
    var that = this;
    console.log(i)
    console.log("进入getuser")
    console.log(that.data.data.length)
    console.log(JSON.stringify(that.data.data))
    if (i == that.data.data.length) {
      console.log("返回")
      console.log("runt===" + JSON.stringify(that.data.data))
      that.setData({
        "data": that.data.data
      })
      wx.hideLoading({
        success: (res) => {},
      })
      return;
    }
    console.log("开始请求啊")
    wx.request({
      url: app.globalData.domain + '/api/member/getByOpenid',
      data: {
        token: app.globalData.token,
        openid: that.data.data[i].userProfile.userID
      },
      success: function (res) {
        console.log("查询完成=="+JSON.stringify(res))
        if (res.data.member.length > 0) {
          if(res.data.member[0].doctorName==""||res.data.member[0].doctorName==null){
            that.data.data[i].userProfile.nick = res.data.member[0].nickname
          }else{
            that.data.data[i].userProfile.nick = res.data.member[0].doctorName
          }
        }
        that.getUser(i+1)
      },fail:function(err){
        console.log("请求失败了")
      }
    })

  },

  godateils: function (e) {
    console.log(JSON.stringify(e))
    console.log(JSON.stringify())
    wx.navigateTo({
      url: '../chat/chat?userid=' + e.currentTarget.dataset.info.userProfile.userID,
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

聊天页面

<view class="chat-area">
    <scroll-view scroll-into-view="{{ colToView }}" scroll-y="true" bindscrolltoupper="onLoadMore"
        bindtap="onHideSendMore">
        <view class="loader-wrap" wx:if="{{showLoading}}">
            <text class="loader"></text>
        </view>
        <block wx:for="{{ arrMsg }}" wx:key="index">
            <view class="{{ item.from === colUserId?'':'chat-his'}}">
                <view wx:if="{{item.type == 'TIMImageElem'}}" class="chat-row flex-box-end" id="msg-{{index}}">
                    <view class="chat-img">
                        <image wx:if="{{item.status=='success'}}" class="chat-pic" mode="heightFix" lazy-load="{{true}}"
                            src="{{item.payload.imageInfoArray[0].url}}" bindtap="previewImage"
                            data-url="{{item.payload.imageInfoArray[2].url}}"></image>
                        <image wx:elif="{{item.status=='fail'}}" class="chat-pic" mode="heightFix" lazy-load="{{true}}"
                            src="{{item.sendPic}}" data-url="{{item.payload.imageInfoArray[2].url}}">
                            <view class="chat-progress">发送失败</view>
                        </image>
                        <image wx:else class="chat-pic" mode="heightFix" lazy-load="{{true}}" src="{{item.sendPic}}"
                            data-url="{{item.payload.imageInfoArray[2].url}}">
                            <view class="chat-progress">
                                <text class="loader"></text>
                                <text>{{colPercent}}%</text>
                            </view>
                        </image>
                    </view>
                    <view class="chat-head">
                        <image class="chat-headPortrait" src="../../images/head.png"></image>
                    </view>
                </view>
                <view wx:else class="chat-row flex-box-end" id="msg-{{index}}">
                    <view class="chat-main">
                        <!--  <view class="left-chat-name">{{ item.from }}</view>-->
                        <view class="chat-msg">{{ item.payload.text }}</view>
                        <view class="chat-time">{{ item.timeFormat }}</view>
                    </view>
                    <view class="chat-head">
                        <image class="chat-headPortrait" src="../../images/head.png"></image>
                    </view>
                </view>
            </view>


        </block>
    </scroll-view>
    <view class="chat-footer">
        <view class="chat-input-box">
            <input bindinput='onInputMsg' bindconfirm='TIM_createMsg' value="{{colSendMsg}}" placeholder='输入内容'
                class="input" cursor-spacing="20"></input>
            <view class='footer-send' bindtap='TIM_createMsg'>
                发送
            </view>
        </view>
        <view class="open-more" wx:if="{{showSendMore}}">
         
        </view>
    </view>
</view>

wxss

view,text,image{
  box-sizing: border-box;
}

.flex-box-start{
  display: flex;
  justify-content: start;
}

.flex-box-end{
  display: flex;
  justify-content: flex-end;
}

.chat-area{
  width: 100%;
  height: calc(100vh - 120rpx);
  background-color: #f9f9f9;
  font-weight: 400;
  /*padding-bottom: 140rpx;*/
}

.chat-area > scroll-view{
  position: relative;
  height: 100%;
  padding: 20rpx 20rpx 10rpx 20rpx;
  box-sizing: border-box;
}



.chat-his .flex-box-end{
  flex-direction: row-reverse;
  justify-content: flex-start!important;
}

.chat-his .chat-main{
  align-items: flex-start!important;
}

.chat-his .chat-msg{
  background: #ffffff!important;
  color: #000000;
}

.chat-his .chat-msg:before{
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-width: 14rpx 20rpx;
  border-style: solid;
  border-color: transparent white transparent transparent;
  left: -40rpx;
  top: 30rpx;
}

.chat-his .chat-msg:after{
  display: none;
}

.chat-his .chat-head{
  margin-right: 30rpx;
  margin-left: 0!important;
}

.chat-his .chat-img{
  justify-content: flex-start!important;
}

.chat-his .chat-custom .item:after{
  background: #000000!important;
}

.chat-headPortrait{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.chat-head{
  width: 100rpx;
  height: 100rpx;
  margin-left: 30rpx;
  flex: none;
}

.chat-end{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #8B8B8B;
  margin-bottom: 40rpx;
}

.chat-main{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.chat-row{
  margin: 30rpx 0;
}

.chat-name{
  font-size: 26rpx;
  color: #7C7C7C;
  padding-left: 20rpx;
  margin-bottom: 10rpx;
}

.chat-time{
  font-size: 24rpx;
  color: #b7b7b7;
  padding-left: 12rpx;
  margin-top: 16rpx;
}

.chat-msg{
  display: inline-block;
  position: relative;
  max-width: calc(100% - 100rpx);
  background-color: #0093A2;
  padding: 26rpx 30rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  word-wrap: break-word;
  color: #FEFEFE;
  margin-left: 6rpx;
  /*font-weight: bold;*/
  min-height: 90rpx;
}

.chat-msg:after{
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-width: 14rpx 20rpx;
  border-style: solid;
  border-color: transparent transparent transparent #0093A2;
  right: -40rpx;
  top: 30rpx;
}



.chat-custom .row{
  display: flex;
  width: 100%;
  margin: 10rpx 0;
}

.chat-custom .row-left{
  width: 150rpx;
  flex: none;
}

.chat-custom .row-right{
  flex: auto;
  white-space: initial;
}

.chat-custom .row .item{
  position: relative;
  margin-right: 32rpx;
}

.chat-custom .item:after{
  content: '';
  width: 2rpx;
  height: 30rpx;
  background: #ffffff;
  position: absolute;
  right: -16rpx;
  top: 50%;
  transform: translateY(-50%);
}

.chat-custom .row .item:last-child:after{
  width: 0;
}

.btn-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-wrap .item{
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  margin: 20rpx 0;
  border-radius: 20rpx;
  background: dodgerblue;
  color: white;
  font-size: 40rpx;
  font-weight: bold;
  z-index: 9999;
}

/* 图片消息 */
.chat-img{
  width: 100%;
  margin: 30rpx 0;
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.chat-pic {
  max-width: 360rpx;
  height: 360rpx;
  background-repeat: no-repeat;
  background-size: center;
  background-position: center;
  border-radius: 4rpx;
  position: relative;
}

.chat-progress{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(29, 29, 29, 0.548);
  color: #fff;
}

@keyframes loader {
  0% {
      -webkit-transform:rotate(0deg);
      transform:rotate(0deg);
  }
  100% {
      -webkit-transform:rotate(360deg);
      transform:rotate(360deg);
  }
}

.loader {
  border-top:8rpx solid rgba(0,0,0,0.1);
  border-right:8rpx solid rgba(0,0,0,0.1);
  border-bottom:8rpx solid rgba(0,0,0,0.1);
  border-left:8rpx solid #555;
  transform:translateZ(0);
  animation:loader 600ms infinite linear;
  transition:all 500ms ease;
  opacity:1;
}

.loader,.loader:after {
  border-radius:50%;
  width:40rpx;
  height:40rpx;
}

/* 底部样式 */
.chat-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background:rgba(248,248,248,1);
  box-sizing: border-box;
}

.chat-input-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 20rpx 25rpx;
}

.chat-wait{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120rpx;
  background: #ffffff;
  font-size: 26rpx;
}

.msg-icon{
  width: 58rpx;
  height: 58rpx;
}

.chat-input-box .input{
  height:76rpx;
  line-height: 76rpx;
  background:rgba(255,255,255,1);
  border: none;
  border-radius:6rpx;
  font-size: 30rpx;
  padding:0 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  flex-grow: 1;
  background: #F1F1F1;
}

.inputArea{
  width: 100%;
  height: 98%;
  flex-grow: 1;
}
.placeHolder{
  position: absolute;
  font-size: 26rpx;
  color: #cccccc;
  height: 100%;
  box-sizing: border-box;
  top: 0;
  z-index: 0;
}
.footer-send{
  height: 76rpx;
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  margin-left: 20rpx;
  padding: 0 10rpx;
}
.footer-send-item{
  font-size: 60rpx;
  font-weight: bold;
}
.footer-h{
  position: fixed;
  top: 100px;
}
.more{
  display: flex;
  justify-content: center;
  align-items: center;
}
.more-text{
  padding: 6rpx 14rpx;
  background:rgba(216,216,216,1);
  border-radius:4rpx;
  color: #FFFFFF;
  font-size: 20rpx;
  margin: 30rpx auto;
}

.open-more{
  display: flex;
  flex-wrap: wrap;
  padding: 40rpx 0;
  min-height: 360rpx;
}

.open-more-item{
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
}

.open-more-item .msg-img{
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 16rpx;
}

.open-more-item .msg-text{
  font-size: 28rpx;
  color: #888888;
}


.loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  width: 100%;
  opacity:1;
  z-index:99;
  color: #b7b7b7;
  font-size: 28rpx;
}

.loader-tip{
  background: #E7E7E7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8B8B8B;
  padding:20rpx 30rpx;
  font-size: 24rpx;
  border-radius: 6rpx;
}

.loader {
  border-top:8rpx solid rgba(0,0,0,0.1);
  border-right:8rpx solid rgba(0,0,0,0.1);
  border-bottom:8rpx solid rgba(0,0,0,0.1);
  border-left:8rpx solid #555;
  transform:translateZ(0);
  animation:loader 600ms infinite linear;
  transition:all 500ms ease;
  opacity:1;
}

.loader,.loader:after {
  border-radius:50%;
  width:40rpx;
  height:40rpx;
}

@keyframes loader {
    0% {
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

.z-btn-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120rpx;
  background: #ffffff;
}

.z-btn{
  background: #06CAD8;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24rpx 40rpx;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 10rpx;
  min-width: 400rpx;
}

js`

import TIM from "../../plugin/tencentIM/tim-wx-sdk.js";

const app = getApp()
const {
    getDatePattern,
    isJSON
} = getApp().require('utils/utils');

let DATA_APP = getApp() && getApp().globalData || {};
let DATA_TIM = DATA_APP.TIM || {};
let TIM_MSG = [];

Page({
    data: {
        colToView: '',
        colUserId: '',
        colUserOtherId: '',
        colSendMsg: '',
        colPercent: 0,

        pageLastLength: 1,
        pageNext: '',
        pageCompleted: '',

        showSendMore: false,
        showLoading: false,
        showThree: false,
        showEnd: false,

        arrMsg: [],
        arrImg: [],
    },

    onLoad(options) {
        this.data.colUserId = app.openid
        this.data.colUserOtherId = options.userid
        console.log(this.data.colUserId)
        console.log(this.data.colUserOtherId)
        console.log(JSON.stringify(DATA_APP))
        this.TIM_getMsgList();
        this.setData({
            colUserId: this.data.colUserId
        })

        //订阅初始化获取聊天记录
        wx.event.on('conversationInit', () => {
            this.TIM_getMsgList();
        });

        //订阅收到消息
        wx.event.on('received', (e) => {
            this.TIM_setGlobalMsg(e, 'received');
        });

    },

    //im获取消息、打开某个会话时，第一次拉取消息列表
    TIM_getMsgList() {
        this.onShowLoading();
        let param = {
            conversationID: 'C2C' + this.data.colUserOtherId,
            count: 15,
            nextReqMessageID: this.data.pageNext
        };
        let promise = DATA_TIM.getMessageList(param);
        promise.then((imResponse) => {
            console.log(JSON.stringify(imResponse))


            // 将某会话下所有未读消息已读上报
            let promise = DATA_TIM.setMessageRead({
                conversationID: imResponse.data.messageList[0].conversationID
            });
            promise.then(function (imResponse) {
                // 已读上报成功，指定 ID 的会话的 unreadCount 属性值被置为0
            }).catch(function (imError) {
                // 已读上报失败
                console.warn('setMessageRead error:', imError);
            });
            this.TIM_setGlobalMsg(imResponse, 'load', true);
        });
    },

    //im获取消息、打开某个会话时，第一次拉取消息列表
    TIM_getMsgListMore() {
        this.onShowLoading();
        let param = {
            conversationID: 'C2C' + this.data.colUserOtherId,
            count: 15,
            nextReqMessageID: this.data.pageNext
        };
        let promise = DATA_TIM.getMessageList(param);
        promise.then((imResponse) => {
            this.TIM_setGlobalMsg(imResponse, 'load');
        });
    },

    //im创建文本消息
    TIM_createMsg() {
        let param = {
            to: this.data.colUserOtherId,
            conversationType: TIM.TYPES.CONV_C2C,
            payload: {
                text: this.data.colSendMsg
            }
        };
        let message = DATA_TIM.createTextMessage(param);
        this.TIM_sendMessageFun(message);
        this.onClearInput();
    },


    // im创建图片- 选择图片
    TIM_createPhoto(e) {
        let that = this;
        let name = e.currentTarget.dataset.name;
        if (name === 'album') {
            that.TIM_createPhotoNow(name)
        } else if (name === 'camera') {
            wx.getSetting({
                success: function (res) {
                    if (!res.authSetting['scope.camera']) { // 无权限，跳转设置权限页面
                        wx.authorize({
                            scope: 'scope.camera',
                            success: function () {
                                that.TIM_createPhotoNow(name)
                            }
                        })
                    } else {
                        that.TIM_createPhotoNow(name)
                    }
                }
            })
        }
    },

    // im创建图片- 创建完成
    TIM_createPhotoNow(name) {
        let that = this;
        let colUserId = this.data.colUserId;
        wx.chooseImage({
            sourceType: [name],
            count: 1,
            success: (res) => {
                // 在发送之前先push进去一张图片
                let messageList = that.data.arrMsg;
                let data = {
                    type: 'TIMImageElem',
                    send: true,
                    from: colUserId,
                    showSendMore: res.tempFilePaths[0]
                };
                messageList.push(data);
                that.setData({
                    arrMsg: messageList
                });
                that.onHideSendMore();
                that.pageScrollToBottom(true);
                // 2. 创建消息实例，接口返回的实例可以上屏
                let message = DATA_TIM.createImageMessage({
                    to: that.data.colUserOtherId, // 消息的接收方,
                    conversationType: TIM.TYPES.CONV_C2C,
                    payload: {
                        file: res
                    },
                    onProgress: (event) => {
                        event = event || 0;
                        that.setData({
                            colPercent: event * 100
                        })
                    }
                });
                that.TIM_sendMessageFun(message, 'TIMImageElem')
            }
        })
    },

    //im发送-处理
    TIM_sendMessageFun(message, type) {
        console.log(message)
        DATA_TIM.sendMessage(message).then((imResponse) => {

            // 发送成功
            if (type === 'TIMImageElem') {
                let messageList = this.data.arrMsg;
                console.log(JSON.stringify(arrMsg))
                messageList.pop();
                this.setData({
                    arrMsg: messageList
                })
            }
            this.TIM_setGlobalMsg(imResponse, 'send');
            this.onHideSendMore();
            this.onClearInput();
        }).catch((imError) => {
            console.warn('发送失败:', imError);
        })
    },

    //im处理数据
    TIM_setGlobalMsg(imResponse, type, loadFirst) {
        console.log('消息列表', imResponse);
        if (type === 'send' || type === 'received') {
            let data = {};
            if (type === 'received') {
                data = imResponse.data[0];
                // this.setData({
                //     showThree:false,
                // })
            } else {
                data = imResponse.data.message || {};
            }
            let arrMsg = this.data.arrMsg;
            let arrImg = this.data.arrImg;
            if (data.type === 'TIMImageElem') {
                arrImg.push(data.payload.imageInfoArray[0].url);
            }
            if (data.type === 'TIMCustomElem') {
                data.dataCustom = isJSON(data.payload.data) ? JSON.parse(data.payload.data) : {};
            }
            data.timeFormat = getDatePattern(new Date(data.time * 1000), 'yyyy-MM-dd HH:mm');
            arrMsg.push(data);
            for (var i = 0; i < arrMsg.length; i++) {
                console.log("循环打印==" + JSON.stringify(arrMsg[i]))
            }
            console.log(JSON.stringify(arrMsg[0].from))
            this.setData({
                arrMsg: arrMsg,
                arrImg: arrImg,
            }, () => {
                this.pageScrollToBottom(true)
            });
        } else {
            let data = imResponse.data || {};
            let arrData = data.messageList || [];
            let arrImg = [];
            arrData = arrData.map(x => {
                if (x.type === 'TIMImageElem') {
                    arrImg.push(x.payload.imageInfoArray[0].url);
                }
                if (x.type === 'TIMCustomElem') {
                    x.dataCustom = isJSON(x.payload.data) ? JSON.parse(x.payload.data) : {};
                }
                x.timeFormat = getDatePattern(new Date(x.time * 1000), 'yyyy-MM-dd HH:mm')
                return x
            });
            arrImg = arrImg.concat(this.data.arrImg);
            TIM_MSG = arrData.concat(this.data.arrMsg); // 全局消息列表
            this.setData({
                'arrMsg': TIM_MSG,
                'arrImg': arrImg,
                'pageNext': data.nextReqMessageID, // 用于续拉，分页续拉时需传入该字段。
                'pageCompleted': data.isCompleted, // 表示是否已经拉完所有消息。
                'pageLastLength': arrData.length //用户定位滚动位置
            }, () => {
                this.onHideLoading();
                this.pageScrollToBottom(loadFirst)
            });
        }
    },

    //实时更新输入框的数据
    onInputMsg(e) {
        this.setData({
            'colSendMsg': e.detail.value
        })
    },

    onClearInput() {
        this.setData({
            'colSendMsg': ''
        })
    },

    //显示加载框
    onShowLoading() {
        this.setData({
            'showLoading': true
        });
    },

    //隐藏加载框
    onHideLoading() {
        this.setData({
            'showLoading': false
        });
    },

    // 点更多出现图片和相册
    onShowSendMore() {
        this.setData({
            showSendMore: true
        })
    },

    // 点击屏幕 发消息更多的弹框下去
    onHideSendMore() {
        this.setData({
            showSendMore: false
        })
    },

    // 预览
    previewImage(e) {
        let url = e.currentTarget.dataset.url;
        wx.previewImage({
            current: url, // 当前显示图片的http链接
            urls: this.data.arrImg
        })
    },


    //滚动到页面底部
    pageScrollToBottom(isBottom) {
        let index = null;
        if (isBottom) {
            index = 'msg-' + (this.data.arrMsg.length - 1);
        } else {
            index = 'msg-' + 0;
        }
        this.setData({
            colToView: index
        })
    },

    //加载更多
    onLoadMore() {
        if (!this.data.pageCompleted) {
            this.TIM_getMsgListMore()
        }
    },

});
写完程序去旅行
关注
  • 6
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
微信小程序开发中的实时聊天和即时通讯
m0_72166538的博客
02-25 907
在上面的代码中，我们在连接状态变为CONNECTED（连接成功）后，调用RongIMClient.setOnReceiveMessageListener方法来注册消息监听器，并在onReceived回调函数中调用chat页面的onReceiveMessage方法来处理接收到的消息。在上面的代码中，我们引入了融云即时通讯SDK，并通过RongIMClient.init方法来初始化SDK，传入了一个appkey参数，需要替换成你自己的appkey。至此，我们已经完成了微信小程序中的实时聊天和即时通讯功能实现。
uniapp集成腾讯即时通信IM，实现一对一聊天，支持文字、表情、语音、图片、视频
05-18
腾讯的给的例子内容比较乱，我花了好长时间才集成出来，然后对聊天页面做了UI美化。 使用： 1.复制文件到项目 2. GenerateTestUserSig.js配置SDKAPPID和SECRETKEY 3. 安装 npm i 4. 运行 教程：https://blog.csdn.net/qq_17702967/article/details/124785424
即时通讯（IM）开源项目OpenIM本周版本发布- v1.0.7-web端一键部署
OpenIM的博客
12-10 5298
介绍 OpenIM：由前微信技术专家打造的基于 Go 实现的即时通讯（IM）开源项目，包括IM服务端和客户端SDK。开发者私有化部署，基于SDK二次开发，可以轻松替代第三方IM云服务，打造具备聊天、社交功能的app。无论是开发同城交友、企业办公亦或是当今最热门的元宇宙，还是在应用中集成IM功能，都非常便捷。OpenIM代码100%开源，开源协议Apache-2.0 License任何企业和个人都可以免费使用（包括商用）。 请各位看官多多支持，转发和宣传，助力OpenIM成为开源IM的No1 web端体验地址
面对面小程序开源
OpenIM的博客
09-10 588
开源地址: https://github.com/Tencent/Face2FaceTranslator 近期我们发布了微信同声传译小程序插件，免费开放微信AI团队在机器翻译、智能语音领域的业界领先成果，使开发者简便地在小程序中加入机器翻译、智能语音能力。 现在我们开源完全基于微信同声传译插件实现的面对面翻译小程序，以进一步降低小程序开发者使用插件的门槛。 小程序开发者参考面对面翻译开源实现，只需要调用几个简单API，就可以完成一个翻译应用。 我们的终极目标是：0门槛搞定！！ 插件功能 语音输入 语音合成
微信小程序集成环信SDK
03-29
分享者：mirrorZyb，来自原文地址 本文以一个小例子简单的演示在微信小程序中使用环信SDK收发消息。 官网demo 下载后把整个utils目录下的文件复制到咱自己工程的目录下。 (此图片来源于网络，如有侵权，请联系删除! ) 在WebIMConfig.js中将AppKey替换成自己应用的key 界面简单的用一个输入框和一个按钮组成，点击按钮发送消息。 (此图片来源于网络，如有侵权，请联系删除! ) 导入WebIM.js var WebIM = require('../../utils/WebIM.js') var WebIM = WebIM.default 登陆 hxloign: fun
腾讯云IM Web端支持发送语音消息
weixin_46576403的博客
12-21 787
腾讯即时通讯IM的WebSDK不支持createAudioMessage, 只有小程序才能用. 经查在 tim-js-friendship.js下的createAudioMessage里 做了是否为小程序的判断, key: "createAudioMessage", value: function (e) { if (ni) { // 如果是小程序, 创建 audio message var t = e.payload.file; if (ni) { var n = { url
微信小程序 -- 原生JS集成腾讯IM实时聊天/实时音视频(踩坑及心得)
热门推荐
weixin_44622984的博客
11-11 1万+
最近公司微信小程序需要集成腾讯IM实现实时聊天功能,这篇文章就记录我在集成过程中所踩得坑和心得 首先第一步: 当然是进官网读文档 文档地址 : https://cloud.tencent.com/document/product/269/36838 第一个看到的就是这个一分钟跑通demo(实际上我感觉看了跟没看一样,没啥太大帮助)也就清楚了一下前期准备工作: 首先你要有一个可用的腾讯云账号 然后你需要登录 及时 通信IM控制台 在控制台中添加新应用 创建应用后点进去可以拿到应用的 SDKAppId 以及
七、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-聊天消息项的实现
12-24 1719
基于uni-app技术开发的仿微信界面IM实例项目，开源Vue版本源码，对于要求高的开发者我们也开发了NVUE版本，实现了文本消息、图文消息、表情(gif动画)，图片预览，图片编辑，视频预览，视频编辑，仿微信的图片选择器、编辑、长按菜单等功能
微信小程序——原生小程序即时通信IM demo，包含聊天、表情、语音、图片、会话列表功能
朕的博客
08-27 3773
前言： 最近项目需求要在小程序中添加一个即时通信IM的功能，本来想自己开发一个…评估了一下团队实力后，并不允许，所以找了一个IM第三方框架，采用的是腾讯云的即时通信IM，但是目前腾讯云IM的小程序SDK并没有包含UI，因此就需要自己来开发页面样式和交互，腾讯云IM自己也提供了一个deom，但是使用mpvue框架写的。。。网上是一片骂声。。。我也没有使用他的demo，自已用小程序原生写了一套，因为网上用原生写的deom很少，特此将小弟写的分享出来，各位大佬轻点喷~~ 点击**下载源码** 跑通demo四部曲：
IM-DEMO微信小程序即时通讯案例
10-16
微信小程序——原生小程序即时通信IM demo，包含聊天、表情、语音、图片、会话列表功能
微信小程序demo：在线聊天功能(源代码+截图)
06-19
微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+...
微信小程序 集成腾讯云IM做的聊天室
01-08
初次接触集成的东西确实有点费劲，最终通过两天的摸爬滚打把腾讯云的IM集成到了我的微信小程序中了。 让大家看一下效果： 我的毕设项目中只是用了腾讯IM的单人一对一聊天，当然这个IM是支持群的，语音视频，几乎...
全开源 PHP在线客服系统IM 即时通讯聊天源码微信公众号小程序 H5APP 网页端在线客服 源码下载
07-03
安装说明： 环境：ap / ng php7.2 取消防跨站，根目录public，伪静态thinkPHP 安装：/install.php 禁用PHP函数 开启推送： cd /www/wwwroot/域名/cgwl_pusher php start.php start -d
微信小程序websocket实现即时聊天功能
10-16
主要为大家详细介绍了微信小程序websocket实现即时聊天功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
string模拟实现
m0_73969414的博客
04-23 1281
c++中string的模拟实现，面试必会知识点
javaweb-SpringBoot基础
kussm_的博客
04-20 1211
Spring的官网(Spring的简介：Spring makes Java simple。Spring Boot 可以帮助我们非常快速的构建应用程序、简化开发、提高效率。创建一个子包controller。
Java | 冒泡排序算法实现
最新发布
yingzix688的博客
04-24 597
题目描述 编写一个Java程序，实现冒泡排序算法。程序需要能够接收一个整型数组作为输入，并输出排序后的数组。 冒泡排序是一种简单的排序算法，它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
微信小程序接入腾讯地图
10-18
要接入腾讯地图，需要先在腾讯地图开放平台上注册账号并创建应用，然后在小程序中引入腾讯地图 SDK，并使用腾讯地图提供的 API 进行开发。具体步骤如下： 1. 在腾讯地图开放平台上注册账号并创建应用，获取开发者密钥（key）。 2. 在小程序中引入腾讯地图 SDK，可以使用官方提供的组件或者自己封装。 3. 使用腾讯地图提供的 API 进行开发，比如获取当前位置、搜索周边POI、绘制地图等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值