微信小程序对接SSE接口，markdown格式渲染为wxml文本

一、对接背景与前提

需求场景：公司项目对接ai助手，需实现分段返回结果的 “打字机效果”，服务端 SSE 接口方案。
版本要求：小程序基本库版本需在2.20.2 以上。微信官方相关文档

二、SSE核心实现代码

1. 基础 SSE 请求配置

通过wx.request开启分块接收，关键在于设置enableChunked: true，并监听数据分片回调。

// 1. 发起SSE请求，开启分块接收
const requestTask = wx.request({
　　url: `xxxxxxxx`, // 实际SSE接口地址
　　enableChunked: true, // 必须开启，支持分块接收数据
　　method: "POST",
　　header: {
　　　　"Content-Type": "application/json;charset=UTF-8",
　　　　Accept: "text/event-stream"
　　},
　　responseType: "text",
　　data: JSON.stringify(params),
　　success: (res) => {
　　　　console.log("响应:", res);
　　}
})

// 2. 定义数据处理监听函数
const listener = res => {
  // data为服务端返回的分片数据，需进一步转换处理
}

// 3. 监听服务端分片数据
requestTask.onChunkReceived(listener)

// 4. 移除监听（需传入与监听时相同的函数对象）
// 请求正常结束后移除或业务逻辑完成后移除
requestTask.offChunkReceived(listener)

2. ArrayBuffer 转字符串工具函数

服务端返回数据固定为ArrayBuffer类型，需通过以下函数转换为字符串：

// 处理 ArrayBuffer 数据
if (res.data instanceof ArrayBuffer) {
    // 将 ArrayBuffer 转换为字符串（兼容微信小程序环境）
    let chunkStr = "";
    try {
        // 尝试使用 TextDecoder（部分环境支持）
        const decoder = new TextDecoder("utf-8");
        chunkStr = decoder.decode(res.data);
    } catch (e) {
        // 兼容处理：使用微信小程序内置方法
        const uint8Array = new Uint8Array(res.data);
        let tempStr = "";
        for (let i = 0; i < uint8Array.length; i++) {
            tempStr += String.fromCharCode(uint8Array[i]);
        }
        chunkStr = tempStr;
    }

    // 解析 SSE 格式的数据
    const lines = chunkStr.split("\n");

    lines.forEach((line) => {
        // 处理数据行
        if (line.startsWith("data:")) {
        const dataPart = line.substring(5).trim();
        if (dataPart) {
            try {
                const parsedData = JSON.parse(dataPart);
            } catch (e) {
                console.error("解析JSON失败:", e);
                }
            }
        }
    });
}

3. SSE 连接关闭问题

关键特性：SSE 连接需由客户端主动断开，否则会持续占用资源。
操作方法：使用完毕后，调用requestTask.abort()关闭连接：

// 断开SSE连接
requestTask.abort()

三、towxml的使用，在微信小程序中快速将markdown格式渲染为wxml文本

Towxml概述

towxml3.0 支持以下功能：

● echarts图表，默认禁用，需自行构建以开启此功能
● LaTeX数学公式，默认禁用，需搭建解析服务并自行构建以开启此功能
● yuml图表，默认禁用，需要搭建解析服务并自行构建以开启此功能
● highlight代码高亮，默认开启（默认仅开启bash、javascript、json、python、html、css、php、scss、shell），其它语言高亮支持需自行构建以开启

安装下载 Towxml

1.先使用命令克隆到本地中（使用git进行安装）

git clone https://github.com/sbfkcel/towxml.git

2.对克隆的下的文件进行依赖安装和npm重构

npm install  # 安装依赖
npm run build # npm 重构

3.构建完成后，会在当前的目录中生成一个dist目录（按照提示找到对应的文件夹），然后将其拷贝到微信小程序项目中（根下），重命名为towxml即可。

4.在小程序中使用 towxml

引入towxml库到 App.js中

// app.js
App({
  towxml: require('./towxml/index'),
  onLaunch() {
   
  },
})

在具体页面的配置文件中引入towxml组件。注意：这里的组件路径根据自己的页面去找相对路径。
```
{
    "usingComponents": {
        "towxml": "../../towxml/towxml"
    }
}
```

在wxml页面中使用towxml组件

<view class="content-info">
  <towxml nodes="{{article}}"/>
</view>

在具体页面的js中对需要进行markdown转换wxml的业务进行处理解析，其实就是调用app.towxml(str,type,options)函数：
其中的options选项都是可选的，可以一个都不加，选项说明如下：
app.towxml(str,type,options)有三个参数
● str 必选，html或markdown字符串
● type 必选，需要解析的内容类型html或markdown
● options [object] 可选，可以该选项设置主题、绑定事件、设置base等
○ base [string] 可选，用于指定静态相对资源的base路径。例如：https://xx.com/static/
○ theme [string] 可选，默认:light，用于指定主题’light’或’dark’，或其它自定义
○ events [object] 可选，用于为元素绑定事件。key为事件名称，value则必须为一个函数。例如:{tap:e=>{console.log(e)}}
```
//获取应用实例
const app = getApp();
Page({
  data: {
    isLoading: true,// 判断是否尚在加载中
    article: {
　　   //内容数据
    } 
  },
  onLoad: function () {
    let result = app.towxml(`# Markdown`,'markdown',{
      base:'https://xxx.com',// 相对资源的base路径
      theme:'dark',// 主题，默认`light`
      events:{
      // 为元素绑定的事件方法
        tap:(e)=>{
          console.log('tap',e);
        }
      }
    });
    // 更新解析数据
    this.setData({
      article:result,
      isLoading: false
    });

  }
})
```

参考文献：

微信小程序对接SSE接口记录_微信小程序 sse-CSDN博客
towxml的使用，在微信小程序中快速将markdown格式渲染为wxml文本-阿里云开发者社区

posted @ 2026-02-10 11:09 Stitchhhhh 阅读(81) 评论(0) 收藏举报

刷新页面返回顶部

Stitchhhhh