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


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 相关文章推荐
JavaScript学习笔记(二) js对象
Oct 25 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
这样回答继承可能面试官更满意
Dec 10 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 curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
Js+XML 操作
2006/09/20 Javascript
Prototype使用指南之enumerable.js
2007/01/10 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
python连接mysql有哪些方法
2020/06/24 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
python实现定时发送邮件
2020/12/23 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
新闻学毕业生自荐信
2013/11/15 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
财务人员个人工作总结
2015/02/27 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
离职告别感言
2015/08/04 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript
R9700摩机记
2022/04/05 无线电