案例:使用vue開發微信機器人聊天(附完整原始碼)

阿新 • • 發佈：2019-01-05

先看效果:
在這裡插入圖片描述
實現過程:

<!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:{
                            key:'b6ef78a0c1f24fee90d2317139b9c3d5',
                            info:this.inputValue

                        },
                        // 注意使用箭頭函式,不然裡面的this會發生變化
                        success:(obj)=>{
                            console.log(obj);
                            
                            // 三.獲取機器人介面內容,也將內容渲染到頁面
                            this.messageList.push({
                                message:obj.text,
                                isSelf:false
                            })
                        }

                    }) 

                }
            },
        })


    </script>
</body>

</html>

附:gethub原始碼地址:https://github.com/huanggengzhong/jiqiren,有需要,歡迎下載

案例:使用vue開發微信機器人聊天(附完整原始碼)

先看效果: 實現過程: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5模擬微信聊天介面</title>

vue開發微信公眾號小技巧(易除錯環境)

本主要對在開發微信公眾號時，遇到的一些問題進行總結使用(vue)哦~ 除錯微信公眾號大家在本地環境開發的時候，修改樣式，及除錯介面一遍又一遍的在微信開發者工具上開啟，因為在我們本地瀏覽器是打不開微信的頁面的，或者每次更改一個細節就發一遍測試環境，非常耗時影響開發，這時~~~~

基於vue開發微信小程式，入門開發步驟

接下來。。。。。 1. 初始化一個 mpvue 專案現代前端開發框架和環境都是需要 Node.js 的，如果沒有的話，請先下載 nodejs 並安裝。然後開啟命令列工具： # 1. 先檢查下 Node.js 是否安裝成功 $ node -v v8.9.0

【轉載】使用圖靈機器人介面開發微信公眾號聊天功能、設定自定義選單及申請測試賬號

<?php header("Content-type: text/html; charset=utf-8"); //以下為固定用法，實現和微信的對接、驗證 define("TOKEN", "callTuling"); $wechatObj

vux+vuex+vue+Es6開發微信公眾號的坑

賦值問題 ack 組件公眾 rip cor es6 變量初次開發微信公眾號遇到很多問題，可能是基礎不怎麽牢靠，最近幾天一直在看vue的東西，現在就來慢慢介紹vux和vue這個騷東西的用法：細看文檔一步步來， npm install vux --save 安裝vux這

Vue/Node/MongoDB開發微信全家桶專案實戰視訊教程

第1章本地與伺服器環境準備介紹微信公眾號/小程式/域名/伺服器的申請選購流程，在本地與線上伺服器分別對專案的執行環境進行搭建部署，如 Node.js/Vue/Yarn/PM2/Nginx/MongoDB 等等，同時會來簡單介紹下從本地通過 PM2 利用 Git 倉庫直

php開發微信圖靈機器人

本著開源為原則，為這個世界更美好作出一份共享，我就給大家做個指路人，如果實用，記得給提供開源的朋友一些鼓勵。簡單介紹一下實現思路，使用swoole擴充套件接管php執行，由於swoole只能在類UNIX上執行，所以win朋友需要安裝cygwin執行的類UNIX模擬環境。為了照顧大多數使用者，這裡就以win

使用 Vue 2.x + WeUI 1.x 開發微信視覺樣式

we-vue we-vue 結合 vue2.0 強大的元件化機制和 weui 的微信官方視覺樣式，形成了一套靈活的元件，適用於微信公眾號等移動端開發。目前部分元件已完成，仍有部分在開發中或已計劃即使開發。歡迎貢獻程式碼或者提出寶貴建議。安裝 npm n

開發微信全家桶項目Vue/Node/MongoDB高級技術棧全覆蓋

直觀協同登錄 mongod 增刪改介紹七牛優雅 spa 第1章本地與服務器環境準備介紹微信公眾號/小程序/域名/服務器的申請選購流程，在本地與線上服務器分別對項目的運行環境進行搭建部署，如 Node.js/Vue/Yarn/PM2/Nginx/MongoDB 等

什麽行業適合開發微信小程序？

好評系統開發實時規劃預約點餐外賣說明提前這段時間，隨著微信小程序的系列大動作，商家選擇開發微信小程序的越來越多，那麽各行業開發微信小程序的優勢究竟是什麽呢？總體來說，微信小程序開發優勢： 1、便於分享：（小程序或其中任何一個界面都可以任意分享） 2、方便

PHP開發微信模版消息換行的問題

來看 .cn 解決空白消息 code 開發 ges 打印微信是個坑！微信是個坑！微信是個坑！重要的時間說三遍關鍵的地方是空白換行符到底是什麽也不說，百度說是"\n"；但是在發送消息的時候發現原樣輸出，發現json_encode對\n進行編碼打印出來看是\\n，解決

使用Java語言開發微信公眾平臺(七)——音樂消息的回復

使用 protoc class exc message 方法文件上傳 pre wiki 使用Java語言開發微信公眾平臺(七)——音樂消息的回復在上一節課程中，我們學習了圖片消息的回復功能。根據微信公眾平臺的消息類型顯示，微信共支持文本、圖片、語音、視

利用H5開發微信公眾號

enc 兩個寫入 iss mps rep ast htm chang 一、首先授權配置公眾號設置 --》功能設置設置業務域名! 這裏的MP_verify_w7tdZrafqhkK9Mcj.txt文件，需要放到你項目的根目錄下，例子：你的項目war包叫 tes

（轉）C#開發微信門戶及應用(1)--開始使用微信接口

主界面回調商機存在配置 manager 功能之前隨筆 http://www.cnblogs.com/wuhuacong/p/3613826.html 微信應用如火如荼，很多公司都希望搭上信息快車，這個是一個商機，也是一個技術的方向，因此，有空研究下、學習下微信

.NET開發微信小程序-Template模塊開發

pan brush .get back over 函數 scrip div ont 1.添加一個文件目錄,裏面放模板信息例：我在根目錄添加一個文件夾：template 然後在這個文件夾下面添加相應的頁面。比如我添加一個promodel.wxml文件。主要是放商品相關的模

使用EasyWechat快速開發微信支付

要求前端 bridge 16px 數據 userinfo -s info pid 前期準備：申請微信支付後, 會收到2個參數, 商戶id,和商戶key.註意,這2個參數,不要和微信的參數混淆.微信參數: appid, appkey, token支付參數: merchan

webstorm開發微信小程序代碼提醒(webstorm開發工具)

簡書配置 dea imp image www 技術 XML shu 使用了微信提供的開發工具是真心難用，卡頓厲害、中英文切寫註釋換相當不爽、還沒辦法多開窗口，相信大家也遇到過這種現象。下邊我們介紹下webstorm來開發微信小程序的一些配置： 1.首先FileTyp

C#開發微信支付之企業向用戶付款

退款充足通過 d+ 當前 get 返回驗證類型 inter 1、企業付款的介紹所謂企業付款指的是，在功能開放後諸如保險行業的客戶理賠、退保、商品退款、發放征集活動獎金、抽獎互動等操作都可以通過企業付款完成。而此前，微信支付只能提供客戶向企業單向付款。商戶如果需要給

C# 開發微信掃碼登錄

except lis 連接 write login 處理參數 () || 一，JS 代碼參考 <script type="text/javascript"> function GetRequest() { var url

案例:使用vue開發微信機器人聊天(附完整原始碼)

相關推薦