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

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

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

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

上图:

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.jshttp://

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;

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。