小程序ai

327 阅读2分钟

# 小程序流式数据监听

在wx.request接口配置中添加 envleChunked为true监听数据返回

responseType设置数据返回类型,这里设置返回类型为arraybuffer数据类型

需要注意的是 小程序中接口请求时长默认是60秒 一旦超过就会默认暂停,而ai接口返回数据 数据量较大时 通常都会超过60s

image.png

# 通过wx.request中onChunkReceived方法获取监听数据

此时监听返回的数据为 arrayBuffer 格式需要处理数据格式

在开发者上使用 new TextDecoder('utf-8').decode(arrayBuffer);解析是可行的 但是在手机上不支持使用,手机上小程序内部浏览器版本过低不支持使用此方法

首先将数据转为Uint8Array数据格式在通过 decodeURIComponent(escape(String.fromCharCode(...totalData)))解析 会返回JSON数据格式

image.png

注意!

小程序的流式数据监听方法并不会在接口返回几次数据就能接受几次,而是将监听到的数据进行储存在进行返回,而且不是储存的完整数据,列如: 完整数据三条 11, 22, 33 后端返回三次 而小程序监听返回一次或两次 并且返回格式为 第一次返回1 第二次返回1,22,33 出现数据不完整情况

此处为了解决这类问题 创建了一个new Uint8Array作为储存叠加再通过定时器来定时处理数据

image.png

由于流式数据返回需要高频率更新数据 而更新数据会更新demo 会影响性能,所以更新数据时只更新指定数据即可 可参考小程序文档 developers.weixin.qq.com/miniprogram…

image.png

完成以上操作再使用toxml就能进行回显了,以下是toxml开源地址 github.com/sbfkcel/tow…

需要注意的是 此插件较大 上线发版注意体积超出 如果超出了,可以将wxParse文件下的emojis表情包解析的文件删了,这是小程序自带表情包解析 其他的不能动

image.png

交互

交互的话分为 回答问题时追尾, 用户向下滑动屏幕时,或者用户点击屏幕再拖时,用户长按屏幕后再拖动时停止 回答问题追尾的操作 触摸结束时进行操作

回答追尾:使用小程序scroll-view组件scroll-into-view属性 每次更新值时更新scroll-into-view绑定值 developers.weixin.qq.com/miniprogram… 文档地址

用户向下滑动时:可以注意scroll-view滚动时触发的方法bind:scroll,获取的deltaY方法大于0就是滚动条向上滚动了

image.png

用户操作屏幕时的方法也有对应文档developers.weixin.qq.com/miniprogram…

image.png