微信小程序实现聊天对话(文本、图片)功能

<!--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.jsvar 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 = ''     }    })   }  }) }})

/* pages/index/to_news/to_news.wxss */ 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;}