实现聊天页面

页面布局

<!-- 主页面 -->

<view class="page-deLovely">

    <scroll-view scroll-y="true"  scroll-into-view="{{toView}}" class="dialogWrap"  style='height: {{scrollHeight}}'>
        
        <view wx:for="{{msgList}}" wx:key="unique" class="dialog">

            <view wx:if="{{item.position=='left'}}" data-copy="{{item.text}}" bindlongtap="copy" class="intellectualBox" id='msg-{{index}}'>
                <image class="img" src="../../images/deLovelyAvater.png" />
                <view class="dialogBox">
                    <view class="fot"></view>
	                <view class="font">{{item.text}}</view>
                </view>
            </view>

            <view wx:if="{{item.position=='right'}}" data-copy="{{item.text}}" bindlongtap="copy" class="userBox" id='msg-{{index}}'>
                <view class="dialogBox">
                    <view class="fot"></view>
	                <view class="font">{{item.text}}</view>
                </view>
                <image class="img" src="{{item.avatarUrl}}" />
            </view>
        </view>
        <view style='height: 16vw'></view>
    </scroll-view>
     



    <view class='inputRoom' style='bottom: {{inputBottom}}'>
        <!--<input confirm-type="send" bindconfirm="send" bindinput="getValue" class="input" adjust-position='{{false}}' bindfocus="focus" bindblur="blur" placeholder="要我怎么夸你，在这里输入吧" value="{{inputValue}}"/>-->
        <input bindinput="getValue" class="input" adjust-position='{{false}}' bindfocus="focus" bindblur="blur" placeholder="要我怎么夸你，在这里输入吧" value="{{inputValue}}"/>
        <button class="btn" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="btnSend">发送</button>
    </view>

</view>

页面样式less与页面样式wxss

.page-deLovely{

    .font{
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 40rpx;
    }

    .dialogWrap{
        display: flex;
        align-items: center;

        .dialog{
            padding: 0 30rpx;
        }

        .intellectualBox{
            //   border: 1px solid rebeccapurple;
                // float: left;
                margin-top: 23rpx;
                display: flex;
                flex-direction: row;
                .img{
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 50%;
                    // background-color: #AAEB7B;
              }
        
                .dialogBox{
                    // width: 342rpx;
                    max-width: 342rpx;
                    margin-left: 30rpx;
                    background: #FFFFFF;
                    border-radius: 10rpx;
                    box-shadow: -1px 5px 6px 0px rgba(0, 0, 0, 0.04);
                    position:relative;
                    padding: 40rpx 30rpx;
                
        
                    .fot{
                        position: absolute;
                        left: -30rpx;
                        bottom: 50%-20rpx;
        
                        width: 40rpx;
                        height: 40rpx;
                        border-style: solid;
                        border-color: transparent #FFFFFF transparent transparent;
                        // box-shadow: -1rpx 5rpx 6rpx 0rpx rgba(0, 0, 0, 0.04);
                        border-width: 20rpx;
                    }
                
              }
        }
        .userBox{
            //   border: 1px solid rebeccapurple;
            // float: right;
                margin-top: 23rpx;
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                .img{
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 50%;
                    background-color: #AAEB7B;
              }
        
                .dialogBox{
                    // width: 342rpx;
                    max-width: 342rpx;
                    margin-right: 21rpx;
                    background: #AAEB7B;
                    border-radius: 10rpx;
                    box-shadow: -1px 5px 6px 0px rgba(0, 0, 0, 0.04);
                    position:relative;
                    padding: 40rpx 28rpx;
                    text-align: center;
                
        
                    .fot{
                        position: absolute;
                        right: -30rpx;
                        bottom: 50%-20rpx;
                        width: 40rpx;
                        height: 40rpx;
                        border-style: solid;
                        border-color: transparent transparent transparent #AAEB7B ;
                        // box-shadow: -1rpx 5rpx 6rpx 0rpx rgba(0, 0, 0, 0.04);
                        border-width: 20rpx;
                    }
              }
        }
    }
    
.inputRoom {
    width: 100vw;
    height: 16vw;
    // border-top: 1rpx solid #cdcdcd;
    background-color:#FFFFFF;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 20;

    .input {
        width: 494rpx;
        height: 70rpx;
        margin-left: 30rpx;
        background: #F2F5F8;
        border-radius: 20rpx;
        padding-left: 30rpx;
       }
       .btn{
        width: 150rpx;
        height: 70rpx;
        background: linear-gradient(89deg, #A5CFFB, #91B3F7);
        border-radius: 20rpx;
        font-size: 24rpx;
        font-weight: 500 !important;
        font-family: PingFang SC;
        color: #FFFFFF;
       }
   }
    
   
}

less可以不用直接用wxss

.page-deLovely .font {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 40rpx;
}
.page-deLovely .dialogWrap {
  display: flex;
  align-items: center;
}
.page-deLovely .dialogWrap .dialog {
  padding: 0 30rpx;
}
.page-deLovely .dialogWrap .intellectualBox {
  margin-top: 23rpx;
  display: flex;
  flex-direction: row;
}
.page-deLovely .dialogWrap .intellectualBox .img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.page-deLovely .dialogWrap .intellectualBox .dialogBox {
  max-width: 342rpx;
  margin-left: 30rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  box-shadow: -1px 5px 6px 0px rgba(0, 0, 0, 0.04);
  position: relative;
  padding: 40rpx 30rpx;
}
.page-deLovely .dialogWrap .intellectualBox .dialogBox .fot {
  position: absolute;
  left: -30rpx;
  bottom: 30%;
  width: 40rpx;
  height: 40rpx;
  border-style: solid;
  border-color: transparent #FFFFFF transparent transparent;
  border-width: 20rpx;
}
.page-deLovely .dialogWrap .userBox {
  margin-top: 23rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.page-deLovely .dialogWrap .userBox .img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #AAEB7B;
}
.page-deLovely .dialogWrap .userBox .dialogBox {
  max-width: 342rpx;
  margin-right: 21rpx;
  background: #AAEB7B;
  border-radius: 10rpx;
  box-shadow: -1px 5px 6px 0px rgba(0, 0, 0, 0.04);
  position: relative;
  padding: 40rpx 28rpx;
  text-align: center;
}
.page-deLovely .dialogWrap .userBox .dialogBox .fot {
  position: absolute;
  right: -30rpx;
  bottom: 30%;
  width: 40rpx;
  height: 40rpx;
  border-style: solid;
  border-color: transparent transparent transparent #AAEB7B;
  border-width: 20rpx;
}
.page-deLovely .inputRoom {
  width: 100vw;
  height: 16vw;
  background-color: #FFFFFF;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  z-index: 20;
}
.page-deLovely .inputRoom .input {
  width: 494rpx;
  height: 70rpx;
  margin-left: 30rpx;
  background: #F2F5F8;
  border-radius: 20rpx;
  padding-left: 30rpx;
}
.page-deLovely .inputRoom .btn {
  width: 150rpx;
  height: 70rpx;
  background: linear-gradient(89deg, #A5CFFB, #91B3F7);
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500 !important;
  font-family: PingFang SC;
  color: #FFFFFF;
}

页面逻辑

//夸人小可爱
const app = getApp();
// var inputVal = '';
// var msgList = [];
// var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
var keyHeight = 0;
var util = require('../../utils/storage.js');
Page({
  data: {
    scrollHeight: '100vh',
    inputBottom: 0,
    inputValue: '',
    msgList: [
      // { position: 'right', text: "夸我可爱", avatarUrl: '' },
      { position: 'left', text: "Hi，要我怎么夸你呢" }
    ],

  },
  onLoad: function () {
    let islogin = this.islogin()
    console.log(islogin)
    if (!islogin) {
      // console.log(123)
      // this.setting()
    } else {
      let msgList = util.get('msgList')
      console.log(msgList)
      if (msgList) {
        console.log(123)
        this.setData({
          msgList: msgList,
          toView: 'msg-' + (msgList.length - 1),
        })
      }
    }

  },
  // 聚焦时键盘弹起
  focus: function (e) {
    keyHeight = e.detail.height;
    let msgList = this.data.msgList;
    this.setData({
      scrollHeight: (windowHeight - keyHeight) + 'px',
      inputBottom: keyHeight + 'px',
      toView: 'msg-' + (msgList.length - 1),
    });
  },
  // 失去焦点时键盘收起
  blur: function (e) {
    let msgList = this.data.msgList;
    this.setData({
      scrollHeight: '100vh',
      inputBottom: 0,
      toView: 'msg-' + (msgList.length - 1),
    })
  },
  // 获得value值
  getValue: function (e) {
    let inputValue = e.detail.value
    this.setData({
      inputValue: inputValue
    })
  },
  // 按钮发送
  btnSend: async function (e) {
    let inputValue = this.data.inputValue
    if (inputValue == '') {
      wx.showToast({
        title: '多少说下要怎么夸你呢',
        duration: 2000
      })
    } else {
      // console.log(2)
      // console.log(inputValue)
      let res = e.detail
      const info = await getApp().login(res);
      if (!info) return;
      this.islogin()
      // await this.islogin()
      let msgList = this.data.msgList;
      msgList.push({
        position: 'right',
        text: inputValue,
        avatarUrl: this.data.avatarUrl
      })
      // 调用函数获取智能机器人夸人的话
      this.serviceValue()

      this.setData({
        msgList: msgList,
        inputValue: '',
        toView: 'msg-' + (msgList.length - 1),
      })
    }

  },
  // // 键盘发送
  // send: async function (e) {
  //   let inputValue = e.detail.value
  //   if (inputValue == '') {
  //     wx.showToast({
  //       title: '多少说下要怎么夸你呢',
  //       duration: 2000
  //     })
  //   } else {
  //     // console.log(inputValue)
  //     // await this.islogin()
  //     let islogin = this.islogin()
  //     console.log(islogin)
  //     if (!islogin) {
  //       console.log(123)
  //       this.setting()
  //     }
  //     let msgList = this.data.msgList;
  //     msgList.push({
  //       position: 'right',
  //       text: inputValue,
  //       // text: '测试缓存',
  //     })
  //     // 调用函数获取智能机器人夸人的话
  //     // this.serviceValue()

  //     this.setData({
  //       msgList: msgList,
  //       inputValue: ''
  //     })
  //   }

  // },

  // 智能机器人夸人的话的函数
  serviceValue: function () {
    let that = this
    let inputValue = that.data.inputValue
    wx.serviceMarket.invokeService({
      service: 'wxcae50ba710ca29d3', // 'wx_mp_appid',
      api: 'thumbupbot',
      data: {
        "q": inputValue, // 需要夸的内容  
      },
    }).then(res => {
      // console.log('invokeService success', res)
      if (res.errMsg == 'invokeService:ok') {
        let serviceValue = res.data.data_list[0].result
        let msgList = that.data.msgList
        msgList.push({ position: 'left', text: serviceValue })
        that.setData({
          msgList: msgList,
          toView: 'msg-' + (msgList.length - 1),
        })
        util.put('msgList', that.data.msgList, 604800)
      }

    }).catch(err => {
      console.error('invokeService fail', err)
      util.put('msgList', that.data.msgList, 604800)
      wx.showModal({
        title: 'fail',
        content: '出错了',
      })
    })
  },
  // 复制
  copy: function (e) {
    let copy = e.currentTarget.dataset.copy
    wx.setClipboardData({
      data: copy,
      success(res) {
        // wx.getClipboardData({
        //   success(res) {
        //     console.log(res.data) // data
        //   }
        // })
      }
    })
  },
  // 判断登陆
  islogin: function () {
    let userInfo = wx.getStorageSync('userInfo')
    if (userInfo) {
      this.setData({
        nickName: userInfo.nickName,
        avatarUrl: userInfo.avatarUrl
      })
      return true
    }
    else {
      return false
    }

  },
  // 用户点击右上角分享
  onShareAppMessage: function (options) {
    // 设置菜单中的转发按钮触发转发事件时的转发内容
    var shareObj = {
      title: "给你推荐一个夸人小可爱",        // 默认是小程序的名称(可以写slogan等)
      // path: this.data.path,       // 默认是当前页面，必须是以‘/’开头的完整路径
      // imageUrl: this.data.imageUrl,     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == 'shareAppMessage:ok') {
        }
      },
      fail: function () {
        // 转发失败之后的回调
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败，其中 detail message 为详细失败信息
        }
      }
    };
    // 来自页面内的按钮的转发
    if (options.from == 'button') {
    }
    // 返回shareObj
    return shareObj;
  },

})