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

废话不多说, 先上图:

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. onLoad: function (options) {
51. openid_talk = options.openid_talk;
52. zx_info_id = options.zx_info_id;
53. console.log(openid_talk)
54. //调用应用实例的方法获取全局数据
55. this.setData({
56. zx_info_id: zx_info_id,
57. nickName: app.nickName,
58. avatarUrl: app.avatarUrl,
59. });
60. this.loaddata()
61. },
62. // 页面加载
63. loaddata: function (a) {
64. var that = this;
65. var is_img = true;
66. var data = {
67. program_id: app.jtappid,
68. openid: app._openid,
69. zx_info_id: zx_info_id,
70. openid_talk: openid_talk
71. }
72. util.request('pg.php/ZXinfo/session_page', 'post', data, '', function (res) {
73. if (res.data.k1) {
74. res.data.k1.time_agree = util.js_date_time(res.data.k1.time_agree)
75. }
76. for (var i = 0; i < res.data.k2.length; i++) {
77. res.data.k2[i].time = util.js_date_time(res.data.k2[i].time)
78. var n = res.data.k2[i].content.charAt(res.data.k2[i].content.length - 1);
79. switch (n) {
80. case 'g':
81. res.data.k2[i].is_img = is_img
82. break;
83. default:
84. }
85. }
86. that.setData({
87. tabdata: res.data.k1,
88. centendata: res.data.k2.reverse()
89. })
90. wx.setNavigationBarTitle({ title: that.data.tabdata.nickname });
91. if (a) {
92. setTimeout(function () {
93. that.bottom()
94. }, 500);
95. }
96. })
97. setTimeout(function () {
98. if (that.data.centendata.length != length) {
99. length = that.data.centendata.length
100. }
101. that.loaddata()
102. }, 3000);
103. },
104. // 获取hei的id节点然后屏幕焦点调转到这个节点
105. bottom: function () {
106. var query = wx.createSelectorQuery()
107. query.select('#hei').boundingClientRect()
108. query.selectViewport().scrollOffset()
109. query.exec(function (res) {
110. wx.pageScrollTo({
111. scrollTop: res[0].bottom  // #the-id节点的下边界坐标
112. })
113. res[1].scrollTop // 显示区域的竖直滚动位置
114. })
115. },
116. // 选择图片并把图片保存
117. upimg1: function () {
118. var that = this;
119. wx.chooseImage({
120. success: function (res) {
121. var data = {
122. program_id: app.jtappid,
123. openid: app._openid,
124. zx_info_id: zx_info_id,
125. }
126. var tempFilePaths = res.tempFilePaths
127. wx.uploadFile({
128. url: 'pg.php/ZXinfo/session_submit', //提交信息至后台
129. filePath: tempFilePaths[0],
130. name: 'content', //文件对应的参数名字(key)
131. formData: data,  //其它的表单信息
132. success: function (res) {
133. var a = true;
134. that.loaddata(a);
135. message = ''
136. }
137. })
138. }
139. })
140. }
141. })

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