devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)_微信小程序 在线文本对话

作者：小丑西瓜9 | 2024-03-14 06:25:27

赞

踩

微信小程序 在线文本对话

相关文章：

1.小程序聊天群，发送语音，文字，图片。

2.微信小程序集成腾讯IM，实现实时音视频通话，1V1聊天

3.云开发微信小程序聊天群

4.接入网易云信IM即时通讯的微信小程序聊天室

5.微信小程序聊天功能 WebSocket 实现发送文字，图片，语音以及WebSocket 常见问题解决方案

6.[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)

如果有个性化的需要修改，可以联系我的微信。

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

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

上图:

 

  1. <!--pages/index/to_news/to_news.wxml-->
  2. <view class='tab'>
  3.   <view class='lan'>{{tabdata.title}}</view>
  4.   <view class='tent'>
  5.     <text>{{tabdata.attribute_attribute}}</text>
  6.     <text class='fl_r '>{{tabdata.num}}</text>
  7.   </view>
  8.   <view class='xiahuaxian1'></view>
  9.   <view>
  10.     <text class='fabu'>发布时间: {{tabdata.time_agree}}</text>
  11.   </view>
  12. </view>
  13. <view class='news'>
  14.   <view class='xiahuaxian1 xiahuaxia'></view>
  15.   <view class='new_top_txt'>您正在与{{tabdata.nickname}}进行沟通</view>
  16.   <view class="historycon">
  17.     <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" class="history" wx:for="{{centendata}}" wx:key=''>
  18.       <view>
  19.         <text class='time'>{{item.time}}</text>
  20.       </view>
  21.       <block wx:if="{{item.is_show_right ==1}}">
  22.         <view class='my_right'>
  23.           <view class='page_row'>
  24.             <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>
  25.             <image wx:if='{{item.is_img}}' src='http://sz800800.cn/Uploads/{{item.content}}' class='new_imgtent'></image>
  26.             <view wx:if='{{!item.is_img}}' class='sanjiao my'></view>
  27.             <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容，显示在右边，右边渲染 nickname_owner，head_owner"}}' src='{{item.head_owner}}'></image>
  28.              <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容，显示在右边，右边渲染 nickname_open，head_open"}}' src='{{item.head_open}}'></image>
  29.           </view>
  30.         </view>
  31.       </block>
  32.       <block wx:else>
  33.         <view class='you_left'>
  34.           <view class='page_row'>
  35.             <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容，显示在左边，左边渲染 nickname_owner，head_owner"}}' src='{{item.head_owner}}'></image>
  36.              <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容，显示在左边，左边渲染 nickname_open，head_open"}}' src='{{item.head_open}}'></image>
  37.             <view wx:if='{{!item.is_img}}' class='sanjiao you'></view>
  38.             <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>
  39.             <image wx:if='{{item.is_img}}' src='http://sz800800.cn/Uploads/{{item.content}}' class='new_imgtent'></image>
  40.           </view>
  41.         </view>
  42.       </block>
  43.     </scroll-view>
  44.   </view>
  45. </view>
  46. <view class='hei' id="hei"></view>
  47. <view class="sendmessage">
  48.   <input type="emoji" bindinput="bindChange" confirm-type="done" value='{{news_input_val}}' placeholder="" />
  49.   <button catchtap="add">发送</button>
  50.   <input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />
  51.   <image bindtap="upimg1" class='jia_img' src='../../../images/jia_img.png'></image>
  52. </view>

 

  1. // pages/index/to_news/to_news.js
  2. var app = getApp();
  3. var util = require("../../../utils/util.js")
  4. var message = '';
  5. var text = '';
  6. var user = {};
  7. var length;
  8. var zx_info_id;
  9. var openid_talk;
  10. Page({
  11.   data: {
  12.     news: '',
  13.     scrollTop: 0,
  14.     message: '',
  15.     text: text,
  16.     centendata: '',
  17.     nickName: '',
  18.     avatarUrl: '',
  19.     news_input_val:'',
  20.     tabdata: ''
  21.   },
  22.   bindChange: function (e) {
  23.     message = e.detail.value
  24.   },
  25.   //事件处理函数
  26.   add: function (e) {
  27.     var that = this
  28.     var data = {
  29.       program_id: app.jtappid,
  30.       openid: app._openid,
  31.       zx_info_id: zx_info_id,
  32.       content: message,
  33.       openid_talk:openid_talk
  34.     }
  35.     util.request('pg.php/ZXinfo/session_submit', 'post', data, '正在加载数据', function (res) {
  36.       if (res.data.state == 1) {
  37.         var a = true;
  38.         that.loaddata(a);
  39.         that.setData({
  40.           news_input_val:''
  41.         })
  42.         message = ''
  43.       } else {
  44.         wx.showToast({
  45.           title: '网络错误,请稍后',
  46.         })
  47.       }
  48.     })
  49.   },
  50.  
  51.   onLoad: function (options) {
  52.     openid_talk = options.openid_talk;
  53.     zx_info_id = options.zx_info_id;
  54.     console.log(openid_talk)
  55.     //调用应用实例的方法获取全局数据
  56.     this.setData({
  57.       zx_info_id: zx_info_id,
  58.       nickName: app.nickName,
  59.       avatarUrl: app.avatarUrl,
  60.     });
  61.     this.loaddata()
  62.   },
  63.   // 页面加载
  64.   loaddata: function (a) {
  65.     var that = this;
  66.     var is_img = true;
  67.     var data = {
  68.       program_id: app.jtappid,
  69.       openid: app._openid,
  70.       zx_info_id: zx_info_id,
  71.       openid_talk: openid_talk
  72.     }
  73.     util.request('pg.php/ZXinfo/session_page', 'post', data, '', function (res) {
  74.       if (res.data.k1) {
  75.         res.data.k1.time_agree = util.js_date_time(res.data.k1.time_agree)
  76.       }
  77.       for (var i = 0; i < res.data.k2.length; i++) {
  78.         res.data.k2[i].time = util.js_date_time(res.data.k2[i].time)
  79.         var n = res.data.k2[i].content.charAt(res.data.k2[i].content.length - 1);
  80.         switch (n) {
  81.           case 'g':
  82.             res.data.k2[i].is_img = is_img
  83.             break;
  84.           default:
  85.         }
  86.       }
  87.       that.setData({
  88.         tabdata: res.data.k1,
  89.         centendata: res.data.k2.reverse()
  90.       })
  91.       wx.setNavigationBarTitle({ title: that.data.tabdata.nickname });
  92.       if (a) {
  93.         setTimeout(function () {
  94.             that.bottom()
  95.         }, 500);
  96.       }
  97.     })
  98.     setTimeout(function () {
  99.       if (that.data.centendata.length != length) {
  100.         length = that.data.centendata.length
  101.       }
  102.       that.loaddata()
  103.     }, 3000);
  104.     
  105.   },
  106.   // 获取hei的id节点然后屏幕焦点调转到这个节点
  107.   bottom: function () {
  108.     var query = wx.createSelectorQuery()
  109.     query.select('#hei').boundingClientRect()
  110.     query.selectViewport().scrollOffset()
  111.     query.exec(function (res) {
  112.       wx.pageScrollTo({
  113.         scrollTop: res[0].bottom  // #the-id节点的下边界坐标
  114.       })
  115.       res[1].scrollTop // 显示区域的竖直滚动位置
  116.     })
  117.   },
  118.   // 选择图片并把图片保存  
  119.   upimg1: function () {
  120.     var that = this;
  121.     wx.chooseImage({
  122.       success: function (res) {
  123.         var data = {
  124.           program_id: app.jtappid,
  125.           openid: app._openid,
  126.           zx_info_id: zx_info_id,
  127.         }
  128.         var tempFilePaths = res.tempFilePaths
  129.         wx.uploadFile({
  130.           url: 'pg.php/ZXinfo/session_submit', //提交信息至后台
  131.           filePath: tempFilePaths[0],
  132.           name: 'content', //文件对应的参数名字(key)
  133.           formData: data,  //其它的表单信息
  134.           success: function (res) {
  135.             var a = true;
  136.             that.loaddata(a);
  137.             message = ''
  138.           }
  139.         })
  140.       }
  141.     })
  142.   }
  143. })

 

 

 

 

 

 

 

  1. /* pages/index/to_news/to_news.wxss */
  2.  
  3. page {
  4.   background-color: #f7f7f7;
  5. }
  6.  
  7. .tab {
  8.   padding: 20rpx 20rpx 40rpx 50rpx;
  9.   height: 20%;
  10.   background-color: white;
  11. }
  12.  
  13. .tab .tent {
  14.   font-size: 33rpx;
  15.   margin-bottom: 30rpx;
  16. }
  17. .jia_img{
  18.   height: 80rpx;
  19.   width: 90rpx;
  20. }
  21. .new_imgtent{
  22.     height: 180rpx;
  23.   width: 190rpx;
  24. }
  25. .tab .fabu {
  26.   font-size: 33rpx;
  27.   margin-top: 30rpx;
  28.   margin-bottom: 30rpx;
  29. }
  30.  
  31. .xiahuaxia {
  32.   width: 80%;
  33.   text-align: center;
  34.   margin: 0 auto;
  35.   position: relative;
  36.   top: 60rpx;
  37. }
  38.  
  39. .time {
  40.   text-align: center;
  41.   padding: 5rpx 20rpx 5rpx 20rpx;
  42.   width: 200rpx;
  43.   font-size: 26rpx;
  44.   background-color: #E8E8E8;
  45. }
  46.  
  47. .new_top_txt {
  48.   width: 50%;
  49.   position: relative;
  50.   top: 38rpx;
  51.   text-align: center;
  52.   margin: 0 auto;
  53.   font-size: 30rpx;
  54.   color: #787878;
  55.   background-color: #f7f7f7;
  56. }
  57.  
  58. /* 聊天内容 */
  59.  
  60. .news {
  61.   margin-top: 30rpx;
  62.   text-align: center;
  63.   margin-bottom: 150rpx;
  64. }
  65.  
  66. .img_null {
  67.   height: 60rpx;
  68. }
  69.  
  70. .l {
  71.   height: 5rpx;
  72.   width: 20%;
  73.   margin-top: 30rpx;
  74.   color: #000;
  75. }
  76.  
  77. /* 聊天 */
  78.  
  79. .my_right {
  80.   float: right;
  81.   position: relative;
  82.   right: 40rpx;
  83. }
  84.  
  85. .you_left {
  86.   float: left;
  87.   position: relative;
  88.   left: 5rpx;
  89. }
  90.  
  91. .new_img {
  92.   width: 100rpx;
  93.   height: 100rpx;
  94.   border-radius: 50%;
  95. }
  96.  
  97. .new_txt {
  98.   width: 380rpx;
  99.   border-radius: 7px;
  100.   background-color: #95d4ff;
  101.   padding: 0rpx 30rpx 0rpx 30rpx;
  102. }
  103.  
  104. .sanjiao {
  105.   top: 20rpx;
  106.   position: relative;
  107.   width: 0px;
  108.   height: 0px;
  109.   border-width: 10px;
  110.   border-style: solid;
  111. }
  112.  
  113. .my {
  114.   border-color: transparent transparent transparent #95d4ff;
  115. }
  116.  
  117. .you {
  118.   border-color: transparent #95d4ff transparent transparent;
  119. }
  120.  
  121. .sendmessage {
  122.   background-color: white;
  123.   width: 100%;
  124.   position: fixed;
  125.   bottom: 0rpx;
  126.   display: flex;
  127.   flex-direction: row;
  128. }
  129.  
  130. .sendmessage input {
  131.   width: 80%;
  132.   height: 40px;
  133.   background-color: white;
  134.   line-height: 40px;
  135.   font-size: 14px;
  136.   border: 1px solid #d0d0d0;
  137.   padding-left: 10px;
  138. }
  139.  
  140. .sendmessage button {
  141.   border: 1px solid white;
  142.   width: 18%;
  143.   height: 40px;
  144.   background: #fff;
  145.   color: #000;
  146.   line-height: 40px;
  147.   font-size: 14px;
  148. }
  149.  
  150. .historycon {
  151.   height: 90%;
  152.   width: 100%;
  153.   flex-direction: column;
  154.   display: flex;
  155.   margin-top: 100rpx;
  156.   border-top: 0px;
  157. }
  158. .hei{
  159.   margin-top: 50px;
  160.   height: 20rpx;
  161. }
  162. .history {
  163.   height: 100%;
  164.   margin-top: 15px;
  165.   margin: 10px;
  166.   font-size: 14px;
  167.   line-height: 40px;
  168.   word-break: break-all;
  169. }

 

 

 

 

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号