您的位置:首页 > 编程学习 > > 正文

微信小程序ui聊天窗口(微信小程序实现简单聊天室)

更多 时间:2021-10-09 00:09:50 类别:编程学习 浏览量:1383

微信小程序ui聊天窗口

微信小程序实现简单聊天室

本文实例为大家分享了微信小程序实现简单聊天室的具体代码,供大家参考,具体内容如下

cha.js

  • // 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="avatar" 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.css

  • /* pages/chat/chat.wxss */
    .avatar{
      width: 130rpx;
      height: 130rpx;
      border-radius: 50%;
    }
    
    
    .chat{
      display: flex;
      align-items: center;
      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;
    }
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    您可能感兴趣