var utils = require("../../utils/util.js")Page({ /**  * 頁(yè)面的初始數(shù)據(jù)  */ data: {  newsList:[],  input:null,  openid:null }, /**  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載  */ onLoad: function (options) {  var _this = this;  wx.getStorage({   key: 'OPENID',   success: function(res) {    _this.setData({     openid:res.data    })   },  })  var _this = this;  //建立連接  wx.connectSocket({   url: "wss://www.chat.blingfeng.cn/websocket/"+_this.data.openid+"/"+options.to,  })  //連接成功  wx.onSocketOpen(function () {   console.log('連接成功');  })  wx.onSocketMessage(function(res){    var list = [];    list = _this.data.newsList;   var _data = JSON.parse(res.data);    list.push(_data);    console.log(list)    _this.setData({     newsList:list    })  }) }, /**  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成  */ onReady: function () { }, /**  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示  */ onShow: function () { }, /**  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏  */ onHide: function () { }, /**  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載  */ onUnload: function () { }, /**  * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作  */ onPullDownRefresh: function () { }, /**  * 頁(yè)面上拉觸底事件的處理函數(shù)  */ onReachBottom: function () { }, /**  * 用戶點(diǎn)擊右上角分享  */ onShareAppMessage: function () { }, send :function(){  var _this = this;  if(_this.data.input){  wx.sendSocketMessage({   data: _this.data.input,  })  var list = [];  list = this.data.newsList;  var temp = { 'message': _this.data.input, 'date': utils.formatTime(new Date()), type: 1 };  list.push(temp);  this.setData({   newsList:list,   input:null  })  } }, bindChange:function(res){  this.setData({   input: res.detail.value  }) }, back:function(){  wx.closeSocket();  console.log('連接斷開(kāi)'); }})

<!--pages/index/to_news/to_news.wxml--><view class='top-content'> <image src='images/back.png' class='back-icon' bindtap='back'></image> <view class="weui-cells__title" style=' display: flex;flex-direction: row;justify-content: center;margin-left:210rpx'>匿名聊天X</view></view><view class='news'> <view class="historycon">  <scroll-view scroll-y="true" class="history">   <block wx:for="{{newsList}}" wx:key>    <!--此處為other -->    <view wx:if="{{item.type==0}}">     <view>      <text class='chat-time'>{{item.date}}</text>     </view>     <view class='other-record'>      <image class='other-head-img' src='images/headimg.png'></image>      <view class='other-record-content-triangle'></view>      <view class='other-record-content'>      {{item.message}}</view>     </view>    </view>    <!--此處為結(jié)尾 -->    <!--此處為own -->    <view wx:else>     <view>      <text class='chat-time'>{{item.date}}</text>     </view>     <view class='own-record'>      <view class='own-record-content'>{{item.message}}</view>      <view class='own-record-content-triangle'></view>      <image class='own-head-img' src='images/headimg.png'></image>     </view>    </view>    <!-- own結(jié)尾 -->   </block>  </scroll-view> </view></view><view class='hei' id="hei"></view><view class="sendmessage"> <input class="chat-input" type="emoji" bindinput="bindChange" confirm-type="done" value='{{input}}' placeholder="" /> <button class="btn" type="primary" plain="true" bindtap='send'>發(fā)送</button> <input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" /></view>

page {  background-color: white; } .tab {  padding: 20rpx 20rpx 40rpx 50rpx;  height: 20%;  background-color: white; } .tab .tent {  font-size: 33rpx;  margin-bottom: 30rpx; } .jia_img{  height: 80rpx;  width: 90rpx; } .new_imgtent{   height: 180rpx;  width: 190rpx; } .tab .fabu {  font-size: 33rpx;  margin-top: 30rpx;  margin-bottom: 30rpx; } .xiahuaxia {  width: 80%;  text-align: center;  margin: 0 auto;  position: relative;  top: 60rpx; } .chat-time {  text-align: center;  padding: 5rpx 20rpx 5rpx 20rpx;  width: 200rpx;  font-size: 26rpx;  background-color: #e6e6e6; } .new_top_txt {  width: 50%;  position: relative;  top: 38rpx;  text-align: center;  margin: 0 auto;  font-size: 30rpx;  color: #787878;  background-color: #f7f7f7; } /* 聊天內(nèi)容 */ .news {  margin-top: 30rpx;  text-align: center;  margin-bottom: 150rpx; } .img_null {  height: 60rpx; } .l {  height: 5rpx;  width: 20%;  margin-top: 30rpx;  color: #000; } /* 聊天 */ .my_right {  float: right;  position: relative;  right: 40rpx; } .you_left {  float: left;  position: relative;  left: 5rpx; } .new_img {  width: 100rpx;  height: 100rpx;  border-radius: 50%; } .sanjiao {  top: 20rpx;  position: relative;  width: 0px;  height: 0px;  border-width: 10px;  border-style: solid; } .my {  border-color: transparent transparent transparent #95d4ff; } .you {  border-color: transparent #95d4ff transparent transparent; } .sendmessage {  background-color: white;  width: 100%;  position: fixed;  bottom: 0rpx;  display: flex;  flex-direction: row; } .sendmessage input {  width: 80%;  height: 80rpx;  background-color: white;  line-height: 80rpx;  font-size: 28rpx;  border: 2rpx solid #d0d0d0;  padding-left: 20rpx; } .sendmessage button {  border: 2rpx solid white;  width: 18%;  height: 80rpx;  background: #fff;  color: #000;  line-height: 80rpx;  font-size: 28rpx; } .historycon {  height: 90%;  width: 100%;  flex-direction: column;  display: flex;  margin-top: 100rpx;  border-top: 0px; } .hei{  margin-top: 50px;  height: 20rpx; } .history {  height: 100%;  margin-top: 30rpx;  margin: 20rpx;  font-size: 28rpx;  line-height: 80rpx;  word-break: break-all; } .btn{ margin-left: 5rpx; margin-right:4rpx; }.chat-input{ margin-left: 5rpx;}.top-content{ display: flex;}.back-icon{ margin-top: 25rpx; margin-left: 25rpx;  width:40rpx; height:40rpx;}.other-record-content{ background-color: #FFEFDB ; width: 380rpx;  border-radius: 7px;   padding: 0rpx 30rpx 0rpx 30rpx;}.other-record{  display: flex; justify-content:flex-start;}.other-head-img{ width:70rpx; height:70rpx; margin: 10rpx 10rpx 10rpx 10rpx;}.other-record-content-triangle{ width: 0; height: 0; border-top: 20rpx solid transparent; border-right: 40rpx solid #FFEFDB; border-bottom: 15rpx solid transparent;margin-top: 20rpx; }.own-record{ display: flex; justify-content:flex-end;}.own-record-content{ background-color: #F0F0F0 ; width: 380rpx;  border-radius: 7px;   padding: 0rpx 30rpx 0rpx 30rpx;}.own-record-content-triangle { width: 0; height: 0; border-top: 20rpx solid transparent; border-left: 40rpx solid #F0F0F0; border-bottom: 20rpx solid transparent; margin-top: 20rpx; }.own-head-img{ width:70rpx; height:70rpx; margin: 10rpx 10rpx 10rpx 10rpx; padding-right:30rpx; }::-webkit-scrollbar{ width: 0; height: 0; color: transparent;}