Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/zhouzxx/towxml-stream-typer

towxml渲染流式数据，避免重复渲染卡顿
https://github.com/zhouzxx/towxml-stream-typer

ai markdown stream-data towxml typer we-chat

Last synced: 3 months ago
JSON representation

towxml渲染流式数据，避免重复渲染卡顿

Awesome Lists containing this project

README 

          
[演示图片 点击查看效果（由于网络问题，gif动图可能不一定能良好地展示，你直接下载示例在自己电脑上跑更直接）](./towxml_typer.gif)



# towxml-steam-typer

> ##### 代码刚写完没多久，还在持续地完善中，所以当前你下载的版本一定不是稳定版，记得定时更新下代码，由于markdown语法的灵活复杂性，某些情况下难免会出问题。



> ##### 出问题请联系 微信：zxx-wwj-zbl      



> ##### 非常需要你的出错案例markdown文本



[towxml源码及基于此的流式打字机源码讲解视频](https://www.bilibili.com/video/BV1hE3Fz8EVu/?spm_id_from=333.337.search-card.all.click&vd_source=0509c88161931dba2d7404110af17c0f)



### 一、介绍

用来解决流式数据太长，[towxml](https://github.com/sbfkcel/towxml) 重复渲染相同文本，导致越来越慢，越来越发烫卡顿的问题。在towmxl的基础上魔改了代码，通过自定义文字组件进行***局部渲染连续文本***、***样式布局稳定的节点进行复用,不再进行重复转化和渲染***两大核心思想，保证无论markdown文本再长，开始和结束都一样的丝滑,目前再安卓和苹果手机上测试了40分钟的长文本，前后速度一致



### 二、支持说明

目前这个代码支持在`原生微信小程序`、`uniapp vue3`、`taro`中使用



因为底层模块化的差异，`uniapp vue2`中使用会有问题，但并非不能使用，需要做一些处理。个人认为，现在使用uniapp vue2的应该很少了，所以我也没必要提供uniapp vue2的demo示例，如果你有需要，直接加我微信咨询



### 三、使用方式



将 wxcomponents 下载下来，放到微信小程序代码或者 uniapp 代码的指定文件夹，作为一个微信小程序组件使用，这和之前在项目中使用 towxml 是一样的，这里给大家写了一个uniapp和一个原生微信小程序的对话聊天使用示例,大家最好下载下来，模仿着写，里面的注释很详细，并有些最佳实践,如加载历史消息、滚动到底部、终止打印、停留页面终止自动滚动到底部、一键滚动到底部



[uniapp使用示例](https://github.com/zhouzxx/towxml-stream-typer-uniapp-example)



[原生微信小程序使用示例](https://github.com/zhouzxx/towxml-stream-typer-weChat-example)



***强烈建议大家参考这两个示例的任何一个进行使用，看使用文档可能费劲，还不如直接看示例代码，里面的注释很详细并有些使用说明***



### 四、详细说明



#####  1. 由于定制了 towxml 的代码，所以 towxml 组件的 prop 参数发生了改变



##### 2. 目前的属性有：



| 属性名      | 类型               | 作用                                                                                                          | 默认值 |

|-------------|-------------------|-------------------------------------------------------------------------------------------------------------- |-------|

| id          | String            | towxml组件实例id,请务必保证这个id的唯一性，因为每个towmxl组件都独有一份全局数据，以id作为key进行标识的，id重复会导致混乱|无默认值，需要你必填|

| speed       | Number            | 每多少秒打印一个字符，值越小打印越快，单位是毫秒，默认 10 毫秒打印一个字符                                          |10|

| openTyper   | Boolean           | 是否开启打字机，默认开启，如果你已经有完整 markdown 文本，想一次性渲染，可以设置为false                             |true|

| theme       | String            | 支持dark 和 light 两种，推荐light                                                                              |light|



##### 3.目前的事件：



`finish`：当打字机打印完毕，会发送 finish 事件，你可以通过该事件关闭滚动到底部的定时器等善后工作



`historyMessageFinish`: 每当一条历史消息加载完毕，就会回调这个事件



##### 4.目前你需要使用的全局函数（都从`towxml/globalCb.js`进行导入）



| 函数名                 | 参数                                                                          | 作用                                                                                                                                                                       |

|-----------------------|-------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------                                          |

| setMdText             |（id,text） 第一个参数是towxml组件的id属性，第二个参数是最新的总markdown文本        | 设置当前一次问答中最新的总markdwon文本，每次当你流式接口给你推送新的数据了，你就调一下这个函数，这样对应id的towxml组件才能感知到最新的总文本                                          |

| setStreamFinish       | (id)  towxml组件的id                                                           | 通知本次问答的流式接口已经结束，当本次回答所有markdown文本都已经全部拿到了，就调用这个函数，这样对应id的towxml就知道打印完当前这些文本，本次打印就完成了                               |

| stopImmediatelyCb     | (id)  towxml组件的id                                                           | 立即终止本次打印，比如用户想问新的问题不想看这个回答，就可以调用这个函数对当前对应id的正在打字的towmxl实例进行马上终止打字                                                           |                                                                                                                    

| scrollCb              | (e)   滚动事件参数                                                              | 你肯定会用scroll-view之类的组件包裹你的问答，请监听onScroll滚动事件，然后调用用这个函数，这样我才知道你滚动了屏幕，帮你做虚拟显示，节约内存，防止随着问答轮次增加而撑爆内存造成发烫闪退  |                

 setQueryTowxmlNodeFn  | 其实不是个函数，你要把赋值一个函数给setQueryTowxmlNodeFn.value                    | 帮我通过createSelectorQuery查询towxml组件的节点，一边拿到top值，来进行虚拟显示，使用方式参考上面列举的uniapp或者原生微信小程序使用示例                                              |   

                                                           



> `scrollCb` 和 `setQueryTowxmlNodeFn` 这两个函数说白了就是你如果需要虚拟显示的功能，就要在你的代码里配合我做些工作,这两个都必须配合好，虚拟显示效果才会生效



>当你的内容较多时，不断滚动屏幕时出现以下打印，说明虚拟显示生效了，否则没有生效，没有生效不会报错，但是占内存，微信小程序的内存占用到一定程度，会被微信杀死造成闪退



![image](https://github.com/user-attachments/assets/08481834-b254-4cf9-9f9f-34578d4f5350)



> `scrollCb`：因为我在组件内部是无法判断屏幕是否滚动，所以需要你在对应的scroll事件中回调这个函数，同时把事件参数传进来，我需要通过事件参数来判断滚动方向，已进行优先显示哪些内容



> `setQueryTowxmlNodeFn`： 由于微信小程序的限制，我在一个towxml实例中，是无法通过createSelectorQuery查询到其他towxml实例的对应dom节点，所以我希望你来帮我查，这样一次性查到所有的towmxl实例的top之后，我就可以进行虚拟显示了



> 具体怎么操作，参考 [uniapp使用示例](https://github.com/zhouzxx/towxml-stream-typer-uniapp-example) 或者 [原生微信小程序使用示例](https://github.com/zhouzxx/towxml-stream-typer-weChat-example) 使用示例，其实很简单的



##### 5.目前存在的bug

当内容很多时，安卓手机进行多次连续暴力高速的滚动，可能会出现闪退，模拟器和苹果手机不会，目前正在解决



##### 6.后续代码更新了，你就把这个towxml文件夹下载下来，替换你项目中的towmxl文件夹就行了。当然如果添加了某些新功能，也可能会在demo中写一些代码配合调用。