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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
浅析PHP文件下载原理
2014/12/25 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
浅谈Vue数据响应
2018/11/05 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python类继承和多态原理解析
2020/02/05 Python
Pycharm中如何关掉python console
2020/10/27 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
土木工程专业自荐信
2013/10/04 职场文书
通息工程毕业生自荐信
2013/10/16 职场文书
四年级数学教学反思
2014/02/02 职场文书
趣味活动策划方案
2014/02/08 职场文书
幼儿园秋游感想
2014/03/12 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
安全宣传标语
2014/06/10 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
高中社区服务活动报告
2015/02/05 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
Golang入门之计时器
2022/05/04 Golang