零基础快速打造一个属于自己的微信聊天工具
“ 零基础快速打造一个属于自己的微信聊天工具”
打开微信，我们可以和别人进行聊天，发送消息。非常方便，那微信是怎么来的呢？这个本质的问题让人突发奇想，我们能不能做一个属于自己的微信聊天工具呢？
有了这个想法，脑袋就没有停止过思考，考虑到微信本身的沉淀还是很足的，做一个微信，还是不太现实，但是我们可以用其他方式实现微信聊天工具。这次我们就来聊一下网页版微信，我们来自己开发。
我们先来看一下效果：
01— 材料准备
我们自己来开发一个简单的网页版微信聊天页面，准备材料：
1、了解Ctrl +v，ctrl+c
2、如果有服务器，你可以搭建在服务器上使用。
好了，材料准备完成了。
02— 思路
材料准备完成，然后我们来整理一下思路，想清楚我们要做什么。
1、我们要做一个网页版微信聊天工具，既然是网页版，离不开的编程语言：html，css，js。
2、我们要发送消息，并且对方发送消息过来，我们也可以收到。我们需要请求后台，将消息储存起来。
3、我们尝试兼容一下手机版，在浏览器中打开试一下。
思路：网页-->a用户-->发送消息-->请求后台--->b用户收到--->发送消息--->请求后台--->a用户收到
03— 思路
思路大家理清楚了，那我们来进入编程。
首先我们需要一个页面，使用到html。
代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><!--设置app访问-->
<base target="_blank">
<title>聊天机器人</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="chat.css">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="chat.js" type="text/javascript"></script>
</head>
<body lang="zh">
<img class="chatBack" src="chatBack.jpg"><!--设置聊天背景-->
<div class="abs cover contaniner">
<div class="abs cover pnl">
<div class="top pnl-head " ></div>
<div class="abs cover pnl-body" id="pnlBody">
<div class="abs cover pnl-msgs scroll" id="show">
<!-- <div class="msg min time" id="histStart">加载历史消息</div>-->
<div class="pnl-list" id="hists">
<!-- 历史消息 -->
</div>
<div class="pnl-list" id="msgs">
<div class="msg robot">
<div class="msg-left" worker="小灵儿">
<div class="msg-host photo" style="background-image: url(head.png)"></div>
<div class="msg-ball" title="今天 17:52:06">你好，我是只能打字的聊天机器人<br>快来和我聊天吧……</div>
</div>
</div>
</div>
<div class="pnl-list hide" id="unreadLine">
<div class="msg min time unread">未读消息</div>
</div>
</div>
<div class="abs bottom pnl-text">
<div class="abs cover pnl-input">
<textarea class="scroll" id="text" wrap="hard" placeholder="在此输入文字信息..."></textarea>
<div class="abs pnl-btn" id="atcomPnl">
<ul class="atcom" id="atcom">发送</ul>
</div>
<div class="abs br pnl-btn" id="submit" style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);" onclick="SendMsg()">发送</div>
</div>
<div class="pnl-support" id="copyright"><a href="#">v1.0.0</a></div>
</div>
</div>
</div>
</div>
<script>
function keydown(e)
{//控制enter键发送消息
var currKey=0,e=e||event;
if(e.keyCode==13)
{
SendMsg();
}
}
document.onkeydown=keydown;
</script>
</body>
</html>界面有了，但是交互没有，我们来加上js，让他请求后台；
代码如下：
// 发送信息
function SendMsg(){
var text = document.getElementById("text");
var schoolList={
'deviceId': 'a14ea14e-a14e-a14e-a14e-a14ea14ea14e',
'question':SendMsgDispose(text.value)};
if (text.value == "" || text.value == null){
alert("发送信息为空，请输入！")
}
else{
$.ajax({
type:"POST",
url:"http://biz.turingos.cn/apirobot/dialog/homepage/chat",
jsonp: 'jsoncallback',
data:schoolList,
success:function (data) {
AddMsg('小灵儿',data.data.results[0].values.text);
console.log(data.data.results);
},
error:function (data){
console.log(data.content);
}
});
AddMsg('default', SendMsgDispose(text.value));
text.value = "";
setTimeout(function () {
($('.pnl-list').children("div:last-child")[0]).scrollIntoView();
},500);
}
}
// 发送的信息处理
function SendMsgDispose(detail)
{
detail = detail.replace("\n", "<br>").replace(" ", " ");
return detail;
}
// 增加信息
function AddMsg(user,content)
{
var str = CreadMsg(user, content);
var msgs = document.getElementById("msgs");
msgs.innerHTML = msgs.innerHTML + str;
}
// 生成内容
function CreadMsg(user, content)
{
var str = "";
if(user == 'default')
{
str = "<div class=\"msg guest\"><div class=\"msg-right\" ><div class=\"msg-host headDefault\"></div><div class=\"msg-ball\" title=\"今天 17:52:06\">" + content +"</div></div></div>"
}
else
{
str = "<div class=\"msg robot\"><div class=\"msg-left\" worker=\"" + user + "\"><div class=\"msg-host photo\" style=\"background-image: url(head.png)\"></div><div class=\"msg-ball\" title=\"今天 17:52:06\">" + content + "</div></div></div>";
}
return str;
}如上，SendMsg()，这个函数，是用来调用百度的聊天机器人，让机器人和我们聊天，大家可以换自己写的接口。写接口的方式，之前有写过。
然后再来就是美化我们的html，加入css，css文件较大，直接在下方链接中获取。
04— 相关推荐
在公众号后台回复：微信网页版，获取自己的微信聊天工具吧
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-01-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读