• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

废话不多说, 先上图:


 

[html] view plain copy
 
  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>  

 

[javascript] view plain copy
 
  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. })  


 

 

 

[css] view plain copy
 
    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. }  

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
小程序获取unionid的方法发布时间：2022-07-18
下一篇：
mpvue框架使用小程序swiper和scroll-view制作tabbar发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap