微信小程序聊天对话

# 微信小程序聊天对话(文本,图片)的功能(完整代码附效果图)

<!--pages/index/to_news/to_news.wxml-->  
<view class='tab'>  
  <view class='lan'>{{tabdata.title}}</view>  
  <view class='tent'>  
    <text>{{tabdata.attribute_attribute}}</text>  
    <text class='fl_r '>{{tabdata.num}}</text>  
  </view>  
  <view class='xiahuaxian1'></view>  
  <view>  
    <text class='fabu'>发布时间: {{tabdata.time_agree}}</text>  
  </view>  
</view>  
<view class='news'>  
  <view class='xiahuaxian1 xiahuaxia'></view>  
  <view class='new_top_txt'>您正在与{{tabdata.nickname}}进行沟通</view>  
  <view class="historycon">  
    <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" class="history" wx:for="{{centendata}}" wx:key=''>  
      <view>  
        <text class='time'>{{item.time}}</text>  
      </view>  
      <block wx:if="{{item.is_show_right ==1}}">  
        <view class='my_right'>  
          <view class='page_row'>  
            <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>  
            <image wx:if='{{item.is_img}}' src='http://sz800800.cn/Uploads/{{item.content}}' class='new_imgtent'></image>  
            <view wx:if='{{!item.is_img}}' class='sanjiao my'></view>  
            <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容，显示在右边，右边渲染 nickname_owner，head_owner"}}' src='{{item.head_owner}}'></image>  
             <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容，显示在右边，右边渲染 nickname_open，head_open"}}' src='{{item.head_open}}'></image>  
          </view>  
        </view>  
      </block>  
      <block wx:else>  
        <view class='you_left'>  
          <view class='page_row'>  
            <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容，显示在左边，左边渲染 nickname_owner，head_owner"}}' src='{{item.head_owner}}'></image>  
             <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容，显示在左边，左边渲染 nickname_open，head_open"}}' src='{{item.head_open}}'></image>  
            <view wx:if='{{!item.is_img}}' class='sanjiao you'></view>  
            <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>  
            <image wx:if='{{item.is_img}}' src='http://sz800800.cn/Uploads/{{item.content}}' class='new_imgtent'></image>  
          </view>  
        </view>  
      </block>  
    </scroll-view>  
  </view>  
</view>  
<view class='hei' id="hei"></view>  
<view class="sendmessage">  
  <input type="emoji" bindinput="bindChange" confirm-type="done" value='{{news_input_val}}' placeholder="" />  
  <button catchtap="add">发送</button>  
  <input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />  
  <image bindtap="upimg1" class='jia_img' src='../../../images/jia_img.png'></image>  
</view>  

// pages/index/to_news/to_news.js  
var app = getApp();  
var util = require("../../../utils/util.js")  
var message = '';  
var text = '';  
var user = {};  
var length;  
var zx_info_id;  
var openid_talk;  
Page({  
  data: {  
    news: '',  
    scrollTop: 0,  
    message: '',  
    text: text,  
    centendata: '',  
    nickName: '',  
    avatarUrl: '',  
    news_input_val:'',  
    tabdata: ''  
  },  
  bindChange: function (e) {  
    message = e.detail.value  
  },  
  //事件处理函数  
  add: function (e) {  
    var that = this  
    var data = {  
      program_id: app.jtappid,  
      openid: app._openid,  
      zx_info_id: zx_info_id,  
      content: message,  
      openid_talk:openid_talk  
    }  
    util.request('pg.php/ZXinfo/session_submit', 'post', data, '正在加载数据', function (res) {  
      if (res.data.state == 1) {  
        var a = true;  
        that.loaddata(a);  
        that.setData({  
          news_input_val:''  
        })  
        message = ''  
      } else {  
        wx.showToast({  
          title: '网络错误,请稍后',  
        })  
      }  
    })  
  },  
  
  onLoad: function (options) {  
    openid_talk = options.openid_talk;  
    zx_info_id = options.zx_info_id;  
    console.log(openid_talk)  
    //调用应用实例的方法获取全局数据  
    this.setData({  
      zx_info_id: zx_info_id,  
      nickName: app.nickName,  
      avatarUrl: app.avatarUrl,  
    });  
    this.loaddata()  
  },  
  // 页面加载  
  loaddata: function (a) {  
    var that = this;  
    var is_img = true;  
    var data = {  
      program_id: app.jtappid,  
      openid: app._openid,  
      zx_info_id: zx_info_id,  
      openid_talk: openid_talk  
    }  
    util.request('pg.php/ZXinfo/session_page', 'post', data, '', function (res) {  
      if (res.data.k1) {  
        res.data.k1.time_agree = util.js_date_time(res.data.k1.time_agree)  
      }  
      for (var i = 0; i < res.data.k2.length; i++) {  
        res.data.k2[i].time = util.js_date_time(res.data.k2[i].time)  
        var n = res.data.k2[i].content.charAt(res.data.k2[i].content.length - 1);  
        switch (n) {  
          case 'g':  
            res.data.k2[i].is_img = is_img  
            break;  
          default:  
        }  
      }  
      that.setData({  
        tabdata: res.data.k1,  
        centendata: res.data.k2.reverse()  
      })  
      wx.setNavigationBarTitle({ title: that.data.tabdata.nickname });  
      if (a) {  
        setTimeout(function () {  
            that.bottom()  
        }, 500);  
      }  
    })  
    setTimeout(function () {  
      if (that.data.centendata.length != length) {  
        length = that.data.centendata.length  
      }  
      that.loaddata()  
    }, 3000);  
      
  },  
  // 获取hei的id节点然后屏幕焦点调转到这个节点  
  bottom: function () {  
    var query = wx.createSelectorQuery()  
    query.select('#hei').boundingClientRect()  
    query.selectViewport().scrollOffset()  
    query.exec(function (res) {  
      wx.pageScrollTo({  
        scrollTop: res[0].bottom  // #the-id节点的下边界坐标  
      })  
      res[1].scrollTop // 显示区域的竖直滚动位置  
    })  
  },  
  // 选择图片并把图片保存    
  upimg1: function () {  
    var that = this;  
    wx.chooseImage({  
      success: function (res) {  
        var data = {  
          program_id: app.jtappid,  
          openid: app._openid,  
          zx_info_id: zx_info_id,  
        }  
        var tempFilePaths = res.tempFilePaths  
        wx.uploadFile({  
          url: 'pg.php/ZXinfo/session_submit', //提交信息至后台  
          filePath: tempFilePaths[0],  
          name: 'content', //文件对应的参数名字(key)  
          formData: data,  //其它的表单信息  
          success: function (res) {  
            var a = true;  
            that.loaddata(a);  
            message = ''  
          }  
        })  
      }  
    })  
  }  
}) 

  
page {  
  background-color: #f7f7f7;  
}  
  
.tab {  
  padding: 20rpx 20rpx 40rpx 50rpx;  
  height: 20%;  
  background-color: white;  
}  
  
.tab .tent {  
  font-size: 33rpx;  
  margin-bottom: 30rpx;  
}  
.jia_img{  
  height: 80rpx;  
  width: 90rpx;  
}  
.new_imgtent{  
    height: 180rpx;  
  width: 190rpx;  
}  
.tab .fabu {  
  font-size: 33rpx;  
  margin-top: 30rpx;  
  margin-bottom: 30rpx;  
}  
  
.xiahuaxia {  
  width: 80%;  
  text-align: center;  
  margin: 0 auto;  
  position: relative;  
  top: 60rpx;  
}  
  
.time {  
  text-align: center;  
  padding: 5rpx 20rpx 5rpx 20rpx;  
  width: 200rpx;  
  font-size: 26rpx;  
  background-color: #E8E8E8;  
}  
  
.new_top_txt {  
  width: 50%;  
  position: relative;  
  top: 38rpx;  
  text-align: center;  
  margin: 0 auto;  
  font-size: 30rpx;  
  color: #787878;  
  background-color: #f7f7f7;  
}  
  
/* 聊天内容 */  
  
.news {  
  margin-top: 30rpx;  
  text-align: center;  
  margin-bottom: 150rpx;  
}  
  
.img_null {  
  height: 60rpx;  
}  
  
.l {  
  height: 5rpx;  
  width: 20%;  
  margin-top: 30rpx;  
  color: #000;  
}  
  
/* 聊天 */  
  
.my_right {  
  float: right;  
  position: relative;  
  right: 40rpx;  
}  
  
.you_left {  
  float: left;  
  position: relative;  
  left: 5rpx;  
}  
  
.new_img {  
  width: 100rpx;  
  height: 100rpx;  
  border-radius: 50%;  
}  
  
.new_txt {  
  width: 380rpx;  
  border-radius: 7px;  
  background-color: #95d4ff;  
  padding: 0rpx 30rpx 0rpx 30rpx;  
}  
  
.sanjiao {  
  top: 20rpx;  
  position: relative;  
  width: 0px;  
  height: 0px;  
  border-width: 10px;  
  border-style: solid;  
}  
  
.my {  
  border-color: transparent transparent transparent #95d4ff;  
}  
  
.you {  
  border-color: transparent #95d4ff transparent transparent;  
}  
  
.sendmessage {  
  background-color: white;  
  width: 100%;  
  position: fixed;  
  bottom: 0rpx;  
  display: flex;  
  flex-direction: row;  
}  
  
.sendmessage input {  
  width: 80%;  
  height: 40px;  
  background-color: white;  
  line-height: 40px;  
  font-size: 14px;  
  border: 1px solid #d0d0d0;  
  padding-left: 10px;  
}  
  
.sendmessage button {  
  border: 1px solid white;  
  width: 18%;  
  height: 40px;  
  background: #fff;  
  color: #000;  
  line-height: 40px;  
  font-size: 14px;  
}  
  
.historycon {  
  height: 90%;  
  width: 100%;  
  flex-direction: column;  
  display: flex;  
  margin-top: 100rpx;  
  border-top: 0px;  
}  
.hei{  
  margin-top: 50px;  
  height: 20rpx;  
}  
.history {  
  height: 100%;  
  margin-top: 15px;  
  margin: 10px;  
  font-size: 14px;  
  line-height: 40px;  
  word-break: break-all;  
}