【uni-app】uni-app实现聊天页面功能（小程序）——布局篇

文章目录

• • 前言
  • 划分区域
  • 问题
  • • 内容溢出
    • 关于调试聊天框
    • 代���实现

      ---

      前言

      在工作中使用uni-app参与开发一个小程序，其中要写一个简单的聊天页面，虽然功能不多（只有一个发送文字的功能），但是其中的细节比较多，也踩过很多坑，特此记录下来。要实现的页面如图所示，该篇主要讲讲如何布局（参考了很多文章之后根据页面需求进行一个整合）。

      划分区域

      先划分大区域，主要包含两个（顶部导航栏用的小程序自带的，所以就没有自己写，后续有需求可能会自定义导航栏）聊天内容区和底部发送框。

      其中因为要实现发送内容页面会自动滚到最底部，所以聊天内容区在布局上是采用了scroll-view,必须要给它设置一个基础的高度（这里设置为屏幕的高度），而聊天消息列表的高度是根据内容来撑开。

      注意！底部聊天框是采用固定定位固定在页面的底部，它不遵循标准流，当聊天内容充满整个屏幕时，最底部的消息会被聊天框遮挡，为了避免这种情况发生，需要在聊天框外再套一层有固定高度的view来占位。

      问题

      内容溢出

      而实际测试时还发现了一个问题：连续的数字会溢出内容框！

      因为连续的数字被浏览器误认为是英文单词，而英文单词在默认情况下是不会分开换行的，解决方案是在css内容框中加入如下代码（二选一即可）：

      //写法一word-wrap: break-word;//写法二word-break: break-all;

      这样就解决了！

      关于调试聊天框

      小程序模拟器和真机上在聊天框中会略微有点差别！！！

      （我设置了padding，模拟器上文字是贴着，但真机上文字居中）

      模拟器：

      真机：

      代码实现

      下面是整个页面的完整代码（已更新）：

      {{item.userContent}}     {{item.botContent}}                发送export default {data() {return {//滚动距离scrollTop: 0,userId:'',//发送的消息chatMsg:"",msgList:[{    botContent: "hello，请问我有什么可以帮助你的吗？",    recordId: 0,    titleId: 0,    userContent: "",    userId: 0},{    botContent: "",    recordId: 0,    titleId: 0,    userContent: "你好呀我想问你一件事",    userId: 0},]}},computed: {windowHeight() {    return this.rpxTopx(uni.getSystemInfoSync().windowHeight)}},methods: {// px转换成rpxrpxTopx(px){let deviceWidth = wx.getSystemInfoSync().windowWidthlet rpx = ( 750 / deviceWidth ) * Number(px)return Math.floor(rpx)},// 发送消息handleSend() {//如果消息不为空if(!this.chatMsg||!/^\s+$/.test(this.chatMsg)){let obj = {botContent: "",recordId: 0,titleId: 0,userContent: this.chatMsg,userId: 0}this.msgList.push(obj);this.chatMsg = '';}else {this.$modal.showToast('不能发送空白消息')}},}}$chatContentbgc: #C2DCFF;$sendBtnbgc: #4F7DF5;view,button,text,input,textarea {margin: 0;padding: 0;box-sizing: border-box;}/* 聊天消息 */.chat {.scroll-view {::-webkit-scrollbar {    display: none;    width: 0 !important;    height: 0 !important;    -webkit-appearance: none;    background: transparent;    color: transparent;  }// background-color: orange;background-color: #F6F6F6;.chat-body {display: flex;flex-direction: column;padding-top: 23rpx;// background-color:skyblue;.self {justify-content: flex-end;}.item {display: flex;padding: 23rpx 30rpx;// background-color: greenyellow;.right {background-color: $chatContentbgc;}.left {background-color: #FFFFFF;}                    // 聊天消息的三角形.right::after {position: absolute;display: inline-block;content: '';width: 0;height: 0;left: 100%;top: 10px;border: 12rpx solid transparent;border-left: 12rpx solid $chatContentbgc;}.left::after {position: absolute;display: inline-block;content: '';width: 0;height: 0;top: 10px;right: 100%;border: 12rpx solid transparent;border-right: 12rpx solid #FFFFFF;}.content {position: relative;max-width: 486rpx;border-radius: 8rpx;word-wrap: break-word;padding: 24rpx 24rpx;margin: 0 24rpx;border-radius: 5px;font-size: 32rpx;font-family: PingFang SC;font-weight: 500;color: #333333;line-height: 42rpx;}.avatar {display: flex;justify-content: center;width: 78rpx;height: 78rpx;background: $sendBtnbgc;border-radius: 8rpx;overflow: hidden;image {align-self: center;}}}}}/* 底部聊天发送栏 */.chat-bottom {width: 100%;height: 177rpx;background: #F4F5F7;.send-msg {display: flex;align-items: flex-end;padding: 16rpx 30rpx;width: 100%;min-height: 177rpx;position: fixed;bottom: 0;background: #EDEDED;}.uni-textarea {padding-bottom: 70rpx;                textarea {width: 537rpx;min-height: 75rpx;max-height: 500rpx;background: #FFFFFF;border-radius: 8rpx;font-size: 32rpx;font-family: PingFang SC;color: #333333;line-height: 43rpx;padding: 5rpx 8rpx;}}            .send-btn {display: flex;align-items: center;justify-content: center;margin-bottom: 70rpx;margin-left: 25rpx;width: 128rpx;height: 75rpx;background: $sendBtnbgc;border-radius: 8rpx;font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #FFFFFF;line-height: 28rpx;}}}

      具体功能实现将放在下篇（可能一篇讲不完），有任何问题可以评论留言~