前言:
  之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识.
  本文讲描述, 如何在网页端实现一个仿微信的聊天窗口界面, 以及其中涉及到的一些技术点. 作者前端是初学者, 请大拿们轻拍.

效果展示:
  先打下广告: 网页闯关游戏入口(请狠狠地点击我, ^_^) .
  仿微信窗口的设计源于第四关--倾听女神的故事.

  

  这种聊天对话的布局模式, 比PC端QQ的那种聊天方式更贴近移动端, 我个人感觉.

需求设定:
  让我们先过一遍, 实现该聊天窗口需要支持的一些功能点.
  • 聊天消息结构和布局
  聊天消息包括: 人物(头像)和消息内容. 朋友消息位居左侧, 自己消息则位于右侧, 方便区分.
  • 文本区域的自适应
  消息内容可以自适应大小, 总是以最合理的区域大小包裹.
  
  • 滚动支持
  因聊天记录太多, 大小超过聊天窗口的预设尺寸.
  • 底部自动对齐
  有新消息后, 窗口内容自动对齐到可视窗口的底部.
  • Enter键捕获
  消息的输入支持, 以及捕获响应Enter键.
  这几个功能点中, 感觉最难的是文本区域自适应处理, 走了不少弯路, ^_^.

实现方案:
  • 聊天消息结构和布局
  基本的html代码结构可以如下所示:

<div>
<img src="" alt="头像"/> <div>消息内容</div>
</div>

  注: 头像为一个img标签, 文本消息内容则为一个div, 包裹两者的是另一个大的div, 代表完整的一个消息.
  对于布局的左偏移和右偏移, 则借助float:left|right, 来进行控制, 这个还是基础的.
  • 文本区域的自适应
  为了让聊天的文本内容显得美观, 最好方式就是自适应的文本区域(有个max-width, 区域最小化).
  最初的时候, 我尝试了textarea标签, 因为其属性有row和col, 对应字符个数单位, 可以用于设定行数和列数.
  可惜的是, 我被现实打败了, 因为textarea对中文字符和英文字符的计算标准不同, 中文字符按2个算, 英文字符按1个算. 因为用户输入的不确定, 导致很难用文本串的长度来设定textarea的行列值.
  于是回到起点, 只能走计算文本像素点px长度的方式来设定大小(等价于限定max-width).
  计算文本的长度, 参考于"JQuery 计算文本的总宽度 Width".

function GetCurrentStrWidth(text, font) {
var currentObj = $('<pre>').hide().appendTo(document.body);
$(currentObj).html(text).css('font', font);
var width = currentObj.width();
currentObj.remove();
return width;
}

  注: 巧妙的通过添加/删除<pre>标签, 返回<pre>的真实长度, 既文本长度.
  对于小于预设的max-width, 则文本区域div缺省即可. 对于大于预设的max-width值, 则文本区域div设定为width=max-width.

var maxWidth = 320;
var currentFont = "normal 13px Helvetica, Arial, sans-serif";
msgDiv.style.font = currentFont; var currentWidth = GetCurrentStrWidth(message, currentFont); // *) 设定文本区域的宽度
if (currentWidth <= maxWidth) {
  msgDiv.style.width = "" + currentWidth + "px";
} else {
  msgDiv.style.width = "" + maxWidth + "px";
}

  当然这边还有一个需要的注意的地方, 就是自动换行.

word-break: normal|break-all|keep-all;

值 描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

  为了防止太长的英文单词(非常规词)的影响, 最后选用了word-break: break-all.
  • 滚动支持
  滚动支持, 相对简单, 只需要聊天对话框在y轴方向设定如下css属性即可:

overflow-y : scroll;

  • 底部自动对齐
  这个也是老生常谈的事了, 每次聊天窗口的内容有更新, 执行如下js代码即可.

div.scrollTop = div.scrollHeight;

  注: 既scrollTop和scrollHeight属性值保持一致即可.
  • Enter键响应捕获
  对enter键响应的支持, 添加如下监听事件函数即可.

document.addEventListener("keydown", function (evt) {
  if (evt.keyCode == 13) {
    // TODO
  }
});

后记:
  原本以为实现一个聊天窗口的示例很容易, 却在真正的实践过程中磕磕碰碰, 步履蹒跚. 前端这一块, 真心水很深. 事后回忆起来,觉得收获很大, 当然对于文本的自适应, 采用了一个较复杂的办法. 后来想想是不是加个max-width属性就能轻松搞定了?

公众号&游戏站点:
  个人微信公众号: 木目的H5游戏世界
  
  个人游戏作品集站点(尚在建设中...): www.mmxfgame.com,  也可直接ip访问http://120.26.221.54/.

网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点的更多相关文章

  1. 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...

  2. 网页闯关游戏(riddle webgame)--SQL注入的潘多拉魔盒

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. web开发初学者往往会忽视一些常见的漏洞 ...

  3. 网页闯关游戏(riddle webgame)--游戏玩法和整体介绍

    前言: 记得上大学那会, 有位传说中的大牛, 写了一个网页闯关类的游戏. 当时我们玩得不亦乐乎, 也是第一次接触到这种形式的游戏. 不过当时纯玩家心态, 并没有想过去创造一个. 最近想起这事, 突然想 ...

  4. Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面

    一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...

  5. CSS3 仿微信聊天小气泡

    今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...

  6. iOS 即时通讯 + 仿微信聊天框架 + 源码

    这些你造吗? 即时通讯(IM),在IOS这片江湖里面已经算是一个老者了,我这小旋风也是在很早以前巡山的时候,就知道有即时通讯这个妖怪,以前也多多少少接触过一些,在造APP的时候用过,哎呀,说着说着就感 ...

  7. web版仿微信聊天界面|h5仿微信电脑端案例开发

    前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键 ...

  8. h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器

    之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...

  9. HTML5仿微信聊天界面、微信朋友圈实例

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...

随机推荐

  1. javascript guid(uuid)

    http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript function generateU ...

  2. IE浏览器bug罪魁祸首--hasLayout

    IE浏览器一直都是前端程序员最头疼的,IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念. 认识hasLayout--haslayout是Windows In ...

  3. 《BI那点儿事》数据流转换——多播、Union All、合并、合并联接

    建立测试数据: CREATE TABLE FactResults ( Name ) , Course ) , Score INT ) INSERT INTO FactResults ( Name , ...

  4. Java for Mac 问题

    卸载jdk 1.7/1.8: sudo rm -fr /Library/Internet\ Plug-Ins/JavaAppletPlugin.pluginsudo rm -fr /Library/P ...

  5. 笨办法学 Python (Learn Python The Hard Way)

    最近在看:笨办法学 Python (Learn Python The Hard Way) Contents: 译者前言 前言:笨办法更简单 习题 0: 准备工作 习题 1: 第一个程序 习题 2: 注 ...

  6. 初学jquery,自己写的一个jquery幻灯片,代码有些笨拙,希望有大神可以指点一二,精简一下代码

    html代码 <div class="picCon"> <div class="bigPic"> <ul> <li c ...

  7. html5-表单

    例子: text,number,email 的输入框 <!-- required:必填项 --> <!-- autofocus:获得焦点 --> <!-- placeho ...

  8. JAVA中怎么处理高并发的情况

    一.背景综述 并发就是可以使用多个线程或进程,同时处理(就是并发)不同的操作. 高并发的时候就是有很多用户在访问,导致系统数据不正确.糗事数据的现象.对于一些大型网站,比如门户网站,在面对大量用户访问 ...

  9. HTML 折行 <br/>标签

    定义和用法: <br/>可插入一个简单的换行符. br标签是单独出现的,<br /> 当使用br标签时,其后面的所有内容都将在下一行出现 属性 Common -- 一般属性 c ...

  10. 分治法求2n个数的中位数

    问题:设X[0:n-1]和Y[0:n-1]为两个数组,每个数组中含有n个已排好序的数.试设计一个O(logn)时间的分治算法,找出X和Y的2n个数的中位数 思想: 对于数组X[0:n-1]和Y[0:n ...