案例:使用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开发微信机器人聊天(附完整源码)相关推荐

知识图谱实战开发案例剖析（16）-第一个智能对话机器人（附完整源码）
一.前言这是系列博文<知识图谱实战开发案例剖析>第4部分:知识图谱应用,第16节:第一个智能对话机器人.该系列内容同时已经录制成视频课程,感兴趣的可以访问网易云课堂. 二.正文 2 ...
Ant Design Vue 表格内编辑（附完整源码及效果图）
效果图: 实现关键代码就是表单的 columns 属性对象下标的 scopedSlots: scopedSlots: {customRender: '' } 实现完整代码: <template& ...
【代码案例】博客页面设计（附完整源码）
博客页面设计博客列表页实现导航栏实现版心实现个人信息实现博客列表实现博客正文页引入导航栏.版心.个人信息实现博客正文实现博客登录页引入导航栏实现版心和登录框实现博客编辑页引入 ...
聊天机器人mysql数据_自己动手开发智能聊天机器人完全指南（附完整源码）
一.前言本文是<自己动手开发智能聊天机器人完全指南(附完整源码)>的第二篇,也是21天实战人工智能系列<知识图谱完全项目案例剖析>里面的知识图谱应用的案例.前文中实现了一个最 ...
【NLP】自己搭一个多轮对话聊天机器人（附实现源码）
[NLP]自己搭一个多轮对话聊天机器人(附实现源码) 01 项目框架 02 模型 2.1 粗排 2.1.1BM25 2.1.1 Bool检索 2.2 精排意图识别 03 API交互 04 微信前端 ...
知识图谱实战案例完全剖析（附完整源码和数据集）-张子良-专题视频课程
知识图谱实战案例完全剖析(附完整源码和数据集)-2070人已学习课程介绍课程定位:系统学习知识图谱的佳实践: 系统学习:完全覆盖知识建模.图数据库.知识应用和知识获取: 实战指引: ...
ASP.NET 3.5 新特性开发向导实践（附项目源码下载）
ASP.NET 3.5 新特性开发向导实践(附项目源码下载) 本篇文章将演示ASP.NET 3.5 部分新功能.新特性,包括LINQ.ListView控件.LinqDataSource.DataPag ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
微信小程序之授权登录（附完整源码）
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...

案例:使用vue开发微信机器人聊天(附完整源码)

案例:使用vue开发微信机器人聊天(附完整源码)相关推荐

最新文章

热门文章