vue實現(xiàn)的微信機器人聊天功能案例【附源碼下載】

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

這篇文章主要介紹了vue實現(xiàn)的微信機器人聊天功能,結(jié)合實例形式分析了基于vue.js的微信機器人聊天相關(guān)界面布局、ajax交互等操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了vue實現(xiàn)的微信機器人聊天功能。分享給大家供大家參考，具體如下：

先看效果:

實現(xiàn)過程:

<!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">
      <!-- 添加輸入內(nèi)容 -->
      <input id="text" type="text" placeholder="說點什么吧..." v-model="inputValue" @keyup.enter="chat">
      <!-- 給發(fā)送也綁定一個事件 -->
      <span id="btn" @click="chat">發(fā)送</span>
    </div>
  </div>
  <!-- 導入vue -->
  <script src="./lib/vue.js"></script>
  <!-- 導入jQuery -->
  <script src="./lib/jquery-1.12.4.min.js"></script>
  <!-- 開始代碼 -->
  <script>
    /*
    思路分析:
    一.定義聊天信息數(shù)組格式
    [
      {
       message:'',
       isSelf:true(自己)/false(機器人)
      }
    ]
    二.獲取自己輸入內(nèi)容,將內(nèi)容渲染到頁面
    三.獲取機器人接口內(nèi)容,也將內(nèi)容渲染到頁面
     */
    //一:
    let app = new Vue({
      el: "#container",
      data: {
        //輸入內(nèi)容,雙向數(shù)據(jù)綁定
        inputValue: '',
        //聊天窗口內(nèi)容
        messageList: []
      },
      methods: {
        chat() {
          // console.log(this.inputValue);
          // console.log(this);
          // 二.獲取自己輸入內(nèi)容,將內(nèi)容渲染到頁面
          this.messageList.push({
            message: this.inputValue,
            isSelf: true
          })
          // 三.獲取機器人接口內(nèi)容,也將內(nèi)容渲染到頁面
          $.ajax({
            url:'http://www.tuling123.com/openapi/api',
            data:{
              userid:1,//添加id,實現(xiàn)上下文連貫
              key:'b6ef78a0c1f24fee90d2317139b9c3d5',
              info:this.inputValue
            },
            // 注意使用箭頭函數(shù),不然里面的this會發(fā)生變化
            success:(obj)=>{
              console.log(obj);
              // 三.獲取機器人接口內(nèi)容,也將內(nèi)容渲染到頁面
              this.messageList.push({
                message:obj.text,
                isSelf:false
              })
            }
          })
         this.inputValue='';  //最后清除文本框
        }
      },
    })
  </script>
</body>
</html>

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

還可以點擊此處本站下載。

希望本文所述對大家vue.js程序設(shè)計有所幫助。

您可能感興趣的文章: