详解微信小程序实现仿微信聊天界面(各种细节处理)

本文介绍了微信小程序实现仿微信聊天界面,分享给大家,具体如下:

下面先来看看效果

为实现这样的效果,首先要解决两个问题:

1.点击输入框弹出软键盘后,将已有的少许聊天内容弹出,导致看不到的问题;

2.键盘弹出或收起时,聊天消息没有自动滚到最底部。

首先解决第二个问题,自动滚动到最底部,这很简单,这里提供三种方法(推荐第三种):

1.计算每条消息的最大高度,设置scroll-top=(单条msg最大高度 * msg条数)px。

2.用 将展示msg的目标scroll-view包裹,

通过js获取到该view的实际高度:

var that = this;
var query = wx.createSelectorQuery();
query.select('.scrollMsg').boundingClientRect(function(rect) {
	that.setData({
		scrollTop: rect.height+'px';
	});
}).exec();

3.(推荐)将所有msg都编号如:msg-0,msg-1,msg-2… 直接锁定最后一条msg,滚动到那里。

  • 在scroll-view中添加:scroll-into-view='{{toView}}'
  • 在wx:for后面添加:wx:for-index="index"
  • 在每个msg布局中添加:id='msg-{{index}}'

最后直接:

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

到这里第二个问题解决了,那么我们回过来解决第一个问题:

(点击输入框弹出软键盘后,将已有的少许聊天内容弹出,导致看不到的问题)

1.首先我们需要将input的自动向上推给关掉,这里有个坑:

在input组件中添加:adjust-position='{{false}}'

而不是:adjust-position='false'

这么做虽然不再向上推,但却导致了软键盘弹起时,会遮挡屏幕下部分的消息。

2.如何解决软键盘弹起时,会遮挡屏幕下部分的消息?

当软键盘弹起时,将scroll-view的高度缩短至软键盘遮挡不到的屏幕上方部分,当软键盘收起时,再将scroll-view的高度还原,这样解决了遮挡问题。

提示:

input中的bindfocus='focus'可获取软键盘高度并监听软键盘弹起,bindblur='blur'可监听软键盘收起,var windowHeight = wx.getSystemInfoSync().windowHeight;可获得屏幕高度。

scrollHeight(滚动条高度) = windowHeight(屏幕高度) - 软键盘高度;

最后将input组件放在软键盘上面就完成了。

各位要不要代码?

contact.js:

// pages/contact/contact.js
const app = getApp();
var inputVal = '';
var msgList = [];
var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
var keyHeight = 0;

/**
 * 初始化数据
 */
function initData(that) {
 inputVal = '';

 msgList = [{
   speaker: 'server',
   contentType: 'text',
   content: '欢迎来到英雄联盟,敌军还有30秒到达战场,请做好准备!'
  },
  {
   speaker: 'customer',
   contentType: 'text',
   content: '我怕是走错片场了...'
  }
 ]
 that.setData({
  msgList,
  inputVal
 })
}

/**
 * 计算msg总高度
 */
// function calScrollHeight(that, keyHeight) {
//  var query = wx.createSelectorQuery();
//  query.select('.scrollMsg').boundingClientRect(function(rect) {
//  }).exec();
// }

Page({

 /**
  * 页面的初始数据
  */
 data: {
  scrollHeight: '100vh',
  inputBottom: 0
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {
  initData(this);
  this.setData({
   cusHeadIcon: app.globalData.userInfo.avatarUrl,
  });
 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function() {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function() {

 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function() {

 },

 /**
  * 获取聚焦
  */
 focus: function(e) {
  keyHeight = e.detail.height;
  this.setData({
   scrollHeight: (windowHeight - keyHeight) + 'px'
  });
  this.setData({
   toView: 'msg-' + (msgList.length - 1),
   inputBottom: keyHeight + 'px'
  })
  //计算msg高度
  // calScrollHeight(this, keyHeight);

 },

 //失去聚焦(软键盘消失)
 blur: function(e) {
  this.setData({
   scrollHeight: '100vh',
   inputBottom: 0
  })
  this.setData({
   toView: 'msg-' + (msgList.length - 1)
  })

 },

 /**
  * 发送点击监听
  */
 sendClick: function(e) {
  msgList.push({
   speaker: 'customer',
   contentType: 'text',
   content: e.detail.value
  })
  inputVal = '';
  this.setData({
   msgList,
   inputVal
  });

 },

 /**
  * 退回上一页
  */
 toBackClick: function() {
  wx.navigateBack({})
 }

})

contact.wxml:

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

<view>

 <scroll-view scroll-y scroll-into-view='{{toView}}' style='height: {{scrollHeight}};'>
  <!-- <view class='scrollMsg'> -->
  <block wx:key wx:for='{{msgList}}' wx:for-index="index">

   <!-- 单个消息1 客服发出(左) -->
   <view wx:if='{{item.speaker=="server"}}' id='msg-{{index}}' style='display: flex; padding: 2vw 11vw 2vw 2vw;'>
    <view style='width: 11vw; height: 11vw;'>
     <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='../../images/contact_member.png'></image>
    </view>
    <view style='width: 4vw; height: 11vw; margin-left: 0.5vw; display: flex; align-items: center; z-index: 9;'>
     <image style='width: 4vw;' src='../../images/left_msg.png' mode='widthFix'></image>
    </view>
    <view class='leftMsg'>{{item.content}}</view>
   </view>

   <!-- 单个消息2 用户发出(右) -->
   <view wx:else id='msg-{{index}}' style='display: flex; justify-content: flex-end; padding: 2vw 2vw 2vw 11vw;'>
    <view class='rightMsg'>{{item.content}}</view>
    <view style='width: 4vw; height: 11vw; margin-right: 0.5vw; display: flex; align-items: center; z-index: 9;'>
     <image style='width: 4vw;' src='../../images/right_msg.png' mode='widthFix'></image>
    </view>
    <view style='width: 11vw; height: 11vw;'>
     <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='{{cusHeadIcon}}'></image>
    </view>
   </view>

  </block>
  <!-- </view> -->

  <!-- 占位 -->
  <view style='width: 100%; height: 18vw;'></view>
 </scroll-view>

 <view class='inputRoom' style='bottom: {{inputBottom}}'>
  <image style='width: 7vw; margin-left: 3.2vw;' src='../../images/pic_icon.png' mode='widthFix'></image>
  <input bindconfirm='sendClick' adjust-position='{{false}}' value='{{inputVal}}' confirm-type='send' bindfocus='focus' bindblur='blur'></input>
 </view>
</view>

contact.wxss:

/* pages/contact/contact.wxss */

page {
 background-color: #f1f1f1;
}

.inputRoom {
 width: 100vw;
 height: 16vw;
 border-top: 1px solid #cdcdcd;
 background-color: #f1f1f1;
 position: fixed;
 bottom: 0;
 display: flex;
 align-items: center;
 z-index: 20;
}

input {
 width: 76vw;
 height: 9.33vw;
 background-color: #fff;
 border-radius: 40rpx;
 margin-left: 2vw;
 padding: 0 3vw;
 font-size: 28rpx;
 color: #444;
}

.leftMsg {
 font-size: 35rpx;
 color: #444;
 line-height: 7vw;
 padding: 2vw 2.5vw;
 background-color: #fff;
 margin-left: -1.6vw;
 border-radius: 10rpx;
 z-index: 10;
}

.rightMsg {
 font-size: 35rpx;
 color: #444;
 line-height: 7vw;
 padding: 2vw 2.5vw;
 background-color: #96EB6A;
 margin-right: -1.6vw;
 border-radius: 10rpx;
 z-index: 10;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-02-14

微信小程序实现聊天对话(文本、图片)功能

本文实例为大家分享了微信小程序实现聊天对话功能的具体代码,供大家参考,具体内容如下 这是我实际项目线上的代码, 或许有些不足 || 和你的需求不符合. 上图: to_news.wxml <!--pages/index/to_news/to_news.wxml--> <view class='tab'> <view class='lan'>{{tabdata.title}}</view> <view class='tent'> <text&g

微信小程序实现即时通信聊天功能的实例代码

项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html 二.nginx中配置反向代理加密websocket(wss) upstream websocket{ hash $remote_addr consistent; server 127.0.0.1:9090 weight=5 max_fails=3 fail_timeout=30

使用node.js实现微信小程序实时聊天功能

在微信这个聊天工具里的小程序上实现聊天功能,总感觉怪怪的.但领导要求了,总是要干的. 然后就实时通讯这个关键词展开搜索,穿梭于网页之间.不过粘贴复制的真的太多了,找了半天也没找到想要的,不过还是提取到了关键词的WebSocket和node.js的,然后搜索这两是啥,什么关系,总算明白了一点. 最后确定了第一步需要干的是用node.js搭建服务(我是装在自己的windows下的): 1.首先到官网下载node.js,下载链接 安装很简单,双击下载好的文件,直接下一步一步,没什么特殊的选择,路径默认

微信小程序websocket聊天室的实现示例代码

背景 最近做了一个微信小程序的即时通讯功能,之前我也做过node.js的websocket服务,不过是在web端应用的socket.io服务.小程序本身对http.websocket等连接均有诸多限制,所以这次项目选择了node.js自带的ws模块. 服务端 初始化一个node.js项目,引入ws模块 const webSocket = require('ws'); 创建websocket实例,并设置监听端口 const wss = new webSocket.Server({ port: 30

微信小程序与AspNetCore SignalR聊天实例代码

微信小程序与aspnetcore signalr实例 本文不对小程序与signalr做任何介绍,默认读者已经掌握 aspnetcore Signalr文档 小程序文档 写在之前 SignalR没有提供小程序使用的客户端js,所以本人参考signlar.js写了小程序版signalr-client.js 代码开源,地址 https://github.com/liangshiw/SignalRMiniProgram-Client 先上效果图 开始编码 首先需要创建一个aspnetcore的mvc项目

微信小程序实时聊天WebSocket

本文实例为大家分享了微信小程序实时聊天WebSocket的具体代码,供大家参考,具体内容如下 1.所有监听事件先在onload监听. // pages/index/to_news/to_news.js var app = getApp(); var socketOpen = false; var SocketTask = false; var url = 'ws://192.168.0.120:7011'; Page({ data: { inputValue: '', returnValue:

微信小程序websocket实现聊天功能

本文实例为大家分享了微信小程序websocket实现聊天功能的具体代码,供大家参考,具体内容如下 效果图: chat.js var utils = require("../../utils/util.js") Page({ /** * 页面的初始数据 */ data: { newsList:[], input:null, openid:null }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var _this = thi

微信小程序websocket实现即时聊天功能

今天给大家分享一下本人做小程序使用websocket的一点小经验,希望对大家有所帮助. 使用之前肯定首先要了解一下websocket是什么,简单来讲websocket就是客户端与服务器之间专门建立的一条特殊通道,请求只需要请求一次,而且还可以从通道实时获取服务器数据,非常适合应用到实时应用上. 因为这里本人是分享小程序,所以就不去深究websocket的底层和协议了,感兴趣的朋友可以去看下websocket协议 建议大家在做之前先看看微信小程序官方提供的api关于websocket的文档,因为微

微信小程序 聊天室简单实现

微信小程序 聊天室简单实现 utils文件夹下websoctet.js文件 var url = 'ws://地址端口'; function connect(user, func) { wx.connectSocket({ url: url, header: {"content-type":'application/x-www-form-urlencoded'} }); wx.onSocketOpen(function (res) { send('{"type":&q

微信小程序WebSocket实现聊天对话功能

本文实例为大家分享了微信小程序WebSocket实现聊天对话功能的具体代码,供大家参考,具体内容如下 js var app = getApp(); var socketOpen = false; var frameBuffer_Data, session, SocketTask; var url = 'ws://请填写您的长链接接口地址'; var upload_url ='请填写您的图片上传接口地址' Page({ data: { user_input_text: '',//用户输入文字 in

微信小程序 WebSocket详解及应用

微信小程序 WebSocket 实例效果: 今天主要说一下微信的WebSocket接口以及在小程序中的使用. WebSocket是什么(简述) 微信的WebSocket接口和HTML5的WebSocket基本一样,是HTTP协议升级来的,做为一个新的Socket在B/S上使用,它实现了浏览器与服务器全双工通信. 因为这里是做小程序,所以就不对WebSocket的底层和协议做过多的说明了,只是稍微介绍一下.想了解详细的WebSocket可以参考如下:WebSocket 协议 WebSocket与A

微信小程序webSocket的使用方法

博客简介 本篇博客介绍微信小程序中webSocket的使用方法,以及如何用局部网络建立webSocket连接,进行客户端与服务器之间的对话: webSocket简介 微信小程序端API调用 服务器端使用nodejs配置 演示websocket webSocket简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 WebSocket API 中,浏览

微信小程序实现带刻度尺滑块功能

摘要: 与自带的slider不同的是,它是通过手势滑动标尺得到取值,而不是通过滑动滑块本身. 效果图 场景 当一屏显示不下,例如年龄体重选择,金额选择等大区间需要的选择器,相比自带的picker要直观一些. 思路: 先画一个scrollView 2 装进canvas lineTo画刻度线段,lineTo+fill画出三角形游标,fillText描绘文本标签 通过bindscroll监听刻度尺触摸事件 渲染取值到页面 基本布局 <scroll-view scroll-x="true"

微信小程序 向左滑动删除功能的实现

微信小程序 向左滑动删除功能的实现 实现效果图: 实现代码: 1.wxml touch-item元素绑定了bindtouchstart.bindtouchmove事件 <view class="container"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchst

微信小程序实现添加手机联系人功能示例

本文实例讲述了微信小程序实现添加手机联系人功能.分享给大家供大家参考,具体如下: 1.效果展示   2.关键代码 1)WXML文件 <view bindlongtap="phoneNumTap">{{phoneNum}}</view> 2)JS文件 Page({ data:{ phoneNum:'12345678901'//测试用的号码,并非真实号码 }, // 长按号码响应函数 phoneNumTap:function(){ var that=this; //

微信小程序实现的自定义分享功能示例

本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮 用户点击分享按钮的时候会调用 此事件需要 return 一个 Object,用于自定义分享内容 示例代码: Page({ onShareAppMessag

使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能

由于微信小程序没有提供类似 Image 这样的 JS 对象,要实现图片的预加载要麻烦一些, wxapp-img-loader自定义组件可以在微信小程序中实现图片预加载功能. 使用 1.下载 wxapp-img-loader项目源代码(https://github.com/o2team/wxa...),将 img-loader 目录拷贝到你的项目中 2.在页面的 WXML 文件中添加以下代码,将组件模板引入 <import src="../../img-loader/img-loader.w

微信小程序实现的五星评价功能示例

本文实例讲述了微信小程序实现的五星评价功能.分享给大家供大家参考,具体如下: 实现五星评价功能,效果图如下: .wxml文件: <view class="star-title">1.品质效果</view> <view class="star-pos"> <image class='stars' bindtap="changeColor" data-index='0' data-no="{{ite