uniapp实现聊天窗体相关问题记录

Js 数据添加k-v键值对

//发送消息
insertMessage(){
    //获取键盘输入的信息
    var msg = this.message;
    //创建键值对
    var tmp = {msg:msg}
    //添加到数组中
    this.userMsgList.push(tmp);
}

页面读取

<view v-for="(item,index) in userMsgList" :key="index">
	{{item.msg}}
</view>

//发送消息
insertMessage:function(e){
    this.$nextTick(function () {
        //DOM 更新了

    })

    //获取键盘输入的信息
    var msg = this.message;
    //创建键值对
    var tmp = {msg:msg}
    //添加到数组中
    this.userMsgList.push(tmp);
    //清空输入框
    this.message = "";

    uni.pageScrollTo({
        scrollTop: 9999999999,//暴力滑动
        duration: 300
    });

    // uni.onWindowResize((res) => {
    //     console.log('变化后的窗口宽度=' + res.size.windowWidth)
    //     console.log('变化后的窗口高度=' + res.size.windowHeight)
    // })

},

页面窗口大小监听（键盘弹出收回事件监听）

uni.onWindowResize((res) => {
    console.log('变化后的窗口宽度=' + res.size.windowWidth)
    console.log('变化后的窗口高度=' + res.size.windowHeight)
})

消息输入框问题记录

• 问题描述：输入框输入内容后，点击自定义的按钮触发发送消息事件，此时消息输入框失去焦点，软键盘回收。（实际想要的效果，点击自定义按钮触发发送消息事件后，文本框 的内容清空，但是不失去焦点，软键盘不回收）‘

• 已使用的解决办法：

  • 通过uniapp的文档

  focus	Boolean	false	获取焦点。	在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。
  confirm-type	String	done	设置键盘右下角按钮的文字，仅在 type="text" 时生效。
  confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起	App、微信小程序、支付宝小程序、百度小程序、QQ小程序

  confirm-type 有效值

  值	说明	平台差异说明
  send	右下角按钮为“发送”	微信、支付宝、百度小程序、App的nvue
  search	右下角按钮为“搜索”
  next	右下角按钮为“下一个”	微信、支付宝、百度小程序、App的nvue
  go	右下角按钮为“前往”
  done	右下角按钮为“完成”	微信、支付宝、百度小程序、App的nvue

  App平台的nvue页面，如果是uni-app编译模式，直接使用此属性设置即可生效。如果是weex编译模式，需通过weex的api设置，weex相关文档参考

  App平台的vue页面不支持控制键盘右下角为“发送”，涉及聊天的建议使用nvue。

  实际效果，发送按钮为弹出的软键盘右下方的按钮，与预期的点击指定的按钮有所差距，只有点击软键盘右下的按钮，输入框才会一直聚焦，点击自定义的按钮，无效

  • js阻止默认事件

    uniapp触发不了

  • 动态修改input的focus属性

    可以实现，不过只能触发一次，并且在触发自定义按钮的事件后，输入框重新聚焦后，但在此过程中，软键盘会有一个明显的回收在弹出的一个过程

解决方法待定