溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue如何實(shí)現(xiàn)的微信機(jī)器人聊天功能

發(fā)布時(shí)間：2021-04-23 11:55:16 來(lái)源：億速云 閱讀：291 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了vue如何實(shí)現(xiàn)的微信機(jī)器人聊天功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

具體如下：

先看效果:

vue如何實(shí)現(xiàn)的微信機(jī)器人聊天功能

實(shí)現(xiàn)過(guò)程:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5模擬微信聊天界面</title>
  <style>
    /**重置標(biāo)簽?zāi)J(rèn)樣式*/
    * {
      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 >微信聊天界面</span>
      <span >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="說(shuō)點(diǎn)什么吧..." v-model="inputValue" @keyup.enter="chat">
      <!-- 給發(fā)送也綁定一個(gè)事件 -->
      <span id="btn" @click="chat">發(fā)送</span>
    </div>
  </div>
  <!-- 導(dǎo)入vue -->
  <script src="./lib/vue.js"></script>
  <!-- 導(dǎo)入jQuery -->
  <script src="./lib/jquery-1.12.4.min.js"></script>
  <!-- 開(kāi)始代碼 -->
  <script>
    /*
    思路分析:
    一.定義聊天信息數(shù)組格式
    [
      {
       message:'',
       isSelf:true(自己)/false(機(jī)器人)
      }
    ]
    二.獲取自己輸入內(nèi)容,將內(nèi)容渲染到頁(yè)面
    三.獲取機(jī)器人接口內(nèi)容,也將內(nèi)容渲染到頁(yè)面
     */
    //一:
    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)容渲染到頁(yè)面
          this.messageList.push({
            message: this.inputValue,
            isSelf: true
          })
          // 三.獲取機(jī)器人接口內(nèi)容,也將內(nèi)容渲染到頁(yè)面
          $.ajax({
            url:'http://www.tuling123.com/openapi/api',
            data:{
              userid:1,//添加id,實(shí)現(xiàn)上下文連貫
              key:'b6ef78a0c1f24fee90d2317139b9c3d5',
              info:this.inputValue
            },
            // 注意使用箭頭函數(shù),不然里面的this會(huì)發(fā)生變化
            success:(obj)=>{
              console.log(obj);
              // 三.獲取機(jī)器人接口內(nèi)容,也將內(nèi)容渲染到頁(yè)面
              this.messageList.push({
                message:obj.text,
                isSelf:false
              })
            }
          })
         this.inputValue='';  //最后清除文本框
        }
      },
    })
  </script>
</body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue如何實(shí)現(xiàn)的微信機(jī)器人聊天功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手