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


Posted in Javascript onJuly 06, 2018

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

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

上图:

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

to_news.wxml

<!--pages/index/to_news/to_news.wxml-->
<view class='tab'>
 <view class='lan'>{{tabdata.title}}</view>
 <view class='tent'>
  <text>{{tabdata.attribute_attribute}}</text>
  <text class='fl_r '>{{tabdata.num}}</text>
 </view>
 <view class='xiahuaxian1'></view>
 <view>
  <text class='fabu'>发布时间: {{tabdata.time_agree}}</text>
 </view>
</view>
<view class='news'>
 <view class='xiahuaxian1 xiahuaxia'></view>
 <view class='new_top_txt'>您正在与{{tabdata.nickname}}进行沟通</view>
 <view class="historycon">
  <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" class="history" wx:for="{{centendata}}" wx:key=''>
   <view>
    <text class='time'>{{item.time}}</text>
   </view>
   <block wx:if="{{item.is_show_right ==1}}">
    <view class='my_right'>
     <view class='page_row'>
      <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>
      <image wx:if='{{item.is_img}}' src='http://sz800800.cn/Uploads/{{item.content}}' class='new_imgtent'></image>
      <view wx:if='{{!item.is_img}}' class='sanjiao my'></view>
      <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容,显示在右边,右边渲染 nickname_owner,head_owner"}}' src='{{item.head_owner}}'></image>
       <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容,显示在右边,右边渲染 nickname_open,head_open"}}' src='{{item.head_open}}'></image>
     </view>
    </view>
   </block>
   <block wx:else>
    <view class='you_left'>
     <view class='page_row'>
      <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容,显示在左边,左边渲染 nickname_owner,head_owner"}}' src='{{item.head_owner}}'></image>
       <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容,显示在左边,左边渲染 nickname_open,head_open"}}' src='{{item.head_open}}'></image>
      <view wx:if='{{!item.is_img}}' class='sanjiao you'></view>
      <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>
      <image wx:if='{{item.is_img}}' src='http://sz800800.cn/Uploads/{{item.content}}' class='new_imgtent'></image>
     </view>
    </view>
   </block>
  </scroll-view>
 </view>
</view>
<view class='hei' id="hei"></view>
<view class="sendmessage">
 <input type="emoji" bindinput="bindChange" confirm-type="done" value='{{news_input_val}}' placeholder="" />
 <button catchtap="add">发送</button>
 <input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />
 <image bindtap="upimg1" class='jia_img' src='../../../images/jia_img.png'></image>
</view>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JS实现浏览器的title闪烁
Jul 08 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 #Javascript
小程序实现发表评论功能
Jul 06 #Javascript
vue中倒计时组件的实例代码
Jul 06 #Javascript
微信小程序websocket实现聊天功能
Mar 30 #Javascript
vue中锚点的三种方法
Jul 06 #Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 #Javascript
详解Angular如何正确的操作DOM
Jul 06 #Javascript
You might like
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
超级退弹代码
2008/07/07 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
Ubuntu下安装PyV8
2016/03/13 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
windows下python安装小白入门教程
2018/09/18 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
Pandas中resample方法详解
2019/07/02 Python
python的常见矩阵运算(小结)
2019/08/07 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
python实现移动木板小游戏
2020/10/09 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
大学生思想汇报范文
2013/12/31 职场文书
公司请假条范文
2014/04/11 职场文书
本科毕业生自荐信
2014/06/02 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
python缺失值填充方法示例代码
2022/12/24 Python