如何在微信小程序中實現聊天對話功能

這期內容當中小編將會給大家帶來有關如何在微信小程序中實現聊天對話功能，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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;
}

上述就是小編為大家分享的如何在微信小程序中實現聊天對話功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。