我最近搞了好些天，终于搞定了一个仿微信聊天界面的H5，尤其是那个底部编辑器，做得还挺像样的。虽然功能没微信多，但发消息、表情啥的都行，而且发出去的消息会自动滚动到最下面，还有各种右键处理提示，比如看图、看视频之类的，还有打赏和占屏这些功能。自我感觉挺好的！
灵感来源
我弄这个像微信那样的聊天界面，就是因为平时用微信觉得它简单好用，特别是下面那个编辑框，聊天起来特顺手。然后我就想，要是能做出个跟微信差不多的H5聊天界面，得多牛！于是乎，我就动手搞起了这个项目。
为喜欢的节目打赏
￥12
￥8
技术选型
所以，我选了H5来做这工作。H5好处多得很，像能跨平台，搞定任务也快，特别适合做这个前端界面。再加上它有语义化标签和丰富的API，用起来就更舒服了。比如说，我用“标签排版，用“标签搞输入框，用“标签弄按钮，感觉就跟玩儿似的。
界面设计
我就照着微信聊天界面来做界面设计呗，就像底部的那个编辑器，我就学的它，把输入框跟发送按钮放一块儿，这样别人输入信息发出去也就顺手多了嘛；然后那个消息显示地方，我还搞了个自动滚屏，来了新消息，屏幕就自己往下拉，让大家都能看到最新的内容。
/* ——聊天编辑器区域 */
var $editor = $(".J__editorText"), editor = $editor[0];
var $face = $(".emotion-area dd img");
$face.on("click", function(e){
if($(this).hasClass("face")){ //图像
var img = $(this)[0].cloneNode(true);
editor.focus();
setTimeout(function(){
var range, node;
if(document.selection && document.selection.createRange){
document.selection.createRange().pasteHTML(img);
}else if(window.getSelection && window.getSelection().getRangeAt){
range = window.getSelection().getRangeAt(0);
range.insertNode(img);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}, 16);
}else if($(this).hasClass("del")){ //删除
editor.focus();
range = window.getSelection().getRangeAt(0);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.execCommand("delete");
}
});
//...格式化编辑器包含标签
editor.addEventListener("focus", function(evt) {
surrounds()
}, true);
editor.addEventListener("input", function(evt) {
surrounds();
}, false);
function surrounds() {
setTimeout(function () { //chrome
var sel = window.getSelection();
var anchorNode = sel.anchorNode;
if (!anchorNode) return;
if (sel.anchorNode === editor ||
(sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === editor)) {
var range = sel.getRangeAt(0);
var p = document.createElement("p");
range.surroundContents(p);
range.selectNodeContents(p);
range.insertNode(document.createElement("br")); //chrome
sel.collapse(p, 0);
(function clearBr() {
var elems = [].slice.call(editor.children);
for (var i = 0, len = elems.length; i < len; i++) {
var el = elems[i];
if (el.tagName.toLowerCase() == "br") {
editor.removeChild(el);
}
}
elems.length = 0;
})();
}
}, 0);
}
//...滚动到聊天内容底部
function scrollToBottom(){
$('.ws__chatMsg-panel').animate({scrollTop: $("#J__chatMsgList").height()}, 300);
}
功能实现
我就照着微信做了呗。先说说发消息，想说啥就在那个输入框里输进去，一点发送，消息就过去了。再说说表情，我弄了个表情选框，你喜欢哪个就挑哪个发给人家。还有一些特别的功能，像消息、图片、视频的右键处理提示，打赏、占屏这些小花样，用起来肯定更有意思。
代码编写
在编程这块儿，我力求代码简洁高效。我会借助H5的语义化标签和丰富API，帮助大家更轻松地理解并维护代码。比如说，我用“标签排版页面，用“标签做输入框，用“标签做按钮，感觉就像在玩乐高积木一样简单有趣！
测试与优化
在测和优上，我尽量模拟真用场，试面和能。我找了几个朋友试用我的仿微信聊界，听他们的意见，再按意见改。比如，有人说输小，我就把输框调大；有人说发不显眼，我就把发挪个位子换个样儿。试了好几次，我的仿微信聊界越做越好。
心得体会
这次做仿微信聊天界面的项目，让我收获满满。我学会了怎么用H5做出好看又好用的界面，还学会了怎么测试和优化代码。最棒的是，我发现编程真的很有趣，感觉自己的技术也提高了不少。这些经验和感悟，肯定会对我以后的学习和工作有很大帮助。
未来展望
说实话，我做的那个仿微信聊天界面其实还行，不过也知道可以再加强一些。比如说，加些动画特效啥的，用户用起来会更顺手；再把代码弄得更快点，界面跑起来就更溜了；最后就是多加点实用的功能，让大家用着更舒心。以后我会继续加油，把这个仿微信聊天界面做得更好，让它真的能算得上是个好东西。
总的说来，这个H5制作微信聊天页面的项目真的让我感觉自己超厉害！我学到了很多东西，也感受到了编程的乐趣。我觉得只要我坚持下去，我的技术肯定能更上一层楼，做出更好的作品。大家一起来期待！
评论0