微信小程序中聊天室的构建

最新推荐文章于 2022-06-17 12:51:42 发布

原创

最新推荐文章于 2022-06-17 12:51:42 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #小程序

本文介绍了如何在微信小程序中构建聊天室，包括HTML、CSS和JS的编写，并详细阐述了在utils文件夹中实现请求功能的request.js代码。

html书写如下：

<!--pages/chatroomDetail/chatroomDetail.wxml-->

<view class="bgc"></view>
<view wx:if="{
  
  {loadingSocket}}">
  聊天室连接中...
</view>
<!-- 可以滚动的视图 -->
<scroll-view class="chat-container" scroll-y scroll-into-view="{
  
  {'k'+list[list.length-1].id}}">
<!-- 每一条消息 -->
  <view class="chat-item {
  
  {userName == item.from ? 'my-msg' : ''}}" wx:for="{
  
  {list}}" id="{
  
  {'k'+item.id}}">
    <view class="avatar">
      <image src="{
  
  {item.avatar}}">
      </image>
    </view>
    <view class="msg-box">
      <view class="nickname" wx:if="{
  
  {userName !== item.from}}">
        {
  
  {item.nickName}}
      </view>
      <view wx:if="{
  
  {item.type == 1}}" class="content-box">
        {
  
  {item.content}}
      </view>
      <view wx:elif="{
  
  {item.type==2}}" class="img-content" >
        <image src="{
  
  {item.content}}" mode="widthFix">
        </image>
      </view>
    </view>
  </view>
</scroll-view>

<view class="send-msg-container">
<!-- 做简易双向绑定  -->
    <input class="input" type="text" model:value="{
  
  {value}}" />
  <view class="action-box">
    <van-icon name="smile-o" class="icon" bind:tap="sendImg" />
    <van-button class="send-btn" square type="primary" bind:tap="sendMsg">发送</van-button>
  </view>
</view>

css书写如下：

/* pages/chatroomDetail/chatroomDetail.wxss */
/* pages/chat/index.wxss */
.bgc {
  background-color: #E1E0E5;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
/* *****************消息区域***************** */
.chat-container {
  padding-bottom: 110rpx;
  height: 100vh;
  box-sizing: border-box;
}


.chat-item{
  display: flex;
  padding: 20rpx 0;
}

.avatar{
  width: 120rpx;
  flex-shrink: 0;
  display: flex;
  justify-content: center;  
}

.avatar imag