一、布局

（控制台程序可以跳过这一步）本文以WPF为示例来讲解。

首先我们需要一只聊天界面，大概需要这些组件：

“发送”Button一只 TextBox一条 ScrollViewer和WrapPanel各一只。

这里我把它写成UserControl方便使用，喵。

以下是XAML布局:(ScrollViewer的Style可以删掉(如果报错))

 <UserControl

              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

              xmlns:local="clr-namespace:Lemon_App"

              xmlns:Forms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Name="userControl" x:Class="Lemon_App.IMBOX"

              mc:Ignorable="d" Loaded="UserControl_Loaded"  SizeChanged="UserControl_SizeChanged">

     <Grid>

         <Border Height="1" VerticalAlignment="Bottom" Background="#FFE6E6E6" Margin="0,0,0,90"/>

         <TextBox x:Name="textBox1" TextWrapping="Wrap" FontSize="14" BorderThickness="0" BorderBrush="{x:Null}" SelectionBrush="#FF31C27C" KeyDown="textBox1_KeyDown" Height="90" VerticalAlignment="Bottom" Background="{x:Null}"/>

         <Border BorderThickness="1" Background="#B2007ACC" CornerRadius="5" HorizontalAlignment="Right" Width="57" Height="30" VerticalAlignment="Bottom" Margin="3">

             <Label x:Name="label" Content="发送" Margin="9.919,1.833,4.331,-1" Foreground="White" MouseDown="label_MouseDown" Height="27.167" VerticalAlignment="Top"/>

         </Border>

         <ScrollViewer x:Name="Sllv" PanningMode="Both" Margin="0,0,0,90" BorderBrush="{x:Null}" Template="{DynamicResource SCS}">

             <WrapPanel x:Name="Robot" Height="Auto"  SizeChanged="Robot_SizeChanged" Width="{Binding ActualWidth, ElementName=userControl, Mode=OneWay}"/>

         </ScrollViewer>

     </Grid>

 </UserControl>

部分事件处理代码:

  public IMBOX()

         {

             InitializeComponent();

         }

         private void UserControl_Loaded(object sender, RoutedEventArgs e)

         {

             Robot.Width = this.ActualWidth;

         }

   private void textBox1_KeyDown(object sender, KeyEventArgs e)

         {

             if (e.Key == Key.Enter)

             {

                 label_MouseDown(null, null);

             }

         }

         private void Robot_SizeChanged(object sender, SizeChangedEventArgs e)

         {

             double d = this.Sllv.ActualHeight + this.Sllv.ViewportHeight + this.Sllv.ExtentHeight;

             this.Sllv.ScrollToVerticalOffset(d);

         }

         private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)

         {

             Robot.Width = this.ActualWidth;

             foreach(var o in Robot.Children)

             {

                 (o as UserControl).Width = this.ActualWidth;

             }

         }

 //以上负责自适应大小

 private async void label_MouseDown(object sender, MouseButtonEventArgs e){

   //待会处理机器人事件时用到

 }

接着是聊天气泡，可以分为机器人（在左边）、自己（在右边）以下是XAML：

机器人:(名称及头像可以自己定义)

 <UserControl

              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

              xmlns:local="clr-namespace:Lemon_App"

              x:Class="Lemon_App.Robot"

              mc:Ignorable="d" Height="Auto" Width="Auto">

     <Grid>

         <Border x:Name="Image" BorderThickness="0" HorizontalAlignment="Left" Margin="12,12,0,0" Width="30" CornerRadius="50" Height="30" VerticalAlignment="Top">

             <Border.Background>

                 <ImageBrush ImageSource="/Lemon App;component/Page/Lemon App Ico.ico"/>

             </Border.Background>

             <!--ed:RegularPolygon Fill="White" InnerRadius="0.47211" Margin="5" PointCount="5" Stretch="Fill"/!-->

         </Border>

         <Border Width="Auto" Height="Auto" Margin="55,35,0,0" CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Left" Background="#FF3399FF">

             <TextBlock x:Name="Te" Height="Auto" TextWrapping="Wrap" Width="Auto" d:LayoutOverrides="LeftPosition, RightPosition" Cursor="" Margin="6" Foreground="White" FontSize="14" Text="欢迎回来"/>

         </Border>

         <TextBlock Margin="50,15,40,35.78" TextWrapping="Wrap" Text="小萌机器人" Foreground="#FF2D2D30"/>

         <Border HorizontalAlignment="Left" Height="16" Margin="46,38,0,0" VerticalAlignment="Top" Width="10" RenderTransformOrigin="0.5,0.5">

             <Border.RenderTransform>

                 <TransformGroup>

                     <ScaleTransform/>

                     <SkewTransform/>

                     <RotateTransform Angle="-60"/>

                     <TranslateTransform/>

                 </TransformGroup>

             </Border.RenderTransform>

             <Path Data="M68.2,31.8c-2.3-2.3-6.1-2.3-8.4,0l-56,56C0,91.6,2.7,98,8,98h112c5.3,0,8-6.4,4.2-10.2L68.2,31.8z" Fill="#FF3399FF" Stretch="Fill" Margin="0,0,0,-2.912"/>

         </Border>

     </Grid>

 </UserControl>

事件处理代码:

     public partial class Robot : UserControl

     {

         public Robot()

         {

             InitializeComponent();

             RenderOptions.SetBitmapScalingMode(Image, BitmapScalingMode.Fant);

         }

         public Robot(string Text)

         {

             InitializeComponent();

             Te.Text = Text;

             RenderOptions.SetBitmapScalingMode(Image, BitmapScalingMode.Fant);

         }

     }

接下来是自己的XAML:

 <UserControl

              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

              xmlns:local="clr-namespace:Lemon_App"

              x:Class="Lemon_App.User"

              mc:Ignorable="d" Height="Auto" Width="Auto" Loaded="UserControl_Loaded">

     <Grid>

         <Border x:Name="bd" BorderThickness="0" HorizontalAlignment="Right" Margin="0,12,12,0" Width="30" CornerRadius="50" Height="30" VerticalAlignment="Top" Background="#FF007ACC"/>

         <Border Width="Auto" Height="Auto" Margin="0,35,55,0" CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Right" Background="#FF3399FF">

             <TextBlock x:Name="Te" Height="Auto" TextWrapping="Wrap" Width="Auto" d:LayoutOverrides="LeftPosition, RightPosition" Cursor="" Margin="6" Foreground="White" FontSize="14" Text="啦啦啦"/>

         </Border>

         <Grid HorizontalAlignment="Right" Height="18" Margin="0,16,45,0" VerticalAlignment="Top" Width="Auto">

             <Grid.ColumnDefinitions>

                 <ColumnDefinition Width="Auto"/>

                 <ColumnDefinition Width="Auto"/>

             </Grid.ColumnDefinitions>

             <TextBlock x:Name="UName" Margin="0,0,1.636,0" TextWrapping="Wrap" Text="小萌机器人" Foreground="#FF2D2D30" HorizontalAlignment="Right" Width="Auto"/>

         </Grid>

         <Border HorizontalAlignment="Right" Height="16" Margin="0,38,46,0" VerticalAlignment="Top" Width="10" RenderTransformOrigin="0.5,0.5">

             <Border.RenderTransform>

                 <TransformGroup>

                     <RotateTransform Angle="60"/>

                     <TranslateTransform/>

                 </TransformGroup>

             </Border.RenderTransform>

             <Path Data="M68.2,31.8c-2.3-2.3-6.1-2.3-8.4,0l-56,56C0,91.6,2.7,98,8,98h112c5.3,0,8-6.4,4.2-10.2L68.2,31.8z" Fill="#FF3399FF" Stretch="Fill" Margin="0,0,0,-2.912"/>

         </Border>

     </Grid>

 </UserControl>

事件处理代码:

     public partial class User : UserControl

     {

         public User()

         {

             InitializeComponent();

         }

         public User(String Text)

         {

             InitializeComponent();

             RenderOptions.SetBitmapScalingMode(bd, BitmapScalingMode.Fant);

             Te.Text = Text;

         }

         private void UserControl_Loaded(object sender, RoutedEventArgs e)

         {

             if (System.IO.File.Exists(He.Settings.UserImage))

             {

                 var image = new System.Drawing.Bitmap(He.Settings.UserImage);

                 bd.Background = new ImageBrush(image.ToImageSource());

             }

             UName.Text = He.Settings.RobotName;

         }

     }

其中的He.Settings.UserImage可以替换成你的图像路径，或直接在XAML中定义

二、编码

我们有了KEY就可以向机器人发送请求惹：

http://www.tuling123.com/openapi/api?key={0}&info={1}&userid={2}

{0} : 你注册的KEY

{1} : 对机器人说的话

{2} :（选填，但最好还是填写，用于辨认用户）用户名称或ID

接下来就要对机器人发回的数据进行解码

首先要识别他发回的是什么类型的：（简单的文本或链接）

状态码位于json数据的["code"]处

简单的文本处理：

  if ((string)obj["code"] == "" || obj["code"].ToString() == "")

                 {

                     User U = new User(textBox1.Text)

                     {

                         Width = Robot.ActualWidth,Opacity =

                     };

                     Robot Rb = new Robot((string)obj["text"])

                     {

                         Width = Robot.ActualWidth, Opacity =

                     };

                     Robot.Children.Add(U);

                     Robot.Children.Add(Rb);

                     var b = new DoubleAnimation(, TimeSpan.FromSeconds(0.2));

                     U.BeginAnimation(OpacityProperty, b);

                     Rb.BeginAnimation(OpacityProperty, b);

                 }

链接处理:

  else if ((string)obj["code"] == "")

                 {

                     string i = (string)obj["text"];

                     User Uu = new User(textBox1.Text)

                     {

                         Opacity = ,

                         Width = Robot.ActualWidth

                     };

                     Lemon_App.Robot Rbu = new Lemon_App.Robot((string)obj["url"] + i)

                     {

                         Opacity = ,

                         Width = Robot.ActualWidth,

                         ToolTip = (string)obj["url"].ToString()

                     };

                     Rbu.MouseDown += Rbu_MouseDown;

                     Robot.Children.Add(Uu);

                     Robot.Children.Add(Rbu);

                     var b = new DoubleAnimation(, TimeSpan.FromSeconds(0.2));

                     Uu.BeginAnimation(OpacityProperty, b);

                     Rbu.BeginAnimation(OpacityProperty, b);

                 }

附一只事件处理代码，用于处理用户点击链接时打开浏览器:

        private void Rbu_MouseDown(object sender, MouseButtonEventArgs e)

         {

             Process.Start((sender as Grid).ToolTip.ToString());

         }

这样我们就完成了编码工作。

三、测试

接下来就可以和机器人愉快地聊天啦o(*￣▽￣*)ブ

测试成功！( •̀ ω •́ )y

已更新

本教程示例代码（WPF）：https://github.com/TwilightLemon/Lime

这次的教程到这里就结束啦，如果喜欢就快快关注我吧！

日常API之图灵聊天机器人的更多相关文章

使用图灵机器人api搭建微信聊天机器人php实现
之前通过hook技术实现了微信pc端发送消息功能,如果在结合图灵机器人就能实现微信聊天机器人. 代码下载:http://blog.yshizi.cn/131.html 逻辑如下: 下面我简单介绍一下步 ...
【Python+postman接口自动化测试】（8）以青云客机聊天器人和图灵聊天机器人接口示范python发送get和post
以青云客机器人和图灵机器人接口示范python发送get和post 发送请求,我们这里主要使用Python的一个第三方包(需要先安装):requests. Python3自带的http.client和 ...
vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用（接入了聊天机器人，能够进行正常对话）
使用Vue2进行的仿手机QQ的webapp的制作,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com ...
使用图灵机器人API实现聊天机器人
使用图灵机器人的API需要先注册,获取key才行,这我就不说了,自己到http://www.tuling123.com/注册一个账号即可. 下面就是一个简单的python调用API实现聊天机器人的简易 ...
QQ 聊天机器人API
QQ机器人是腾讯陆续推出的的人工智能聊天机器人的总称. 都说小Q妹妹聪明好学,我们能够教她说话.也能够请他帮忙查询邮编.手机号,或者解释成语.翻译成语,据说她还会查询手机号码归属地.应用科学计算器. ...
微信的自动回复&接入聊天机器人
今天偶尔发现了一个有趣的python库--itchat,可以实现微信的自动回复.防撤回,结合图灵机器人还能实现聊天机器人的作用简单介绍一下配置与工具 win7旗舰版 pycharm python ...
Python进阶开发之网络编程,socket实现在线聊天机器人
系列文章 √第一章元类编程,已完成 ; √第二章网络编程,已完成 ; 本文目录什么是socket?创建socket客户端创建socket服务端socket工作流程图解socket公共函数汇总实战 ...
【Python撩妹合集】微信聊天机器人，推送天气早报、睡前故事、精美图片分享
福利时间,福利时间,福利时间如果你还在为不知道怎么撩妹而烦恼,不知道怎么勾搭小仙女而困惑,又或者不知道怎么讨女朋友欢心而长吁短叹. 那么不要犹豫徘徊,往下看.接下来我会分享怎么使用 Python 实 ...
QQ 聊天机器人小薇 2.1.0 发布！
本次发布加入了支持茉莉机器人,并且更容易搭建开发环境,在线显示登录二维码~ 简介 XiaoV(小薇)是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动: 监听多个 QQ 群消息 ...

随机推荐

random seed()函数
用seed()生成随机数字,生成的法则与seed内部的数字相关,如果数字相同,则生成的随机数是相同的. 刷题宝上面的题目: >>> import random >>> ...
【转载】从头编写 asp.net core 2.0 web api 基础框架 (3)
Github源码地址:https://github.com/solenovex/Building-asp.net-core-2-web-api-starter-template-from-scratc ...
viewport预备知识
dpr === dppx dpr:device pixel ratio 设备像素比 dppx:Number of dots per px unit 每像素有多少点 . 1dppx = 96dpi dp ...
js--Dom Bom操作
– 基础 – 内置对象 ● String对象:处理所有的字符串操作 ● Math对象:处理所有的数学运算 ● Date对象:处理日期和时间的存储.转化和表达 ● Array对象:提供 ...
MongoDB建立主从复制小案例(一主一从)
花了两天学习了mongoDB, 今天接触到了mongo的主从配置, 把它记下来 1. 开启两个mongo服务器(用于一主一从, 没有加安全验证相关参数 : 可以使用mongd-help查看) mong ...
burpsuite截断绕过前端限制上传一句话
设置代理,这里就不说了打开上传界面 burpsuite开启拦截,上传lurp.hpg 在burp找到上传文件的格式改回原来一句话的格式上传= =
HDU6235-Permutation-水题-2017中国大学生程序设计竞赛-哈尔滨站-重现赛
Permutation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Tot ...
powerdesign
JavaScript八张思维导图—基本语句
JS基本概念 JS操作符 JS基本语句 JS数组用法 Date用法 JS字符串用法 JS编程风格 JS编程实践不知不觉做前端已经五年多了,无论是从最初的jQuery还是现在火热的Angular,Vu ...
solr单机版安装与基本部署
安装solr准备工作: linux/tomcat/jdk solr单机版的安装 1.解压缩tomcat安装包 tar -zxf tomcat-xxx.tar.gz 2.创建文件夹:mkdir /usr ...

日常API之图灵聊天机器人

一、布局

二、编码

三、测试

日常API之图灵聊天机器人的更多相关文章

随机推荐

热门专题