微信小程式實現簡單聊天室
阿新 • • 發佈:2021-07-13
本文例項為大家分享了微信小程式實現簡單聊天室的具體程式碼,供大家參考,具體內容如下
cha.
// pages/chat/chat.js // 獲取小程式例項 let app = getApp(); Page({ /** * 頁面的初始資料 */ data: { nickname:'',avatar:'',chatlists:[ { nickname:'小林',avatar:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591617971938&di=30d9f3b49a0d1b27fb4b61ea424f82c9&imgtype=0&src=http%3A%2F%2Fa-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F07%2F20161007135058_nUxji.jpeg',content:`你好呀!` } ],invalue:'' },sendMsg:function(){ let _this = this; let obj = { nickname:_this.data.nickname,avatar:_this.data.avatar,content:_this.data.invalue }; let arr = _this.data.chatlists; arr.push(obj) _this.setData({ chatlists:arr,invalue:'' }); // 把聊天內容傳送到伺服器,處理完成後返回,再把返回的資料放到chatlist裡面 },getInput:function(e){ console.log(e.detail.value); this.setData({invalue:e.detail.value}); },/** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { console.log(app.globalData.userInfo.nickName); this.setData({ nickname:app.globalData.userInfo.nickName,avatar:app.globalData.userInfo.avatarUrl }); },/** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function () { },/** * 生命週期函式--監聽頁面顯示 */ onShow: function () { },/** * 生命週期函式--監聽頁面隱藏 */ onHide: function () { },/** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function () { },/** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function () { },/** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function () { },/** * 使用者點選右上角分享 */ onShareAppMessage: function () { } })
chat.wxml
<block wx:for="{{chatlists}}" wx:for-index="ind" wx:for-item="chat" wx:key="ind"> <view class="chat self" wx:if="{{nickname == chat.nickname}}"> <view class="right"> <view class="content"> {{chat.content}} </view> </view> <view class="left"> <image class="avata客棧r" src="{{chat.avatar}}"></image> </view> </view> <view class="chat" wx:else> <view class="left"> <image class="avatar" src="{{chat.avatar}}"></image> </view> <view class="right"> <view class="nickname">{{chat.nickname}}</view> <view class="content"> {{chat.content}} </view> </view> </view> </block> <view class="form"> <view class="weui-cell weui-cell_input"> <input class="weui-input" value="{{invalue}}" bindinput="getInput" placeholder="請輸入聊天內容" /> </view> <button type="primary" bindtap="sendMsg">傳送</button> </view>
chat.
/* pages/chat/chat.wxss */ .avatar{ width: 130rpx; height: 130rpx; border-radius: 50%; } .chat{ display: flex; align-items: centerngRJnnye; margin-top: 15px; } .self{ justify-content: flex-end; margin-top: 15px; } .left{ padding: 20rpx; align-self: flex-start; } .self .left{ padding-top: 0; } .right{ margin-left: 10px; } .right .content{ background-color: #eee; color: #123; font-size: 16px; /* border:1px solid #ddd; */ padding: 10px; line-height: 26px; margin-right: 10px; border-radius: 3px; position: relative; min-height: 20px; } .right .content::before{ content: ' '; display: block; width: 0; height: 0; border: 12px solid transparent; border-right-color:#eee; position: absolute; top: 10px; left: -23px; } .self .right .content::before{ border: 0; } .self .right .content::after{ content: ' '; display: block; width: 0; height: 0; border: 12px solid transparent; border-left-color:#1ad409; position: absolute; top: 10px; right: -23px; } .self .right .content{ background-color: #1ad409; } .form{ position: fixed; bottom: 0; background-color: #eee; width: 750rpx; display: flex; height: 39px; align-items: center; } .form input{ width: 600rpx; background-color: #fff; height: 36px; line-height: 36px; padding: 0 5px; } button{ width:65rpx; height:36px; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。