保存到桌面加入收藏设为首页
IOS开发
当前位置:首页 > IOS开发

微信小程序开发项目实战之聊天机器人-安度博客

时间:2019-01-31 19:48:39   作者:   来源:   阅读:175   评论:0
内容摘要:我参加CSDN博客之星评选啦,感谢大家前往投票支持!投票地址:http://blog.csdn.net/vote/list.html?keyword=anda0109#search项目功能介绍人工智能虚拟机器人“微软小冰”大家玩过吧,很酷的一个应用。发送文......
  • 我参加CSDN博客之星评选啦,感谢大家前往投票支持!
    投票地址:http://blog.csdn.net/vote/list.html?keyword=anda0109#search

    项目功能介绍

    人工智能虚拟机器人“微软小冰”大家玩过吧,很酷的一个应用。发送文字、语音和图片都能得到智能的回复。

    那现在我们就用小程序做一个模拟的应用,智能聊天机器人。发送文字它可以回复一段话,或一张图片,是不是有点小酷!

    下面是小程序开发的一个智能聊天机器人的应用界面:

    这里写图片描述 这里写图片描述

    当然,这种智能回复的算法和数据库我们自己肯定是没有的,所以我们借助于图灵机器人的开放API接口来完成我们的功能。

    图灵机器人接口:http://apistore.baidu.com/apiworks/servicedetail/736.html,在百度API store注册获取appkey就可以免费使用了。

    智能聊天机器人的开发步骤

    1、整体框架

    很简单,两个页面。两个tab,并修改window标题栏和tabBar的颜色等属性就好。这个全部在app.json中完成。

    2、image组件的使用

    image组件介绍:https://mp.weixin.nk" target="_blank">qq.com/debug/wxadoc/dev/component/image.html?t=20161122
    image组件的使用与web开发的image标签的用法类似。这里主要关注image的mode属性,它指定图片的缩放以及裁剪模式,共提供了3种缩放、9种裁剪模式。

    3、form表单的使用

    表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

    属性名类型说明
    report-submitBoolean是否返回formId用于发送模板消息
    bindsubmitEventHandle携带form中的数据触发submit事件,event.detail = {value : {‘name’: ‘value’} formId: ”}
    bindresetEventHandle表单重置时会触发reset事件

    当点击 表单中 formType 为 submit 的 <button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key

    表单提交的要点:

    在form内的表单组件必须有name属性。 在form内的button的 formType 属性为 submit 。 form的属性bindsubmit即为数据提交事件绑定的响应函数。

    4、wx.request接口的使用

    wx.request发起的是 HTTPS 请求。一个微信小程序,同时只能有5个网络请求连接。
    在开发调试模式开发工具没有做安全检查,因此是可以请求http的

    wx.request({ url: &#39;test.php&#39; //仅为示例,并非真实的接口地址 data: { x: &#39;&#39;  y: &#39;&#39; } header: { &#39;content-type&#39;: &#39;application/json&#39; } method: &#39;GET&#39; success: function(res) { console.log(res.data) }})

    了解http的对这个接口参数应该不陌生,首先url为接口地址,data为请求的参数,header为请求的头,header中不能设置header 中不能设置 Referer。method为请求的方法,包括:OPTIONS GET HEAD POST PUT DELETE TRACE CONNECT

    5、scroll-view组件的使用

    scroll-view为可滚动视图容器。这个主要用于聊天界面在有新的消息时需要自动滚动到最新聊天的位置。它的属性还是比较多的,参看文档:https://mp.weixin.nk" target="_blank">qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122

    属性名类型默认值说明
    scroll-x Booleanfalse
    scroll-yBooleanfalse允许纵向滚动
    upper-thresholdNumber50距顶部/左边多远时(单位px),触发 scrolltoupper 事件
    lower-thresholdNumber50距底部/右边多远时(单位px),触发 scrolltolower 事件
    scroll-topNumber 设置竖向滚动条位置
    scroll-leftNumber 设置横向滚动条位置
    scroll-into-viewString 值应为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部
    bindscrolltoupperEventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件
    bindscrolltolowerEventHandle 滚动到底部/右边,会触发 scrolltolower 事件
    bindscrollEventHandle 滚动时触发,event.detail = {scrollLeft scrollTop scrollHeight scrollWidth deltaX deltaY}

    这里我们主要用到scroll-y(允许纵向滚动)和scroll-top(设置竖向滚动条位置)属性,以完成聊天内容的自动下翻。

    6、两个坑

    a、更新数据同时更新scrollTop,无法达到效果
    需要先更新数据,然后更新scrollTop

     要这样写才可以更新聊天页面内容并将滚动条置于正确的位置 this.setData({content:newContent}); this.setData({scrollTop:newScrollTop}); 而不能写为下面这样 this.setData({ content:newContent scrollTop:newScrollTop });

    b、textarea的value属性绑定逻辑层的data数据段

    在逻辑层调用setData({text:”“}),textarea中数据并不会被清空。这个问题还没找出解决方案,等研究出方法再更新。

    关于这个小程序的开发过程我录制了视频教程,教程是收费的,有需要的可以购买。
    我的视频教程地址:http://edu.csdn.net/course/detail/3370


本站所有站内信息仅供娱乐参考,不作任何商业用途,不以营利为目的,专注分享快乐,欢迎收藏本站!
所有信息均来自:百度一下 (威尼斯人官网)