如何在微信小程序中实现聊天对话功能

这期内容当中小编将会给大家带来有关如何在微信小程序中实现聊天对话功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、成都做网站、外贸营销网站建设、红旗网络推广、微信小程序定制开发、红旗网络营销、红旗企业策划、红旗品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供红旗建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

to_news.wxml

 {{tabdata.title}}
 
  {{tabdata.attribute_attribute}}
  {{tabdata.num}}
 
 
 
  发布时间: {{tabdata.time_agree}}
 


 
 您正在与{{tabdata.nickname}}进行沟通
 
  
   
    {{item.time}}
   
   
    
     
      {{item.content}}
      
      
      
       
     
    
   
   
    
     
      
       
      
      {{item.content}}
      
     
    
   
  
 



 
 发送
 
 

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

上述就是小编为大家分享的如何在微信小程序中实现聊天对话功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

标题名称：如何在微信小程序中实现聊天对话功能
分享地址：http://cdiso.cn/article/jgjdeo.html