{"id":27232854,"url":"https://github.com/zhouzxx/towxml-stream-typer","last_synced_at":"2025-07-04T02:34:09.515Z","repository":{"id":286922498,"uuid":"962982372","full_name":"zhouzxx/towxml-stream-typer","owner":"zhouzxx","description":"towxml渲染流式数据，避免重复渲染卡顿","archived":false,"fork":false,"pushed_at":"2025-06-30T01:45:35.000Z","size":28922,"stargazers_count":18,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-30T02:37:34.960Z","etag":null,"topics":["ai","markdown","stream-data","towxml","typer","we-chat"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhouzxx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-09T01:20:42.000Z","updated_at":"2025-06-30T01:45:38.000Z","dependencies_parsed_at":"2025-04-15T13:56:27.883Z","dependency_job_id":"ca0d738f-0811-4ecc-a621-47f968a306c6","html_url":"https://github.com/zhouzxx/towxml-stream-typer","commit_stats":null,"previous_names":["zhouzxx/towxml-steam-typer"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/zhouzxx/towxml-stream-typer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhouzxx%2Ftowxml-stream-typer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhouzxx%2Ftowxml-stream-typer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhouzxx%2Ftowxml-stream-typer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhouzxx%2Ftowxml-stream-typer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhouzxx","download_url":"https://codeload.github.com/zhouzxx/towxml-stream-typer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhouzxx%2Ftowxml-stream-typer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263434311,"owners_count":23465936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","markdown","stream-data","towxml","typer","we-chat"],"created_at":"2025-04-10T14:10:13.430Z","updated_at":"2025-07-04T02:34:09.507Z","avatar_url":"https://github.com/zhouzxx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[演示图片 点击查看效果（由于网络问题，gif动图可能不一定能良好地展示，你直接下载示例在自己电脑上跑更直接）](./towxml_typer.gif)\n\n# towxml-steam-typer\n\u003e ##### 代码刚写完没多久，还在持续地完善中，所以当前你下载的版本一定不是稳定版，记得定时更新下代码，由于markdown语法的灵活复杂性，某些情况下难免会出问题。\n\n\u003e ##### 出问题请联系 微信：zxx-wwj-zbl \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\n\u003e ##### 非常需要你的出错案例markdown文本\n\n[towxml源码及基于此的流式打字机源码讲解视频](https://www.bilibili.com/video/BV1hE3Fz8EVu/?spm_id_from=333.337.search-card.all.click\u0026vd_source=0509c88161931dba2d7404110af17c0f)\n\n### 一、介绍\n用来解决流式数据太长，[towxml](https://github.com/sbfkcel/towxml) 重复渲染相同文本，导致越来越慢，越来越发烫卡顿的问题。在towmxl的基础上魔改了代码，通过自定义文字组件进行***局部渲染连续文本***、***样式布局稳定的节点进行复用,不再进行重复转化和渲染***两大核心思想，保证无论markdown文本再长，开始和结束都一样的丝滑,目前再安卓和苹果手机上测试了40分钟的长文本，前后速度一致\n\n### 二、支持说明\n目前这个代码支持在`原生微信小程序`、`uniapp vue3`、`taro`中使用\n\n因为底层模块化的差异，`uniapp vue2`中使用会有问题，但并非不能使用，需要做一些处理。个人认为，现在使用uniapp vue2的应该很少了，所以我也没必要提供uniapp vue2的demo示例，如果你有需要，直接加我微信咨询\n\n### 三、使用方式\n\n将 wxcomponents 下载下来，放到微信小程序代码或者 uniapp 代码的指定文件夹，作为一个微信小程序组件使用，这和之前在项目中使用 towxml 是一样的，这里给大家写了一个uniapp和一个原生微信小程序的对话聊天使用示例,大家最好下载下来，模仿着写，里面的注释很详细，并有些最佳实践,如加载历史消息、滚动到底部、终止打印、停留页面终止自动滚动到底部、一键滚动到底部\n\n[uniapp使用示例](https://github.com/zhouzxx/towxml-stream-typer-uniapp-example)\n\n[原生微信小程序使用示例](https://github.com/zhouzxx/towxml-stream-typer-weChat-example)\n\n***强烈建议大家参考这两个示例的任何一个进行使用，看使用文档可能费劲，还不如直接看示例代码，里面的注释很详细并有些使用说明***\n\n\n### 四、详细说明\n\n#####  1. 由于定制了 towxml 的代码，所以 towxml 组件的 prop 参数发生了改变\n\n##### 2. 目前的属性有：\n\n| 属性名      | 类型               | 作用                                                                                                          | 默认值 |\n|-------------|-------------------|-------------------------------------------------------------------------------------------------------------- |-------|\n| id          | String            | towxml组件实例id,请务必保证这个id的唯一性，因为每个towmxl组件都独有一份全局数据，以id作为key进行标识的，id重复会导致混乱|无默认值，需要你必填|\n| speed       | Number            | 每多少秒打印一个字符，值越小打印越快，单位是毫秒，默认 10 毫秒打印一个字符                                          |10|\n| openTyper   | Boolean           | 是否开启打字机，默认开启，如果你已经有完整 markdown 文本，想一次性渲染，可以设置为false                             |true|\n| theme       | String            | 支持dark 和 light 两种，推荐light                                                                              |light|\n\n\n##### 3.目前的事件：\n\n`finish`：当打字机打印完毕，会发送 finish 事件，你可以通过该事件关闭滚动到底部的定时器等善后工作\n\n`historyMessageFinish`: 每当一条历史消息加载完毕，就会回调这个事件\n\n##### 4.目前你需要使用的全局函数（都从`towxml/globalCb.js`进行导入）\n\n| 函数名                 | 参数                                                                          | 作用                                                                                                                                                                       |\n|-----------------------|-------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------                                          |\n| setMdText             |（id,text） 第一个参数是towxml组件的id属性，第二个参数是最新的总markdown文本        | 设置当前一次问答中最新的总markdwon文本，每次当你流式接口给你推送新的数据了，你就调一下这个函数，这样对应id的towxml组件才能感知到最新的总文本                                          |\n| setStreamFinish       | (id)  towxml组件的id                                                           | 通知本次问答的流式接口已经结束，当本次回答所有markdown文本都已经全部拿到了，就调用这个函数，这样对应id的towxml就知道打印完当前这些文本，本次打印就完成了                               |\n| stopImmediatelyCb     | (id)  towxml组件的id                                                           | 立即终止本次打印，比如用户想问新的问题不想看这个回答，就可以调用这个函数对当前对应id的正在打字的towmxl实例进行马上终止打字                                                           |                                                                                                                    \n| scrollCb              | (e)   滚动事件参数                                                              | 你肯定会用scroll-view之类的组件包裹你的问答，请监听onScroll滚动事件，然后调用用这个函数，这样我才知道你滚动了屏幕，帮你做虚拟显示，节约内存，防止随着问答轮次增加而撑爆内存造成发烫闪退  |                \n setQueryTowxmlNodeFn  | 其实不是个函数，你要把赋值一个函数给setQueryTowxmlNodeFn.value                    | 帮我通过createSelectorQuery查询towxml组件的节点，一边拿到top值，来进行虚拟显示，使用方式参考上面列举的uniapp或者原生微信小程序使用示例                                              |   \n                                                           \n\n\u003e `scrollCb` 和 `setQueryTowxmlNodeFn` 这两个函数说白了就是你如果需要虚拟显示的功能，就要在你的代码里配合我做些工作,这两个都必须配合好，虚拟显示效果才会生效\n\n\u003e当你的内容较多时，不断滚动屏幕时出现以下打印，说明虚拟显示生效了，否则没有生效，没有生效不会报错，但是占内存，微信小程序的内存占用到一定程度，会被微信杀死造成闪退\n\n![image](https://github.com/user-attachments/assets/08481834-b254-4cf9-9f9f-34578d4f5350)\n\n\n\u003e `scrollCb`：因为我在组件内部是无法判断屏幕是否滚动，所以需要你在对应的scroll事件中回调这个函数，同时把事件参数传进来，我需要通过事件参数来判断滚动方向，已进行优先显示哪些内容\n\n\u003e `setQueryTowxmlNodeFn`： 由于微信小程序的限制，我在一个towxml实例中，是无法通过createSelectorQuery查询到其他towxml实例的对应dom节点，所以我希望你来帮我查，这样一次性查到所有的towmxl实例的top之后，我就可以进行虚拟显示了\n\n\u003e 具体怎么操作，参考 [uniapp使用示例](https://github.com/zhouzxx/towxml-stream-typer-uniapp-example) 或者 [原生微信小程序使用示例](https://github.com/zhouzxx/towxml-stream-typer-weChat-example) 使用示例，其实很简单的\n\n##### 5.目前存在的bug\n当内容很多时，安卓手机进行多次连续暴力高速的滚动，可能会出现闪退，模拟器和苹果手机不会，目前正在解决\n\n##### 6.后续代码更新了，你就把这个towxml文件夹下载下来，替换你项目中的towmxl文件夹就行了。当然如果添加了某些新功能，也可能会在demo中写一些代码配合调用。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhouzxx%2Ftowxml-stream-typer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhouzxx%2Ftowxml-stream-typer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhouzxx%2Ftowxml-stream-typer/lists"}