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

废话不多说, 先上图:

 

[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. 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. }  

转载于:https://www.cnblogs.com/yixiao21/p/8349537.html