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


Posted in Javascript onFebruary 18, 2019

本文实例讲述了vue实现的微信机器人聊天功能。分享给大家供大家参考,具体如下:

先看效果:

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程序设计有所帮助。

Javascript 相关文章推荐
延时加载JavaScript代码提高速度
Dec 27 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
jQuery ajax应用总结
Jun 02 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue-cli3环境变量与分环境打包的方法示例
Feb 18 #Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 #Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 #Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 #Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 #Javascript
深入理解vue-class-component源码阅读
Feb 18 #Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 #Javascript
You might like
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
用console.table()调试javascript
2014/09/04 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
全面了解js中的script标签
2016/07/04 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
电大毕业生自我鉴定
2013/11/10 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
会议通知
2015/04/15 职场文书
创业计划书详解
2019/07/19 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
python中如何对多变量连续赋值
2021/06/03 Python
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
python神经网络Xception模型
2022/05/06 Python
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript