零基础快速打造一个属于自己的微信聊天工具

“ 零基础快速打造一个属于自己的微信聊天工具”

打开微信，我们可以和别人进行聊天，发送消息。非常方便，那微信是怎么来的呢？这个本质的问题让人突发奇想，我们能不能做一个属于自己的微信聊天工具呢？

有了这个想法，脑袋就没有停止过思考，考虑到微信本身的沉淀还是很足的，做一个微信，还是不太现实，但是我们可以用其他方式实现微信聊天工具。这次我们就来聊一下网页版微信，我们来自己开发。

我们先来看一下效果吧！

零基础快速打造一个属于自己的微信聊天工具

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(" ", "&nbsp;");
    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()，这个函数，是用来调用百度的聊天机器人，让机器人和我们聊天，大家可以换自己写的接口。写接口的方式，之前有写过。

python轻松上手编写接口

然后再来就是美化我们的html，加入css，css文件较大，直接在下方链接中获取。

04— 相关推荐

在公众号后台回复：微信网页版，获取自己的微信聊天工具，获取源代码吧

新年快到了，满屏的祝福弹幕，可自由控制弹框文字

如何简单开发一个微信聊天机器人

二维码表白之二维码里面的小秘密

开发一个属于自己的app

python–让你的电脑调用手机摄像头，实现电脑自由拍照

喜欢，欢迎关注我们！