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


            本文实例为大家分享了微信小程序实现聊天对话功能的具体代码，供大家参考，具体内容如下

这是我实际项目线上的代码, 或许有些不足 || 和你的需求不符合。 

上图:



to_news.wxml







<!--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>



to_news.js







// 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 = ''

     }

    })

   }

  })

 }

})



to_news.wxss







/* 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;

}



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。