目的：

1.掌握uni.request

2.掌握button @click点击事件

3.掌握v-model实现双向绑定

代码：

template区

<template>
   <view class="vw1">
       <view class="vw2">
       <input class="ip1" placeholder="请输入要发送的信息" v-model="text"/>
       <button class="bt1" type="primary" @click="click1">发送</button>
       </view>
       <view class="vw3" v-for="(item,index) in msglist"> //v-for循环遍历出聊天内容
           <text>{{item}}</text>
       </view>
   </view>
</template>

script区

<script>
   export default {
       data() {
           return {
               text:"", //用户输入框中输入的内容
               msglist:[ ] //用于存放对话内容的列表
           }
       },
       methods: {
               click1(){ //定义一个click1函数来实现存入对话及api请求
                   this.msglist.push(this.text) //将输入框中内容传入存放对话的列表
                   uni.request({ //发起api请求
                       url:'https://apibug.cn/api/xiaoai/?msg='+this.text+'&apiKey=af4d2b71116c2ca96aa8411529a9c641',

                         //将用户输入框中的内容放入api的url中
                       success:(res) => {
                           console.log(res.data)
                           this.text = '' //清空输入框，方便用户下次输入
                           this.msglist.push(res.data.text) //将机器人回复内容传入列表
                       }
                   })
               }
           }
   }
</script>

style区

<style>
   .ip1{
       caret-color: #4e6ef2;
       position: relative;
       z-index: 17;
       box-sizing: border-box;
       display: block;
       padding: 10px 20px;
       margin: 0;
       height: 48px;
       line-height: 20px;
       width: 336px;
       border: 1px solid #b8b8b8;
       font-size: 18px;
       color: #1f1f1f;
       transition: .3s;
       font-family: PingFangSC-Regular,Tahoma,Helvetica,"Microsoft Yahei","微软雅黑",Arial,STHeiti;
       border-radius: 8px;
       margin-top: 50px;
   }
   .bt1{
       width: 336px;
       height: 48px;
       line-height: 48px;
       background: #4e6ef2;
       border-radius: 10px;
       box-shadow: 0 6px 16px 0 rgb(78 111 242 / 30%);
       font-size: 17px;
       font-weight: 800;
       border: 0;
       color: #fff;
       cursor: pointer;
       margin-top: 40px;
   }
   .vw1{
       width: 100%;
       height: 100%;
       flex: ;
       display: flex;
       flex-direction: column;
       justify-content: column;
       align-items: center;
       margin-top: 50px;
   }
   .vw2{
       margin-bottom: 20px;
   }
   .vw3{
       margin-top:7px;
   }
</style>

Uniapp案例-聊天机器人demo相关推荐

【技术】uniapp之聊天室 demo
[技术] uniapp 之聊天室 demo 效果代码 <template><view><view class="content" @touchst ...
聊天机器人demo库——gradio
介绍: 聊天机器人在自然语言处理 (NLP) 研究中得到广泛研究,并且是 NLP 在工业中的常见用例.由于聊天机器人旨在供客户和最终用户直接使用,因此验证聊天机器人在面对各种输入提示时的行为是否符合预 ...
AJAX案例 – 聊天机器人
1 演示案例要完成的效果实现步骤: ① 梳理案例的代码结构 ② 将用户输入的内容渲染到聊天窗口 ③ 发起请求获取聊天消息 ④ 将机器人的聊天内容转为语音 ⑤ 通过 <audio> 播放语 ...
python自然语言处理与方言聊天机器人_聊天机器人Python实现案例 | 老炮儿聊机器语音...
点击上方蓝色字体,关注:九三智能控世界上最早的聊天机器人诞生于20世纪80年代,名为"阿尔贝特",用BASIC语言编写而成.目前,聊天机器人从功能和技术的角度,可以分为两类,一类 ...
java 聊天机器人源码_Alice聊天机器人源码及DEMO - 源码下载|Windows编程|网络编程|源代码 - 源码中国...
压缩包 : Alice聊天机器人源码及DEMO.rar 列表 Alice聊天机器人源码及DEMO/.classpath Alice聊天机器人源码及DEMO/.project Alice聊天机器人源码及 ...
（微信）聊天机器人--实用案例
关于微信聊天机器人或者聊天机器人,大家所熟知的就是图灵机器人,聊天比较灵活,可以承担一部分客服的工作.除了图灵机器人,除了大家知道的客服功能,今天为大家重点分享几个机器人的使用方法,相信这些机器人可以 ...
AIGC：ChatGPT(一个里程碑式的对话聊天机器人)的简介(意义/功能/核心技术等)、使用方法(七类任务)、案例应用(提问基础性/事实性/逻辑性/创造性/开放性的问题以及编程相关)之详细攻略
AIGC:ChatGPT(一个里程碑式的对话聊天机器人)的简介(意义/功能/核心技术等).使用方法(七类任务).案例应用(提问基础性/事实性/逻辑性/创造性/开放性的问题以及编程相关)之详细攻略导读 ...
你们怎么都有自己的聊天机器人？给我也来一个！
点击左上方蓝字关注我们 PaddlePaddle × Wechaty AI ChatBot创意赛正在火热进行中,人工智能时代的ChatBot需要具备哪些能力?由你来定义!参赛的小伙伴们果然各显神通,快 ...
微信聊天机器人-存储好友分享消息
文章目录一.背景二.效果展示三.wxpy 四.读写excel 五.定时器六.demo下载七.参考文章一.背景一般大公司都比较重视企业文化,和学习氛围,这不我们的团队也是如此,每个人每月微 ...

Uniapp案例-聊天机器人demo

目的：

代码：

Uniapp案例-聊天机器人demo相关推荐

最新文章

热门文章