E企盈小程序开发-热线：4006-838-530前言：最近写了一个微信小程序，扫码体验：进入正题： 首先去图灵机器人注册一个机器人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小程序
最新评论