E企盈营销工具技术服务商 热线:4006-838-530

靖宇县E企盈小程序微信小程序连接图灵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='{{headRight}}'>&l开通猫爬架小程序电话:4006-838-530t;/image></view>    </view>  <view class='robort'>   <view class='l-i'>    <image src='{{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.jsconst app = getApp()Page({  /**   * 页面的初始数据   */  data: {    tittle: "Let's Chat",    syas: [{        'robot': '我是XX,来跟我聊天吧!'              }    ],    headLeft: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4139308026,2925331886&fm=26开通猫砂小程序电话:4006-838-530&gp=0.jpg',    headRight: '',  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function() {    let that = this      wx.getUserInfo({        success:function(e){          let header = e.userInfo开通内增高小程序电话:4006-838-530.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:[]    })  }})

好了,大功告成,实现图:地址:blogai.cn小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 靖宇县E企盈小程序微信小程序连接图灵API实现智能聊天(超级简单)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏