這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何在微信小程序中實(shí)現(xiàn)聊天對(duì)話功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、紅旗網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、紅旗網(wǎng)絡(luò)營(yíng)銷、紅旗企業(yè)策劃、紅旗品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供紅旗建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

to_news.wxml

 {{tabdata.title}}
 
  {{tabdata.attribute_attribute}}
  {{tabdata.num}}
 
 
 
  發(fā)布時(shí)間: {{tabdata.time_agree}}
 


 
 您正在與{{tabdata.nickname}}進(jìn)行溝通
 
  
   
    {{item.time}}
   
   
    
     
      {{item.content}}
      
      
      
       
     
    
   
   
    
     
      
       
      
      {{item.content}}
      
     
    
   
  
 



 
 發(fā)送
 
 

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
 },
 //事件處理函數(shù)
 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, '正在加載數(shù)據(jù)', function (res) {
   if (res.data.state == 1) {
    var a = true;
    that.loaddata(a);
    that.setData({
     news_input_val:''
    })
    message = ''
   } else {
    wx.showToast({
     title: '網(wǎng)絡(luò)錯(cuò)誤,請(qǐng)稍后',
    })
   }
  })
 },
 
 onLoad: function (options) {
  openid_talk = options.openid_talk;
  zx_info_id = options.zx_info_id;
  console.log(openid_talk)
  //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
  this.setData({
   zx_info_id: zx_info_id,
   nickName: app.nickName,
   avatarUrl: app.avatarUrl,
  });
  this.loaddata()
 },
 // 頁(yè)面加載
 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節(jié)點(diǎn)然后屏幕焦點(diǎn)調(diào)轉(zhuǎn)到這個(gè)節(jié)點(diǎn)
 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節(jié)點(diǎn)的下邊界坐標(biāo)
   })
   res[1].scrollTop // 顯示區(qū)域的豎直滾動(dòng)位置
  })
 },
 // 選擇圖片并把圖片保存 
 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', //提交信息至后臺(tái)
     filePath: tempFilePaths[0],
     name: 'content', //文件對(duì)應(yīng)的參數(shù)名字(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;
}
 
/* 聊天內(nèi)容 */
 
.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;
}

上述就是小編為大家分享的如何在微信小程序中實(shí)現(xiàn)聊天對(duì)話功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。