zoukankan      html  css  js  c++  java

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

    废话不多说, 先上图:


    [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.    90rpx;  
      20. }  
      21. .new_imgtent{  
      22.     height: 180rpx;  
      23.    190rpx;  
      24. }  
      25. .tab .fabu {  
      26.   font-size: 33rpx;  
      27.   margin-top: 30rpx;  
      28.   margin-bottom: 30rpx;  
      29. }  
      30.   
      31. .xiahuaxia {  
      32.    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.    200rpx;  
      43.   font-size: 26rpx;  
      44.   background-color: #E8E8E8;  
      45. }  
      46.   
      47. .new_top_txt {  
      48.    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.    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.    100rpx;  
      93.   height: 100rpx;  
      94.   border-radius: 50%;  
      95. }  
      96.   
      97. .new_txt {  
      98.    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.    0px;  
      108.   height: 0px;  
      109.   border- 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.    100%;  
      124.   position: fixed;  
      125.   bottom: 0rpx;  
      126.   display: flex;  
      127.   flex-direction: row;  
      128. }  
      129.   
      130. .sendmessage input {  
      131.    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.    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.    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. }  
    这世界不缺善良，缺的是加了理智的善良。
  • 相关阅读:
    go 异常处理
    win10一行代码搭建本地html项目
    github搭建html网站到外网
    python生成动态个性二维码
    python+selenium通过加载用户配置实现免登陆
    python搭建本地共享文件服务器
    python画猫并打包成EXE文件
    python批量爬取猫咪图片
    解决-Chrome插件安装时程序包无效:"CRX_HEADER_INVALID"的错误
    移动自动化测试框架--openatx
  • 原文地址：https://www.cnblogs.com/yixiao21/p/8349537.html
Copyright © 2011-2022 走看看