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 相关文章推荐
js+jquery常用知识点汇总
Mar 03 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 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安全配置
2006/12/06 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
实例讲解php实现多线程
2019/01/27 PHP
js查找父节点的简单方法
2008/06/28 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
详解js的六大数据类型
2016/12/27 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python中的zip函数使用示例
2015/01/29 Python
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
python如何变换环境
2020/07/21 Python
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
个人自我鉴定写法
2013/11/30 职场文书
大一自我鉴定范文
2013/12/27 职场文书
商铺租赁意向书
2014/04/01 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL