vue如何实现的微信机器人聊天功能

发布时间:2021-04-23 11:55:16 作者:小新
来源:亿速云 阅读:291

这篇文章主要介绍了vue如何实现的微信机器人聊天功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。

具体如下:

先看效果:

vue如何实现的微信机器人聊天功能

实现过程:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5模拟微信聊天界面</title>
  <style>
    /**重置标签默认样式*/
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      font-family: '微软雅黑'
    }
    #container {
      width: 450px;
      height: 780px;
      background: #eee;
      margin: 80px auto 0;
      position: relative;
      box-shadow: 20px 20px 55px #777;
    }
    .header {
      background: #000;
      height: 40px;
      color: #fff;
      line-height: 34px;
      font-size: 20px;
      padding: 0 10px;
    }
    .footer {
      width: 430px;
      height: 50px;
      background: #666;
      position: absolute;
      bottom: 0;
      padding: 10px;
    }
    .footer input {
      width: 360px;
      height: 45px;
      outline: none;
      font-size: 20px;
      text-indent: 10px;
      position: absolute;
      border-radius: 6px;
      right: 80px;
    }
    .footer span {
      display: inline-block;
      width: 62px;
      height: 48px;
      background: #ccc;
      font-weight: 900;
      line-height: 45px;
      cursor: pointer;
      text-align: center;
      position: absolute;
      right: 10px;
      border-radius: 6px;
    }
    .footer span:hover {
      color: #fff;
      background: #999;
    }
    /* #user_face_icon {
      display: inline-block;
      background: red;
      width: 60px;
      height: 60px;
      border-radius: 30px;
      position: absolute;
      bottom: 6px;
      left: 14px;
      cursor: pointer;
      overflow: hidden;
    } */
    img {
      width: 60px;
      height: 60px;
    }
    .content {
      font-size: 20px;
      width: 435px;
      height: 662px;
      overflow: auto;
      padding: 5px;
    }
    .content li {
      margin-top: 10px;
      padding-left: 10px;
      width: 412px;
      display: block;
      clear: both;
      overflow: hidden;
    }
    .content li img {
      float: left;
    }
    .content li span {
      background: #7cfc00;
      padding: 10px;
      border-radius: 10px;
      float: left;
      margin: 6px 10px 0 10px;
      max-width: 310px;
      border: 1px solid #ccc;
      box-shadow: 0 0 3px #ccc;
    }
    .content li img.imgleft {
      float: left;
    }
    .content li img.imgright {
      float: right;
    }
    .content li span.spanleft {
      float: left;
      background: #fff;
    }
    .content li span.spanright {
      float: right;
      background: #7cfc00;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="header">
      <span >微信聊天界面</span>
      <span >14:21</span>
    </div>
    <ul class="content">
      <li v-for="(item, index) in messageList" >
        <img :src="'./img/'+(item.isSelf?'r.png':'l.png')" :class="'img'+(item.isSelf?'right':'left')">
        <span :class="'span'+(item.isSelf?'right':'left')">{{item.message}}</span>
      </li>
    </ul>
    <div class="footer">
      <!-- 添加输入内容 -->
      <input id="text" type="text" placeholder="说点什么吧..." v-model="inputValue" @keyup.enter="chat">
      <!-- 给发送也绑定一个事件 -->
      <span id="btn" @click="chat">发送</span>
    </div>
  </div>
  <!-- 导入vue -->
  <script src="./lib/vue.js"></script>
  <!-- 导入jQuery -->
  <script src="./lib/jquery-1.12.4.min.js"></script>
  <!-- 开始代码 -->
  <script>
    /*
    思路分析:
    一.定义聊天信息数组格式
    [
      {
       message:'',
       isSelf:true(自己)/false(机器人)
      }
    ]
    二.获取自己输入内容,将内容渲染到页面
    三.获取机器人接口内容,也将内容渲染到页面
     */
    //一:
    let app = new Vue({
      el: "#container",
      data: {
        //输入内容,双向数据绑定
        inputValue: '',
        //聊天窗口内容
        messageList: []
      },
      methods: {
        chat() {
          // console.log(this.inputValue);
          // console.log(this);
          // 二.获取自己输入内容,将内容渲染到页面
          this.messageList.push({
            message: this.inputValue,
            isSelf: true
          })
          // 三.获取机器人接口内容,也将内容渲染到页面
          $.ajax({
            url:'http://www.tuling123.com/openapi/api',
            data:{
              userid:1,//添加id,实现上下文连贯
              key:'b6ef78a0c1f24fee90d2317139b9c3d5',
              info:this.inputValue
            },
            // 注意使用箭头函数,不然里面的this会发生变化
            success:(obj)=>{
              console.log(obj);
              // 三.获取机器人接口内容,也将内容渲染到页面
              this.messageList.push({
                message:obj.text,
                isSelf:false
              })
            }
          })
         this.inputValue='';  //最后清除文本框
        }
      },
    })
  </script>
</body>
</html>

感谢你能够认真阅读完这篇文章,希望小编分享的“vue如何实现的微信机器人聊天功能”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. 基于python的itchat库实现微信聊天机器人(推荐)
  2. Python如何实现微信机器人

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:vue如何实现商品详情页功能

下一篇:基于BootStrap multiselect.js实现的下拉框联动效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》