简单的js聊天机器人框架BotUI

当前位置:主页 > jQuery库 > 工具类 > 简单的js聊天机器人框架BotUI
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
简单的js聊天机器人框架BotUI
分享:

    插件介绍

    Botui是一款简单的js聊天机器人框架。Botui基于Vue.js,通过简单配置,就可以制作出一个功能简单的聊天机器人,非常神奇。

    浏览器兼容性

    浏览器兼容性
    时间:2017-07-14
    阅读:
简要教程

Botui是一款简单的js聊天机器人框架。Botui基于Vue.js,通过简单配置,就可以制作出一个功能简单的聊天机器人,非常神奇。

使用方法

在页面中引入botui.min.css和botui-theme-default.css样式文件,vue.min.js和botui.min.js文件。

<link rel="stylesheet" href="botui.min.css">
<link rel="stylesheet" href="botui-theme-default.css">
<script src="vue.min.js"></script>
<script src="botui.min.js"></script>
                
HTML结构

使用下面的HTML结构来创建一个聊天机器人面板。

<div class="botui-app-container" id="botui-app">
  <bot-ui></bot-ui>
</div>
                
初始化插件

通过下面的代码就可以生成一个最简单的聊天机器人。

var botui = new BotUI('botui-app'); // 参数是容器的id

botui.message.bot({ // 第一条信息
  delay: 200,
  content: 'hello'
}).then(function () {
  return botui.message.bot({ // 第二条信息
    delay: 1000, // 等待1秒
    content: 'how are you?'
  });
}).then(function () {
  return botui.action.button({ // 与用户交互
    delay: 1000,
    action: [
      {
        text: 'Good',
        value: 'good'
      },
      {
        text: 'Really Good',
        value: 'really_good'
      }
    ]
  });
}).then(function (res) {
  return botui.message.bot({
    delay: 1000,
    content: 'You are feeling ' + res.text + '!'
  });
});
                

Botui聊天机器人框架的github地址为:https://github.com/moinism/botui

网友评论