Uni App Markdown 渲染器快速开始

@fluxdown/uni-app 为 Uni App x 的 Vapor 项目提供 Markdown 组件。解析、语法修复和平滑输出基于 Fluxdown Core，界面使用 .uvue 组件。

准备项目

使用 HBuilderX 5.33 或更高版本创建 Uni App x 项目，在 manifest.json 中开启 Vapor：

{
  "uni-app-x": {
    "vapor": true,
    "styleIsolationVersion": "2",
    "vapor-default-script-lang": "ts"
  }
}

App 使用 Vapor 渲染；Web 使用 Uni App x 官方的 Vue 渲染路径。运行环境与平台版本要求见 AppVapor 文档。

在 Linux 上使用 pnpm 时，先在 pnpm-workspace.yaml 中添加以下配置，让 Uni App 编译器的 GNU 原生依赖参与安装：

pnpm-workspace.yaml

supportedArchitectures:
  libc:
    - current
    - gnu

在项目目录安装组件与构建依赖：

pnpm add @fluxdown/uni-app
pnpm add -D @babel/core@^7.29.7 @babel/plugin-transform-unicode-property-regex@^7.29.7 @rollup/plugin-commonjs

构建配置

在项目根目录配置 vite.config.js。commonjs 在 App 构建时处理解析依赖中的 CommonJS 模块，H5 使用 Uni App 已有的转换；Unicode 正则转换让这些依赖在 App 的 JavaScript 引擎中运行。

inlineDynamicImports 将按需模块并入同一个文件，适配 App 的单文件构建；同时关闭与它互斥的 manualChunks。已有配置时，将这些处理步骤合并到原来的 plugins 中。

vite.config.js

import { transformSync } from '@babel/core';
import unicodeProperty from '@babel/plugin-transform-unicode-property-regex';
import uni from '@dcloudio/vite-plugin-uni';
import commonjs from '@rollup/plugin-commonjs';

const staticRegExp = ({ types }) => ({
  visitor: {
    NewExpression(path) {
      if (
        !path.get('callee').isIdentifier({ name: 'RegExp' }) ||
        path.scope.getBinding('RegExp')
      ) {
        return;
      }

      const [pattern, flags] = path
        .get('arguments')
        .map((argument) => argument.evaluate());

      if (!pattern?.confident || !flags?.confident) {
        return;
      }

      if (
        typeof pattern.value === 'string' &&
        typeof flags.value === 'string' &&
        /\\[pP]\{/.test(pattern.value)
      ) {
        path.replaceWith(types.regExpLiteral(pattern.value, flags.value));
      }
    },
  },
});

export default {
  plugins: [
    {
      name: 'inline-dynamic-imports',
      outputOptions(options) {
        return {
          ...options,
          manualChunks: undefined,
          inlineDynamicImports: true,
        };
      },
    },
    uni.default(),
    ...(process.env.UNI_PLATFORM === 'h5' ? [] : [commonjs()]),
    {
      name: 'unicode-properties',
      enforce: 'pre',
      transform(code, id) {
        if (!id.endsWith('.js') || !/\\[pP]\{/.test(code)) {
          return null;
        }

        return transformSync(code, {
          configFile: false,
          babelrc: false,
          plugins: [staticRegExp, unicodeProperty],
          sourceMaps: true,
          filename: id,
        });
      },
    },
  ],
};

@dcloudio/vite-plugin-uni 由 Uni App 工具链提供，版本应与项目的 Uni App 编译器保持一致。

展示 Markdown

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/uni-app';

const text = '# Hello Fluxdown\n\nMarkdown for **uni-app**.';
</script>

<template>
  <Fluxdown :text="text" />
</template>

样式随 .uvue 组件一起编译。通过 theme 调整颜色、字体与间距，见样式指南。

接收流式内容

把目前收到的完整文本传入 text。生成期间设置 streaming，结束、取消或失败时改为 false：

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/uni-app';

type MessageProps = {
  text: string;
  pending: boolean;
};

const props = defineProps<MessageProps>();
</script>

<template>
  <Fluxdown :text="props.text" :streaming="props.pending" />
</template>

streaming 默认开启末尾语法修复、平滑输出和 scale 效果。保留网络片段节奏时，使用 { smooth: false, effect: 'chunk' }。更多用法见流式内容。

选择组件

组件	导入入口	默认能力
`Fluxdown`	`@fluxdown/uni-app` 或 `@fluxdown/uni-app/full`	基础 Markdown、代码高亮、公式、图表、CJK 和 emoji 短码。
`FluxdownLite`	`@fluxdown/uni-app/lite`	基础 Markdown 与流式效果，代码显示原文。
`FluxdownRaw`	`@fluxdown/uni-app/raw`	必须传入 `plugins`，自行组合渲染能力。

完整清单见插件矩阵，全部参数见自定义配置。

横向演示可以同时查看各渲染库的静态与流式表现；Playground可以选择 Uni App 并输入自己的内容。

#Uni App Markdown 渲染器快速开始

#准备项目

#构建配置

#展示 Markdown