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

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

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

上图:

to_news.wxml

rush:xml;"> {{tabdata.title}} {{tabdata.attribute_attribute}} {{tabdata.num}} 发布时间: {{tabdata.time_agree}} 您正在与{{tabdata.nickname}}进行沟通 {{item.time}} {{item.content}} {{item.content}}

to_news.js

rush: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_talk: openid_talk } util.request('pg.PHP/ZXinfo/session_page','',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,}
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

rush:css;"> /* 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;
}

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