您当前的位置: 首页 > 知识百科 > 微信小程序聊天机器人怎么开发?

微信小程序聊天机器人怎么开发?

时间:2023-07-01 14:05 阅读数:30 人阅读 分类:知识百科

微信小程序聊天机器人怎么开发?相信有很多的微信用户都知道微信小程序聊天机器人吧!但是各位亲们,您知道微信小程序聊天机器人怎么开发吗?下边小编我来教大家开发微信小程序聊天机器人。

  微信小程序聊天机器人怎么开发?

  1、整体小程序框架

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

  2、image组件的使用

  image组件的使用与web开发的image标签的用法类似。这里主要关注image的mode属*,它指定图片的缩放以及裁剪模式,共提供了3种缩放、9种裁剪模式。

  3、form表单的使用

  表单,将组件内的用户输入的 提交。

  属*名类型说明

  report-submitBoolean是否返回formId用于发送模板消息

  bindsubmitEventHandle携带form中的数据触发submit事件,event.detail = {value : {‘name’: ‘value’} , formId: ”}

  bindresetEventHandle表单重置时会触发reset事件

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

  表单提交的要点:

  在form内的表单组件必须有name属*。

  在form内的button的 formType 属*为 submit 。

  form的属*bindsubmit即为数据提交事件绑定的响应函数。

  4、wx.request接口的使用

  wx.request发起的是 HTTPS 请求。一个微信小程序,同时只能有5个网络请求连接。

  在开发调试模式开发工具没有做安全检查,因此是可以请求的。

  微信小程序代码如下:

  wx.request({

  url: 'test.php', //仅为示例,并非真实的接口地址

  data: {

  x: '' ,

  y: ''

  },

  header: {

  'content-type': 'application/json'

  },

  method: 'GET',

  success: function(res) {

  console.log(res.data)

  }

  })12345678910111213141234567891011121314

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

  5、scroll-view组件的使用

  scroll-view为可滚动视图容器。这个主要用于聊天界面在有新的消息时需要自动滚动到最新聊天的位置。

  属*名类型默认值说明:

  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中数据并不会被清空。这个问题还没找出解决方案,等研究出方法再更新。

  以上就是微信小程序聊天机器人怎么开发的全部内容咯,感谢大家的观看。如果你要开发微信小程序机器人的话,可以参考以上小编的方法去开发微信小程序聊天机器人哦,请多多关注微小乔哦。

相关推荐:

微信小程序语音聊天功能怎么实现?

微信小程序显示在聊天顶部时,可实时重要的展示状态信息

微信小程序聊天功能怎么开发和使用