微信小程序实现聊天界面,发送功能

.wxml

html 复制代码
<scroll-view scroll-y="true" style="height: {{windowHeight}}px;">
  <view wx:for="{{chatList}}" wx:for-index="index" wx:for-item="item" style="padding-top:{{index==0?30:0}}rpx">
    <!-- 左边:对方用户 -->
    <view style="display: flex; align-items: flex-start; margin-bottom: 10px;padding: 10rpx 20rpx;" wx:if="{{item.id != userInfo.id}}">
      <view>
        <image src="{{item.url}}" style="width: 35px; height: 35px; border-radius: 10px;"></image>
      </view>
      <view style="padding: 15rpx 20rpx;border-radius: 0 10px 10px 10px;background-color: #ffffff; margin-left: 10rpx; display: inline-block;">
        <text>{{item.content}}</text>
      </view>
    </view>

    <!-- 右边:当前用户 -->
    <view style="display: flex; align-items: flex-start; justify-content: flex-end;padding: 10rpx 20rpx;" wx:else>
      <view style="padding: 15rpx 20rpx; background-color: #7e66f6; border-radius: 10px 0 10px 10px; margin-right: 10rpx;color: #ffffff;">
        <text>{{item.content}}</text>
      </view>
      <view>
        <image src="{{item.url}}" style="width: 35px; height: 35px; border-radius: 10px;"></image>
      </view>
    </view>
  </view>

  <!-- 底部输入框及发送按钮 -->
  <view style="position: fixed; bottom: {{bottomJP}}px; width: 100%; background-color: #fff; padding:  0 10rpx; box-shadow: 0 -2px 4px rgba(202, 202, 202, 0.1);height: 130rpx;display: flex;justify-content: space-around;align-items: center;padding-bottom: 30rpx;">
    <image src="/images/yuyin.png" style="width: 30px; height: 30px; border-radius: 10px;"></image>
    <input style="height: 20rpx;width: 60%; padding: 15rpx; border: 1px solid rgb(247, 245, 245); border-radius: 10rpx;" 	confirm-type="send" adjust-position="{{false}}" bindfocus="getTelIptHeight" bindblur="getTelIptHeight" bindconfirm="sendContent" value="{{inputValue}}"/>
    <image src="/images/biaoqing.png" style="width: 30px; height: 30px; border-radius: 10px;"></image>
    <image src="/images/tupian.png" style="width: 30px; height: 30px; border-radius: 10px;margin-right: 20rpx;"></image>
    <!-- <button style="width: 150rpx; height: 80rpx; background-color: #007bff; color: #fff; border: none; border-radius: 10px; margin-left: 10rpx;">发送</button> -->
  </view>
</scroll-view>

.js

javascript 复制代码
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tips: null,
    windowHeight: 0,
    windowWidtth: 0,
    bottomJP: 0,
    userInfo: {},
    inputValue: '',
    chatList: [{
        createTime: '2024-07-24 09:10:00',
        url: '/images/baochang.png',
        content: '哈哈哈',
        id: 8
      },
      {
        createTime: '2024-07-24 11:15:30',
        url: '/images/baochang.png',
        content: '你好啊',
        id: 9
      },
      {
        createTime: '2024-07-24 11:15:30',
        url: '/images/baochang.png',
        content: '你好啊',
        id: 9
      },
    ]
  },
  getTelIptHeight(e) {
    console.log("height---------", e);
    if (e.type == 'blur') {
      this.setData({
        bottomJP: 0
      })
    } else {
      this.setData({
        bottomJP: e.detail.height
      })
    }

  },
  onLoad(options) {
    let that = this
    that.setData({
      userInfo: wx.getStorageSync("userInfo")
    })
    wx.getSystemInfo({
      success: function (res) {
        console.log(res)
        that.setData({
          windowHeight: res.windowHeight,
          windowWidtth: res.windowWidth,
        });
      }
    });
    wx.setNavigationBarTitle({
      title: '动态获取用户昵称',
    })
  },
  send() {
    let info = {
      senderId: wx.getStorageSync("userInfo").id,
      recipientId: 100,
      chatContent: '你好啊~',
      chatContentType: 'text'
    }
    let that = this
    app.globalData.ws.send({
      data: JSON.stringify(info),
      success: (res) => {
        console.log(res)
        that.setData({
          tips: "发送信息成功"
        })
      }
    })
  },
  sendContent(e) {
    let message = {
      createTime: '2024-07-24 11:15:30',
      url: '/images/baochang.png',
      content: e.detail.value,
      id: 9
    }
    let list = this.data.chatList
    list.push(message)
    this.setData({
      chatList: list,
      inputValue: ''
    })
  }
})

.wxss

css 复制代码
page {
  background-color: #f4f5f7;
}

.json

bash 复制代码
{
  "usingComponents": {},
  "navigationBarTitleText": ""
}
相关推荐
贝格前端工场40 分钟前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld43 分钟前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json1 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
来碗盐焗星球3 小时前
记一次微信小程序AI开发的血泪史
前端·微信小程序
说私域5 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域8 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
The_era_achievs_hero15 小时前
微信小程序71~80
微信小程序·小程序
dssxyz16 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
!win !16 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_20 小时前
微信小程序发体验版
微信小程序·小程序