vue实现的微信机器人聊天功能案例【附源码下载】

更新时间：2019年02月18日 14:56:21 作者：庚中

这篇文章主要介绍了vue实现的微信机器人聊天功能,结合实例形式分析了基于vue.js的微信机器人聊天相关界面布局、ajax交互等操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了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 style="float: left;">微信聊天界面</span>
      <span style="float: right;">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>

附:gethub源码地址:https://github.com/huanggengzhong/jiqiren

还可以点击此处本站下载。

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

vue中更改数组中属性,在页面中不生效的解决方法
今天小编就为大家分享一篇vue中更改数组中属性,在页面中不生效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue实现自定义el-table穿梭框功能
这篇文章主要介绍了vue实现自定义el-table穿梭框功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
在Vue框架中配置Mock服务器的方法
在前端开发中，如果需要模拟后端数据，而又不想开发一个后端服务器，则可以借助mock.js配置一个后端服务器来返回前端需要的数据，本文将会分别介绍在Quasar项目和Vite项目中Mock服务器的配置方法
2022-12-12
vue生成pdf文件步骤及pdf分页隔断处理方法
最近遇到一个需求,需要把内容下载生成pdf文件,但转换过程中内容总是会被截断,就很难受,从网上找到了解决办法分享给大家,这篇文章主要给大家介绍了关于vue生成pdf文件步骤及pdf分页隔断处理的相关资料,需要的朋友可以参考下
2024-02-02
使用vscode 开发uniapp的方法
本文给大家分享我使用vscode开发的一些配置。其中包括uniapp组件语法提示，uniapp代码提示，代码自动格式化问题，对vscode 开发uniapp的相关知识感兴趣的朋友一起看看吧
2021-08-08
vue element-ui的el-input-number默认值设置为空方法
这篇文章主要给大家介绍了关于vue element-ui的el-input-number默认值设置为空的相关资料,el-input-number组件是Element UI非常常用的一个数字输入框组件,它提供了默认值设置的选项,需要的朋友可以参考下
2023-08-08
浅谈vue引入css,less遇到的坑和解决方法
下面小编就为大家分享一篇浅谈vue引入css,less遇到的坑和解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
使用vue.js开发时一些注意事项
使用vue.js进行项目的开发已经有了一定的时间，在任务的过程中以及和不同的开发使用者交流中，逐渐对vue.js的使用心得有了一定的积累。本文主要给大家分享一些开发时需要注意的事项
2016-04-04
element自定义多文件上传触发多次on-change问题
这篇文章主要介绍了element自定义多文件上传触发多次on-change问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue 判断两个时间插件结束时间必选大于开始时间的代码
这篇文章主要介绍了vue 判断两个时间插件结束时间必选大于开始时间的代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11