前端 - 微信小程序怎么渲染 markdown？

Question

目前使用 markdown 编辑的文章通过 next.js 在构建时进行了预渲染,生成了 html 文件,如果要让小程序也能读取文章,只能先获取 markdown 内容,然后转化为 wxml,但是小程序不支持动态添加 wxml,这个应该怎么渲染?

Answer 1

可以用 rich-text

Answer 2

既然你已经已经有用 nextjs 做了一个项目了。那么小程序端可以直接用 webview 展示你的 nextjs 项目哇。

如果你不想要用 webview 那么就需要额外处理 markdown 内容转换为 html 内容，然后用 rich-text 来渲染你的文章内容，但是这样就需要你自己在写一套富文本样式了。

Answer 3

要在微信小程序中渲染 Markdown，你不能直接使用 HTML 或 WXML，因为小程序不支持动态解析和渲染 HTML/WXML。不过，你可以通过以下步骤在小程序中渲染 Markdown：

1. 使用 Markdown 解析库：找一个适合 JavaScript 的 Markdown 解析库，比如 marked。这个库可以将 Markdown 文本转换成 HTML。
2. 转换 Markdown 到自定义组件：由于小程序不支持直接渲染 HTML，你需要将转换后的 HTML 转换成小程序可以理解的自定义组件结构。这一步需要手动编写转换逻辑，或者寻找已有的转换工具。
3. 渲染自定义组件：使用小程序的 wx:for 指令来动态渲染转换后的自定义组件。

这里是一个简单的示例代码：

// 引入 marked 库const marked = require('marked');// 假设你已经有了一个获取 Markdown 内容的函数 getMarkdownContentfunction getMarkdownContent() {  return new Promise((resolve, reject) => {    // 这里是获取 Markdown 内容的逻辑    // 例如从网络请求获取，或从本地文件读取等    // 假设获取到的内容是 markdownString    const markdownString = '# Hello, Markdown!\nThis is a **test**.';    resolve(markdownString);  });}// 转换 Markdown 为自定义组件结构function convertToWxml(markdownString) {  // 使用 marked 将 Markdown 转为 HTML  const html = marked(markdownString);    // 这里需要编写转换逻辑，将 HTML 转为小程序自定义组件结构  // 例如，将 `<p>` 标签转为 `<text>` 组件，`<h1>` 标签转为 `<view class="h1">` 等  // 这里只是一个简单的示例，实际转换逻辑可能更复杂  const wxml = html.replace(/<p>/g, '<text>').replace(/<\/p>/g, '</text>');    return wxml;}// 小程序页面逻辑Page({  data: {    wxmlContent: ''  },  onLoad: function() {    getMarkdownContent().then(markdownString => {      const wxmlContent = convertToWxml(markdownString);      this.setData({ wxmlContent });    });  }});

在小程序的 WXML 文件中，你可以这样使用转换后的内容：

<view>{{wxmlContent}}</view>

请注意，上述示例代码仅作为一个基本的实现思路，转换 Markdown 到小程序自定义组件结构的逻辑可能需要根据实际情况进行调整和完善。

另外，还有可能存在第三方库或工具能够直接帮助你在小程序中渲染 Markdown，你可以通过搜索找到它们，以节省自己编写转换逻辑的工作量。例如，你可以搜索 "微信小程序 Markdown 渲染库" 来寻找可用的库。