【JS】微信小程序连接图灵API实现智能聊天（超级简单）

首先去图灵机器人注册一个机器人http://www.tuling123.com/，把apikey复制下来。

小程序的demo.wxml

<view class='top'>{{tittle}}</view>
<view class='que' >
<block wx:for="{{syas}}"  wx:for-item="item" wx:key='{{syas}}' >
<view class='con'>
<view class='isay'>
<view class='r-t'>
<text>{{item.isay}}</text>
</view>
<view class='r-i'>
<image src='https://www.pianshen.com/article/129211017/{{headRight}}'></image>
</view>
</view>
<view class='robort'>
<view class='l-i'>
<image src='https://www.pianshen.com/article/129211017/{{headLeft}}'></image>
</view>
<view class='l-t'>
<text>{{item.robot}}</text>
</view>
</view>
</view>
</block>
</view>
<view class='send'>
<view class='input' >
<form bindsubmit='converSation'>
<input type='text' class='text' placeholder='说点什么吧~' name='says'></input>
<button class='btn' id='btn' form-type='submit'>发送</button>
</form>
<button class='btn-d' bindtap='delectChat' >清空</button>
</view>
</view>

demo.wxss

.top{
position: fixed;
top: 0;
height: 6vh;
width: 100%;
line-height: 40px;
background-color: #ffffff;
text-align: center;
font-size: 20px;
font-weight: bold;
color:rgba(2, 2, 5, 0.87);
box-shadow: 8px -2px 15px rgb(209, 204, 204)
}
.top-r{
position: fixed;
left: 15px;
color: #7c22d6;
font-size: 15px
}
.send{
position: fixed;
bottom: 0;
width: 100%;
height: 12vh;
line-height: 140px;
background-color:#ffffff;
text-align: center;
box-shadow: 6px -2px 15px rgb(209, 204, 204)
}
.input{
position: fixed;
width: 100%;
bottom: 10px;
}
.text{
float: left;
margin-left: 10px;
width: 61%;
height: 33px;
border-radius:29px;
font-size: 12px;
background-color: rgb(239, 243, 243);
text-align: center;
color: #505050
}
.btn{
float:left;
margin-left: 10px;
height: 31px;
width: 53px;
background-color: rgba(17, 208, 192, 0.88);
line-height: 31px;
font-size: 12px;
color: #ffffff;
cursor: pointer;
border-radius:18px;
box-shadow:3px 3px 12px -1px #968f96db;
}
.btn-d{
float:left;
margin-left: 8px;
height: 31px;
width: 52px;
background-color: rgb(0, 0, 0);
line-height: 31px;
color: #fafafa;
cursor: pointer;
border-radius:18px;
box-shadow:3px 3px 12px -1px #968f96db;
font-size: 12px
}
.say{
float: right;
margin-right: 30px;
width: 30px;
height: 29px;
font-size: 16px;
font-weight: bold;
line-height: 29px;
color: #9f2dee;
cursor: pointer;
border-radius:7px;
}
.que{
margin-top: 7vh;
width: 98%;
margin-left: 1%;
line-height: 32px;
margin-bottom: 13vh
}
.robort{
width: 65%;
margin-top: 0px
}
.robort image{
margin-bottom: -60px;
width: 30px;
height: 30px;
border-radius: 7px;
}
.robort text{
margin-left: 4px;
border-radius: 10px;
font-size: 14px;
color:  rgba(226, 19, 115, 0.788);
margin-bottom: -32px;
}
.isay{
margin-top: 5px
}
.isay image{
float: right;
margin-right: -86vw;
width: 30px;
height: 30px;
border-radius: 7px;
background: darkblue
}
.isay text{
margin-right: 5px;
float: right;
border-radius: 8px;
font-size: 14px;
color: rgba(136, 13, 194, 0.664);
}
.con{
margin-top: 1%;
margin-left: 1%;
width: 98%;
}
.l-i{
width: 30px;
}
.l-t{
margin-top: 15px;
margin-left: 35px;
border-radius: 15px;
}
.r-i{
width: 30px;
}
.r-t{
float: right;
margin-right: 41px;
border-radius: 15px;
}

demo.js

const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
tittle: "Let's Chat",
syas: [{
'robot': '我是XX，来跟我聊天吧！'
}
],
headLeft: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4139308026,2925331886&fm=26&gp=0.jpg',
headRight: '',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function() {
let that = this
wx.getUserInfo({
success:function(e){
let header = e.userInfo.avatarUrl
that.setData({
headRight:header
})
}
})
},
converSation: function(e) {
let that = this
var obj = {},
isay = e.detail.value.says,
syas=that.data.syas,
length = syas.length,
key='apikey'//这里填入你得到的图灵机器人的apikey
console.log(length)
wx.request({
url: 'http://www.tuling123.com/openapi/api?key='+key+'&info='+isay,
success:function(res){
let tuling = res.data.text;
obj.robot=tuling;
obj.isay=isay;
syas[length] = obj;
that.setData({
syas:syas
})
}})
},
delectChat:function(){
let that = this
that.setData({
syas:[]
})
}
})

好了，大功告成，实现图：