微信小程序接入腾讯云IM即时通讯（发送消息开发步骤）

最新推荐文章于 2023-12-11 16:43:17 发布
最新推荐文章于 2023-12-11 16:43:17 发布
阅读量1.7w 收藏 67
点赞数 5
分类专栏： 微信小程序 文章标签： 发送消息 腾讯云通讯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29789057/article/details/82592001
版权

微信小程序接入腾讯云IM即时通讯（聊天窗口）

1.效果图：
这里写图片描述

  • 2.功能点 ：
    1.布局要分左右两边布局，如果是自己为发送消息方，都在右边，对方发送的消息在左边。
    2.腾讯云返回的是时间戳，需要转换一下时间，腾讯云是没有返回头像的，需要单独获取并且设置自己跟对方的头像。
    3.发送的消息分为自定义消息跟普通文本消息，带房源图片 跟价格和小区名称的是自定义的消息，从房源详情进入聊天就自动发送，普通文本消息则在底部栏发送。
    4.获取聊天的历史记录，下拉上翻历史记录，这里没有做本地缓存，是做了每次进入都拉取一次聊天的历史记录的操作。

WXML代码

<scroll-view class='chat' id="chat" style="height:{{height}}px;" scroll-y style='padding-bottom:49px;' >
  <block  wx:for="{{myMessages}}" wx:key="{{index}}">
    <view class='chat-time' wx:if="{{item.time != ''}}">{{item.msgTime}}</view>
    <view class="chat-item flex-wrap {{item.isSelfSend ? 'house' : ''}}" wx:if='{{item.type != ""}}' bindtap='linkDetail'  data-id="{{item.id}}" data-type="{{item.type}}">
        <view class='avatar'>
          <image style="width:40px;height:40px;border-radius:50%;" mode= "scaleToFill" src="{{item.avatar}}"></image>
        </view>
        <view class='content ' style="width:520rpx;">
          <image class='img' style="width:100%;height:120px;" mode= "scaleToFill"  src="{{item.img == '' ? houseDefault : item.img}}"></image>
          <view class='info'>
            <view class='info-name'>{{item.name}}</view>
            <view class='info-title'>{{item.msgContent}}</view>
            <view class='flex-wrap'>
              <view class='flex-item3'>
                <view class='info-price'>{{item.price}}</view>
              </view>
              <view class='flex-item'>
                <view class='info-type'>{{item.type}}</view>
              </view>
            </view>
          </view>
        </view>
    </view>
    <view class="chat-item flex-wrap {{item.isSelfSend ? 's' : ''}}" wx:if='{{item.type == ""}}'>
        <view class='avatar'>
          <image style="width:40px;height:40px;border-radius:50%;" mode= "scaleToFill" src="{{item.avatar}}"></image>
        </view>
        <view class='content '>{{item.msgContent}}</view>
    </view>
  </block>
</scroll-view>

<view class='footer-h'></view>
<view class='chat-footer flex-wrap'>
   <view class='flex-item ' bindtap='send1'> <text class="iconfont icon-yuyin" style='vertical-align: 0;padding-right:0; '></text></view>
   <view class='flex-item5'>
      <input class='input'  bindinput="bindKeyInput" value="{{inputValue}}" placeholder="对ta发送消息"/>
   </view>
   <view class='flex-item2 send' bindtap='bindConfirm'>发送</view>
</view>

WXSS代码

.flex-wrap.s ,.house{
  flex-direction:row-reverse;

}
.h49{
  width: 100%;
  height: 49px;
}
.chat-item.flex-wrap.s{
  margin: 20px 10px 20px 0px;

}
.chat-item.flex-wrap{
  line-height: 20px;
  height: auto;
  margin: 20px 0px 20px 10px;
  
}
.chat-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 49px;
  background: #ffffff;
}
.send{
  width: 100%;
  height: 49px;
  line-height: 49px;
  text-align: center;
  background: #69BEFF;
  color: #ffffff;
  font-size: 16px;
}
.icon-yuyin::before{
  font-size: 70rpx;
  color: #7F8389;
  display: block;
  height: 49px;
  line-height: 49px;
  text-align: center;
}
.input{
  height: 49px;
  line-height: 49px;
  font-size: 13px;
}
.avatar{
  width: 40px;
  height: 40px;
  background: #69BEFF;
  border-radius:50%;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
}
.chat-item.flex-wrap .content{
  background: #ffffff;
  margin-left: 10px;
  padding:12px;
  border-radius:10px; 
  width: auto;
  max-width: 480rpx;
  font-size: 15px;
  text-align: justify;
}
.chat-item.flex-wrap.house{
  margin-right: 10px;
}

.chat-item.flex-wrap.s .content{
  margin-right: 10px;
  background: #69BEFF;
  color: #ffffff;
}
.chat-item.flex-wrap.house .content{
  margin-right: 10px;
  padding: 0;
  width: 520rpx;
  
}
.content .img{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.chat-time{
  width: 80px;
  height: 21px;
  line-height: 21px;
  background: #CECECE;
  color: #ffffff;
  font-size: 12px;
  margin: 20px auto 0px;
  text-align: center;
  border-radius:5px;

}
.content .info{
  padding:0 20rpx 20rpx;
}
.info-price{
  color: #E93D26;
  font-size: 14px;
}
.info-title{
  color: #999999;
  font-size: 12px;
}
.info-type{
  width: 50px;
  height: 18px;
  line-height: 18px;
  color: #ffffff;
  font-size: 12px;
  background: #CECECE;
  text-align: center;
  border-radius: 2px;

}
.footer-h{
  height: 49px;
  width: 100%;
}

js代码


var webim = require('../../utils/webim.js');
var webimhandler = require('../../utils/webim_handler.js');
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    noData: app.data.imageUrl + '/no-msg.png',
    houseDefault: app.data.imageUrl + '/msg-default.png',
    inputValue:'',//发送的文字消息内容
    myMessages: [],//消息
    selToID:0,
    scrollTop: 0,
    houseId:'',//房源id
    type:'',//房源类型
    height:'',
    complete:0,//默认为有历史记录可以拉取
    is_lock:true//发送消息锁
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    var that = this;
    
    that.setData({
      height: wx.getSystemInfoSync().windowHeight
    })
    
    if(options){
      if(options.id){//设置会话列表传参过来的为好友id
        that.setData({
          selToID: options.id
        })
        wx.setNavigationBarTitle({
          title: options.name
        })
      }else if (!options.dockingname){//非经纪人角色,私聊账号为推荐经纪人账号
        that.setData({
          selToID: app.data.userInfo.agent_member_id.toString(),
          houseId: options.houseid,
          type:options.type
        })
        wx.setNavigationBarTitle({
          title: '置业顾问' + app.data.userInfo.agent_name
        })
        //拉取所需要自定义的消息数据发送
        that.createhousemsg();
       
      }else{
        that.setData({
          selToID: options.agent_member_id ,
          houseId: options.houseid,
          type: options.type
        })
        wx.setNavigationBarTitle({
          title: '盘方顾问' + options.dockingname
        })
        //拉取所需要自定义的消息数据发送
        that.createhousemsg();
      }
    }
    
  },
  onShow:function () {
    var that = this;    
    wx.setStorageSync('msgKey', '')
    wx.setStorageSync('lastMsgTime', '')
    webimhandler.init({
      accountMode: app.data.Config.accountMode
      , accountType: app.data.Config.accountType
      , sdkAppID: app.data.Config.sdkappid
      , selType: webim.SESSION_TYPE.C2C//私聊
      , agent_member_id: app.data.userInfo.id
      , id: that.data.selToID  
      , name: app.data.userInfo.agent_name
      , icon: app.data.userInfo.agent_pic,
      that: that
    });
    if (webim.checkLogin()) {
      webimhandler.getC2CHistoryMsgs();
    } else {
      webimhandler.sdkLogin(that,app, this.data.selToID,()=> {
        //获取聊天历史记录
        webimhandler.getC2CHistoryMsgs();

      });
    }
    
  },
  //创建自定义房源消息体
  createhousemsg:function(){
    var that = this;
    var param = {
      app_token: app.data.userInfo.app_token,
      id: that.data.houseId,
      type: that.data.type
    }
    app.request('get', 'createhousemsg', that, param,
      (data) => {
	      //这里的data.array.MsgContent为获取到需要发送的消息体字段
        webimhandler.sendCustomMsg(data.array.MsgContent, (data)=>{
          var myMessages = that.setDatas(data)
            that.setData({
              myMessages: myMessages,
            })
          setTimeout(function () {
            that.pageScrollToBottom()
          }, 100)
        })
      }, () => {
        setTimeout(function () {
          login.login(app)
        }, 500)
      }, () => {
        wx.navigateBack({
          delta: 1
        })
        return;
      })
  },

  //获取普通文本消息
  bindKeyInput:function(e){
    var that = this;
     that.setData({
      inputValue:e.detail.value
    })
  },
  // 发送普通文本消息
  bindConfirm: function(e) {
    var that = this;
    
    if(that.data.is_lock){
      that.setData({
        is_lock:false
      })
      if (that.data.inputValue.length == 0) {
        wx.showToast({
          title: '消息不能为空!',
          icon:'none'
        })
        that.setData({
          is_lock: true
        })
        return;
      }
      var content = that.data.inputValue;
      if (!content.replace(/^\s*|\s*$/g, '')) return;
      webimhandler.onSendMsg(content)
    }
  },
  // 清除输入框
  clearInput:function(e){
    this.setData({
      inputValue:''
    })
  },
  /**
   * 下拉上翻历史记录
   */
  onPullDownRefresh: function () {
    if (this.data.complete == 0){

    
      wx.showLoading({
        title: '加载历史记录中...',
      })
      var that = this;
      webimhandler.getPrePageC2CHistoryMsgs()
      wx.stopPullDownRefresh();
    }else{
      wx.showToast({
        title: '没有更多历史记录了',
        icon:'none'
      })
    }
  },

  // 滚动最底部
  pageScrollToBottom: function () {
      wx.createSelectorQuery().select('#chat').boundingClientRect(function (rect) {
        // 使页面滚动到底部
        wx.pageScrollTo({
          scrollTop: rect.bottom
        })
      }).exec()
  },
  // 跳转房源详情
  linkDetail:function(e){
    switch (e.currentTarget.dataset.type){
      case '新房':
        wx.navigateTo({
          url: '../newHouseDetail/newHouseDetail?id=' + e.currentTarget.dataset.id,
        })
        break;
      case '二手房':
        wx.navigateTo({
          url: '../useroomDetail/useroomDetail?id=' + e.currentTarget.dataset.id,
        })
        break;
      case '租房':
        wx.navigateTo({
          url: '../rentroomDetail/rentroomDetail?id=' + e.currentTarget.dataset.id,
        })
        break;
      case '小区':
        wx.navigateTo({
          url: '../unitDetail/unitDetail?id=' + e.currentTarget.dataset.id,
        })
        break;
    }
  },
  setDatas: function (data){
    var that = this;
    var myMessages = data.map((item, index) => {

      switch (item.type) {
        case 1:
          item.type = '二手房'
          break;
        case 2:
          item.type = '租房'
          break;
        case 3:
          item.type = '小区'
          break;
        case 4:
          item.type = '新房'
          break;
      }
      if (item.img == '') {
        item.img = that.data.houseDefault
      }
      return item;
    })

    return myMessages;

  }

  

})

发送自定义消息

//发送消息(自定义消息)
function sendCustomMsg(msgs,callback) {
  var data = msgs.Data;//数据
  var desc = msgs.Desc;//描述
  var ext = msgs.Ext;//拓展字段
  var msgLen = webim.Tool.getStrBytes(data);
  if (msgs.length < 1) {
    alert("发送的消息不能为空!");
    return;
  }
  var maxLen, errInfo;
  if (selType == webim.SESSION_TYPE.C2C) {
    maxLen = webim.MSG_MAX_LENGTH.C2C;
    errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
  } else {
    maxLen = webim.MSG_MAX_LENGTH.GROUP;
    errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
  }
  if (msgLen > maxLen) {
    alert(errInfo);
    return;
  }
  if (!selSess) {
    selSess = new webim.Session(selType, id, name, icon, Math.round(new Date().getTime() / 1000));
  }
  var msg = new webim.Msg(selSess, true, -1, -1, -1, id, 0, name);
  var custom_obj = new webim.Msg.Elem.Custom(data, desc, ext);

  msg.addCustom(custom_obj);
  msg.sending = 1;
  // //调用发送消息接口
  webim.sendMsg(msg, function (resp) {
    if (selType == webim.SESSION_TYPE.C2C) {
      // 处理消息
      handlderMsg(msg,false);
      // 获取头像
      getMyAvatar(id, agent_member_id,function(){
        callback(currentMsgsArray)
      });
    }
    that.msginformagent(id, msgs)
    webim.Log.info("发消息成功");
  }, function (err) {
    webim.Log.info("发消息失败");
   
  });
}

// 解析消息（普通文本消息，自定义消息）
function convertMsg(msg, prepend) {
    var that = this;
    var elems, elem, type, content, isSelfSend, ifromAccount;
    elems = msg.getElems();
    isSelfSend = msg.getIsSend(); //消息是否为自己发的 true是自己发送，
    ifromAccount = msg.fromAccount
    for (var i in elems) {
        var currentMsg = {}; 
        elem = elems[i];
        type = elem.getType();
        content = elem.getContent();
        switch (type) {
            case webim.MSG_ELEMENT_TYPE.TEXT://文本消息
                var msgContent = convertTextMsgToHtml(content);
                var msgTime = msg.getTime();//得到当前消息发送的时间
                //解析时间
              convertTime(msgTime, function (data) {
              currentMsg.id = ifromAccount;//房源标题                
              currentMsg.msgContent = msgContent;//当前消息的内容
              currentMsg.img = '';
              currentMsg.msgTime = data;
              currentMsg.name = ''
              currentMsg.price = '';
              currentMsg.isSelfSend = isSelfSend;
              currentMsg.ifromAccount = ifromAccount;
              currentMsg.type = '';
                if (prepend){
                  historyMsgsArray.push(currentMsg)
                  
                }else{
                  currentMsgsArray.push(currentMsg);
                }
              
            })

            break;
            case webim.MSG_ELEMENT_TYPE.CUSTOM://自定义消息
              var msgContent = convertCustomMsgToHtml(content);
              var msgTime = msg.getTime();//得到当前消息发送的时间
                  if (msgContent.data == ''){
                    
                  }else{
                    msgContent = JSON.parse(msgContent.data)
                  }
                
                convertTime(msgTime, function (data) {
                  currentMsg.id = msgContent.id//房源标题
                  currentMsg.img = msgContent.img//房源图片
                  currentMsg.msgTime = data;//消息时间                
                  currentMsg.name = msgContent.name //楼盘名称
                  currentMsg.price = msgContent.price //价格
                  currentMsg.type = msgContent.type //类型（1二手房，2租房，3小区，4新房）
                  currentMsg.isSelfSend = isSelfSend;//默认右边
                  currentMsg.ifromAccount = ifromAccount;
                  if (prepend){
                    historyMsgsArray.push(currentMsg)
                  }else{
                    currentMsgsArray.push(currentMsg);
                  }
                })
              

            break;
        }


    }

}

// 解析自定义消息
function convertCustomMsgToHtml(content) {
  var data = content.getData();
  var desc = content.getDesc();
  var ext = content.getExt();
  var content = {
    data:data,
    desc: desc,
    ext: ext
  }
  return content;
}

发送普通文本消息

//发送消息(普通消息)
function onSendMsg(msg) {

    //获取消息内容
    var msgtosend = msg;
    var msgLen = webim.Tool.getStrBytes(msg);
    // 创建会话对象
    if (!selSess) {
        selSess = new webim.Session(selType, id, name, icon, Math.round(new Date().getTime() / 1000));
    }
    var isSend = true;//是否为自己发送
    var seq = -1;//消息序列，-1表示sdk自动生成，用于去重
    var random = Math.round(Math.random() * 4294967296);//消息随机数，用于去重
    var msgTime = Math.round(new Date().getTime() / 1000);//消息时间戳
    var subType = webim.C2C_MSG_SUB_TYPE.COMMON;//消息子类型c2c消息时，参考c2c消息子类型对象：webim.C2C_MSG_SUB_TYPE 
    //loginInfo.identifier消息发送者账号,loginInfo.identifierNick消息发送者昵称
    var msg = new webim.Msg(selSess, isSend, seq, random, msgTime, id, subType, name );
    //解析文本和表情
    var expr = /\[[^[\]]{1,3}\]/mg;
    var emotions = msgtosend.match(expr);
    if (!emotions || emotions.length < 1) {
        var text_obj = new webim.Msg.Elem.Text(msgtosend);
        msg.addText(text_obj);
    } else {//有表情
    
    }
    
    webim.sendMsg(msg, function (resp) {
        if (selType == webim.SESSION_TYPE.C2C) {//私聊时，在聊天窗口手动添加一条发的消息

          handlderMsg(msg,false);
          // 设置双方头像
          getMyAvatar(id, agent_member_id, function () {
            that.clearInput();
            var myMessages = that.setDatas(currentMsgsArray);
            that.setData({
              myMessages: myMessages,
              is_lock: true
            })
           
            // setTimeout(function () {
              that.pageScrollToBottom()
            // }, 100)
          });

          that.msginformagent(id, msgtosend)          
          webim.Log.info("发消息成功");
        }
        
     
    }, function (err) {
        webim.Log.error("发消息失败:" + err.ErrorInfo);
    });
}


//解析文本消息元素
function convertTextMsgToHtml(content) {
    return content.getText();
}

统一处理文本消息，自定义消息

// 解析消息（普通文本消息，自定义消息）
function convertMsg(msg, prepend) {
    var that = this;
    var elems, elem, type, content, isSelfSend, ifromAccount;
    elems = msg.getElems();
    isSelfSend = msg.getIsSend(); //消息是否为自己发的 true是自己发送，
    ifromAccount = msg.fromAccount
    for (var i in elems) {
        var currentMsg = {}; 
        elem = elems[i];
        type = elem.getType();
        content = elem.getContent();
        switch (type) {
            case webim.MSG_ELEMENT_TYPE.TEXT://文本消息
                var msgContent = convertTextMsgToHtml(content);
                var msgTime = msg.getTime();//得到当前消息发送的时间
                //解析时间
              convertTime(msgTime, function (data) {
              currentMsg.id = ifromAccount;//房源标题                
              currentMsg.msgContent = msgContent;//当前消息的内容
              currentMsg.img = '';
              currentMsg.msgTime = data;
              currentMsg.name = ''
              currentMsg.price = '';
              currentMsg.isSelfSend = isSelfSend;
              currentMsg.ifromAccount = ifromAccount;
              currentMsg.type = '';
                if (prepend){
                  historyMsgsArray.push(currentMsg)
                  
                }else{
                  currentMsgsArray.push(currentMsg);
                }
              
            })

            break;
            case webim.MSG_ELEMENT_TYPE.CUSTOM://自定义消息
              var msgContent = convertCustomMsgToHtml(content);
              var msgTime = msg.getTime();//得到当前消息发送的时间
                  if (msgContent.data == ''){
                    
                  }else{
                    msgContent = JSON.parse(msgContent.data)
                  }
                
                convertTime(msgTime, function (data) {
                  currentMsg.id = msgContent.id//房源标题
                  currentMsg.img = msgContent.img//房源图片
                  currentMsg.msgTime = data;//消息时间                
                  currentMsg.name = msgContent.name //楼盘名称
                  currentMsg.price = msgContent.price //价格
                  currentMsg.type = msgContent.type //类型（1二手房，2租房，3小区，4新房）
                  currentMsg.isSelfSend = isSelfSend;//默认右边
                  currentMsg.ifromAccount = ifromAccount;
                  if (prepend){
                    historyMsgsArray.push(currentMsg)
                  }else{
                    currentMsgsArray.push(currentMsg);
                  }
                })
              

            break;
        }


    }

}

发送消息成功之后，就需要监听新消息，更新消息的未读数了

//监听新消息(私聊(包括普通消息、全员推送消息)，普通群(非直播聊天室)消息)事件
//newMsgList 为新消息数组，结构为[Msg]
function onMsgNotify(newMsgList) {
    var newMsg;
    //获取所有聊天会话
 
    for (var j in newMsgList) {//遍历新消息
        newMsg = newMsgList[j];
        
        if (newMsg.getSession().id() == id) {//为当前聊天对象的消息
            selSess = newMsg.getSession();
            handlderMsg(newMsg, false);
            currentMsgsArray = currentMsgsArray.map((item, index) => {
              if (!item.isSelfSend) {
                item.avatar = myAvatar
              } else {
                item.avatar = friendAvatar
              }
              return item;
            })
            var myMessages = that.setDatas(currentMsgsArray);
            that.setData({
              myMessages: myMessages,

            })
            setTimeout(function () {
              if (that.data.is_chat){
                that.pageScrollToBottom()
              }
            }, 100)
          
        }
    }
    getUnread()
    
}


//更新消息未读数
function getUnread(){
  var sess= {};
  var sessMap = webim.MsgStore.sessMap();
  if (that.data.contactList) {
    // 更新消息的未读数
    for (var i in sessMap) {
      sess = sessMap[i];
      var contactList = that.data.contactList.map((item, index) => {
        if (item.To_Account == sess.id()) {
          item.UnreadMsgCount = sess.unread()
        }
        return item;
      })
      that.setData({
        contactList: contactList
      })
        // 获取最新的会话消息
        webim.getRecentContactList({
          'Count': 10 //最近的会话数 ,最大为 100
        }, function (resp) {
          var MsgShow = resp.SessionItem.filter((item, index) => {
            if (item.To_Account == sess.id()) return item;
          })
         
          var contactList = that.data.contactList.map((item, index) => {
            if (item.To_Account == sess.id()) {
              // 获取最新消息
              if (MsgShow[0].MsgShow == '[其他]'){
                MsgShow[0].MsgShow = '[房源信息]'
              }
              item.MsgShow = MsgShow[0].MsgShow
              
            }
            return item;
          })
          
          that.setData({
            contactList: contactList
          })

        })

      }
  }
}

发送消息就到这里了，历史记录下章讲

会飞的芦苇
关注
  • 5
    点赞
  • 踩
  • 67
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
专栏目录
微信小程序开发中的实时聊天和即时通讯
2401_85258012的博客
06-10 1554
在微信小程序开发中，实现实时聊天和即时通讯需要借助一些底层的网络通信协议和技术，常用的有 WebSocket、长连接等。微信小程序开发中的实时聊天和即时通讯是一个非常重要的功能，允许用户在小程序中进行实时的沟通和交流。在云开发控制台中创建一个云函数，用于处理客户端发来的消息并存储到数据库中。在小程序的页面中，可以使用 WebSocket API 来创建一个 WebSocket 连接，并实现发送和接收消息的功能。为了更好地理解和使用实时聊天和即时通讯的功能，下面给出一个完整的示例代码，并进行详细说明。
小程序引入腾讯IM实现即时通讯
weixin_45758177的博客
04-01 7132
记录一下小程序引入腾讯第三方SDK包 实现即时通讯功能，就是常见的客服聊天功能， 腾讯IM官方文档 踩坑开发完整个项目，当初碰到问题时，网上可参考的信息几乎为零，马马虎虎整理一下 希望对大家有所帮助。 由于小程序项目使用的原生开发，没有使用wepy等小程序框架，所以开发起来踩的坑还是很多的，下面总结一下。 1. 官方有个demo按照步骤执行就行，申请下’SDKAppID’ 这个在后边用得到demo...
微信小程序云开发实现一对一即时聊天，发送语音、文件、图片、添加好友等功能
06-16
利用云开发的即时通信demo做的仿照微信好友聊天。 实现 即时通信，即时发送文件，即时发送语音，更换聊天背景图、发送朋友圈(图片，视频等)，利用订阅消息发送好友申请的通知。 可以直接部署，具体的文章请看我的两篇 博客： 1. https://blog.csdn.net/weixin_41595277/article/details/102765508 2. https://blog.csdn.net/weixin_41595277/article/details/105350374
借助云开发，利用订阅消息，云函数路由实现小程序好友一对一聊天，添加好友等仿微信功能
欢迎光临
02-10 5708
借助微信小程序云开发，利用订阅消息，云函数路由实现小程序好友一对一聊天，添加好友等仿微信功能
微信小程序——聊天小程序（从搭建到结束）
qq_54462755的博客
08-06 9124
具体效果展示： 微信小程序——聊天功能（一、环境搭建）微信小程序——聊天功能（一、环境搭建）_星^0^星的博客-CSDN博客微信小程序——聊天功能（二、账号的注册与登录）微信聊天小程序——（二、账号的注册与登录）_星^0^星的博客-CSDN博客微信小程序——聊天功能（三、获取好友列表）微信聊天小程序——（三、获取好友列表）_星^0^星的博客-CSDN博客微信小程序——聊天功能（四、聊天页面）微信聊天小程序——（四、聊天页面）_星^0^星的博客-CSDN博客微信小程序——聊天功能（添加好友）微信聊天小程序——
小程序对接腾讯云IM即时聊天
weixin_42855188的博客
01-28 6204
小程序对接腾讯云IM即时聊天 步骤如下 导入sdk（tim-wx-sdk、cos-wx-sdk-v5） 初始化 登录 监听IM各个状态钩子 发送消息、接受消息 一：导入sdk 一：npm方式 // IM 小程序 SDK npm install tim-wx-sdk --save // 发送图片、文件等消息需要的 COS SDK npm install cos-wx-sdk-v5 --save 二：下载js引入方式（文章最后会提供完整代码） 二：初始化IM ...
微信小程序云开发实现群聊一对一聊天
最新发布
webkm的博客
12-11 301
实现功能：群聊+一对一聊天。后端：微信小程序云开发。组件：ColorUi。
有关微信小程序接入腾讯云IM即时通讯内容
m0_66327625的博客
01-18 2401
微信小程序接入腾讯云IM即时通讯（聊天窗口） 1.效果图： 2.功能点： 1.布局要分左右两边布局，如果是自己为发送消息方，都在右边，对方发送的消息在左边。 2.腾讯云返回的是时间戳，需要转换一下时间，腾讯云是没有返回头像的，需要单独获取并且设置自己跟对方的头像。 3.发送的消息分为自定义消息跟普通文本消息，带房源图片 跟价格和小区名称的是自定义的消息，从房源详情进入聊天就自动发送，普通文本消息则在底部栏发送。 4.获取聊天的历史记录，下拉上翻历史记录，这里没有做本地缓存，是做了每次进入都拉取.
微信小程序接入腾讯云验证码的方法步骤
11-29
在微信小程序开发中，...通过以上步骤，微信小程序就能成功接入腾讯云验证码，有效防止非正常用户行为，确保活动的公正性。在实际开发中，还需要根据具体业务需求进行调整和优化，例如增加错误处理、用户体验优化等。
IM-DEMO微信小程序即时通讯案例
10-16
而“IM-DEMO”则是专门针对微信小程序平台开发的一个即时通讯示例，它展示了如何在小程序环境中实现聊天、表情、语音、图片以及会话列表等常见IM功能。 1. **聊天功能**：这是IM的核心部分，IM-DEMO实现了用户之间...
微信小程序 集成腾讯云IM做的聊天室
01-08
初次接触集成的东西确实有点费劲，最终通过两天的摸爬滚打把腾讯云的IM集成到了我的微信小程序中了。 让大家看一下效果： 我的毕设项目中只是用了腾讯IM的单人一对一聊天，当然这个IM是支持群的，语音视频，几乎...
微信小程序接入指南
03-29
微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。 小程序注册 访问公众平台官网 在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”...
在微信小程序中使用IM即时通讯实现一对一聊天已经聊天室功能
2301_77922631的博客
05-19 1718
构建npm时有个异常，不过不影响正常使用，然后清除缓存并编译。腾讯云官网给出俩个方法，选择其中之一就可以，构建完成图下图。拿到SDKAPPID和SECRETKEY还有userID。因为本人没有可以使用的域名，所以开启了不校验合法域名。多创建几个用户便可以互相聊天啦。首先创建一个小程序项目。构建npm，并初始化。
【SpringBoot +小程序】实现webSocket即时会话功能源码《一对一、一对多》
qq_35808136的博客
04-22 2234
踩坑点： 使用域名建立websocket连接报404，但使用ip地址连接成功，经尝试需：1、该域名已经备案成功；2、指定端口（ws://**.*.*:82/*****） 微信小程序端： //建立连接 wx.connectSocket({ url: 'ws://localhost:82/insight/websocket/' + getApp().globalData....
【腾讯连连 腾讯物联网入门学习 第1篇】腾讯官方静鸡鸡发布的“腾讯连连”终于来了，按照官方教程教你在微信小程序实现配网、控制 ESP8266啦！
热门推荐
徐宏的博客 | 修身齐家治国平天下
03-17 1万+
【微信小程序控制硬件第1篇 】 全网首发，借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器，轻松控制智能硬件！ 【微信小程序控制硬件第2篇 】 开始微信小程序之旅，导入小程序Mqtt客户端源码，实现简单的验证和通讯于服务器！ 【微信小程序控制硬件第3篇 】 从软件到硬件搭建一个微信小程序控制esp8266的项目，自定义通讯协议，为面试职位和比赛项目加分！ 【微信小程序控制硬件...
微信小程序实现即时通信聊天功能 php swoole
02-15 7372
一、宝塔安装Swoole环境 二、自定义安装swoole环境 mkdir /src cd /src # 下载 wget https://pecl.php.net/get/swoole-4.4.4.tgz # 解压 tar zxf swoole-4.4.4.tgz # 编译安装扩展 # 进入目录 cd swoole-4.4.4 # 执行phpize命令，产生出configure可执行文件 /usr/bin/phpize # 进行配置 ./configure --with-
WebSocket+微信小程序一对一聊天
Dream的博客
10-31 2013
这里使用的是websocket+微信开发者工具实现一个一对一的用户聊天，服务端用的是宝塔来操作。我们需要先将我们的端口号放开，并且会使用到redis服务。
如何为微信小程序添加即时聊天功能
吃不胖.
09-27 761
在这里，我们可以通过使用即时聊天 SDK 提供的云端解决方案来轻松创建一个能够支持即时聊天的后端服务。整个过程中，我们需要注意保证数据的安全性和稳定性，同时结合自己的业务场景，进行必要的功能扩展和优化。为了在小程序中使用即时聊天 SDK，我们需要先在小程序后台中添加即时聊天 SDK 的插件，并在代码中引入 SDK 的代码。为了使用即时聊天 SDK 提供的云端解决方案，我们需要先在即时聊天管理控制台上创建一个应用。在代码中，我们还设置了监听器，当新消息到达时，会触发监听器的回调函数，从而实现消息的接收功能。
微信小程序接入腾讯地图
10-18
要接入腾讯地图，需要先在腾讯地图开放平台上注册账号并创建应用，然后在小程序中引入腾讯地图 SDK，并使用腾讯地图提供的 API 进行开发。具体步骤如下： 1. 在腾讯地图开放平台上注册账号并创建应用，获取开发者密钥（key）。 2. 在小程序中引入腾讯地图 SDK，可以使用官方提供的组件或者自己封装。 3. 使用腾讯地图提供的 API 进行开发，比如获取当前位置、搜索周边POI、绘制地图等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值