问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

微信小程序怎么渲染 markdown？

头像
changli
    1.2k692267

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

    前端小程序
    阅读 3.6k
    avatarAI BotBETA

    要在微信小程序中渲染 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 内容的函数 getMarkdownContent
function 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 渲染库" 来寻找可用的库。

    3 个回答
    得票最新
    头像
    陟上晴明
      23.4k156591
      ✓ 已被采纳

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

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

      头像
      changli
        1.2k692267

        可以用 rich-text

        头像
        平侠
          2
          新手上路，请多包涵

          最近在对接 coze 的 API，验证了两种可行方案渲染 markdown。

          使用 Towxml 类库

          功能很全，详见：【小程序制作之旅】完美支持 Markdown 看这一篇就够了，超详细教程 。但实践时遇到一个小问题，直接渲染已有 Markdown 是正常的，真机运行时流式输出会出现布局错位，尝试解决无果。

          将 Markdown 转为 HTML ，用 rich-text 渲染

          转 HTML 有两个类库可按需选择：

          使用 marked

          marked 这个库比较小，处理 AI 输出的内容足够用了，很适合小程序使用。

          但 npm install marked 后 构建 npm 会出错。

          image.png

          最后用这种方法解决：将 node_modules/marked/marked.umd.js 复制到应用根目录的 lib/marked 目录下，然后参照 https://marked.js.org/using_advanced#instance 在组件引用它就可以了。

          import { marked } from '../../lib/marked/marked.umd';
const html = marked.parse('**hello**');

          使用 markdown-it

          构建 npm 能成功，但引入后运行时会报错：

          image.png

          最终用和引入 marked 同样的方法解决：将 node_modules/markdown-it/dist/markdown-it.js 复制到应用根目录的 lib 目录下，然后在组件引用。

          import markdownit from '../../lib/markdown-it';
const md = markdownit()
const result = md.render('**hello**');
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题