有关微信小程序接入腾讯云IM即时通讯内容

微信小程序接入腾讯云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{
widt