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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
js实现简单数字变动效果
Nov 06 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 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
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
Python获取文件ssdeep值的方法
2014/10/05 Python
Python的面向对象思想分析
2015/01/14 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
python 拼接文件路径的方法
2018/10/23 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
致裁判员加油稿
2014/02/08 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
图书室标语
2014/06/21 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
Python绘制分类图的方法
2021/04/20 Python
Linux中文件的基本属性介绍
2022/06/01 Servers
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS