用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

【微信小程序】实现聊天功能完整实例代码附效果图和注释

Rolan 2017-12-28 00:30

下面是完整代码,可以实现发送以后自动把屏幕的焦点放在最后一条信息 view class='tab' view class='lan'{{tabdata.title}}/view view class='tent' text{{tabdata.attribute_attribute}}/text text class='fl_r '{{ ...

下面是完整代码,可以实现发送以后自动把屏幕的焦点放在最后一条信息

class='tab'>
class='lan'>{{tabdata.title}}
class='tent'>
{{tabdata.attribute_attribute}}
class='fl_r '>{{tabdata.num}}

class='xiahuaxian1'>

class='fabu'>发布时间: {{tabdata.time_agree}}


class='news'>
class='xiahuaxian1 xiahuaxia'>
class='new_top_txt'>您正在与{{tabdata.nickname}}进行沟通
class="historycon">
"true" scroll-top="{{scrollTop}}" class="history" wx:for="{{centendata}}" wx:key=''>

class='time'>{{item.time}}

if="{{item.is_show_right ==1}}">
class='my_right'>
class='page_row'>
if='{{!item.is_img}}' class='new_txt'>{{item.content}}
if='{{item.is_img}}' src='{{item.content}}' class='new_imgtent'>
if='{{!item.is_img}}' class='sanjiao my'>
class='new_img' wx:if='{{item.show_rignt == "是自己的内容,显示在右边,右边渲染 nickname_owner,head_owner"}}' src='{{item.head_owner}}'>
class='new_img' wx:if='{{item.show_rignt == "是自己的内容,显示在右边,右边渲染 nickname_open,head_open"}}' src='{{item.head_open}}'>



else>
class='you_left'>
class='page_row'>
class='new_img' wx:if='{{item.show_rignt == "不是自己的内容,显示在左边,左边渲染 nickname_owner,head_owner"}}' src='{{item.head_owner}}'>
class='new_img' wx:if='{{item.show_rignt == "不是自己的内容,显示在左边,左边渲染 nickname_open,head_open"}}' src='{{item.head_open}}'>
if='{{!item.is_img}}' class='sanjiao you'>
if='{{!item.is_img}}' class='new_txt'>{{item.content}}
if='{{item.is_img}}' src='{{item.content}}' class='new_imgtent'>






class='hei' id="hei">
class="sendmessage">
"emoji" bindinput="bindChange" confirm-type="done" value='{{news_input_val}}' placeholder="" />

'display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />
"upimg1" class='jia_img' src='../../../images/jia_img.png'>

// pages/index/tonews/tonews.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('/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('/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: '/session_submit', //提交信息至后台
filePath: tempFilePaths[0],
name: 'content', //文件对应的参数名字(key)
formData: data, //其它的表单信息
success: function (res) {
var a = true;
that.loaddata(a);
message = ''
}
})
}
})
}
})

/* pages/index/tonews/tonews.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:
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: JackLi356e 来自: 简书

相关阅读