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

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

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

 

 

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

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

我们先来看一下效果吧!

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

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–让你的电脑调用手机摄像头,实现电脑自由拍照

 

 

喜欢,欢迎关注我们​!

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

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/111405.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号