使用 towxml 组件渲染 Markdown 内容

今天我们要讲到含金量非常高的技术了，将 Markdown 内容渲染为小程序页面，这是豆子碎片文章页面。

在微信小程序中，渲染 Markdown 内容可以使文章展示更加美观和统一。本文将通过一个完整的示例，演示如何从服务器下载 Markdown 内容，并使用 towxml 组件在小程序端渲染为页面。

目录

  1. 需求分析
  2. 页面布局
  3. 下载 Markdown 内容
  4. 使用 towxml 渲染 Markdown
  5. 代码与预览效果对比

1. 需求分析

在本次实战中，豆子碎片文章页面需要实现以下功能：

  • 从服务器下载 Markdown 内容
  • 使用 towxml 组件将 Markdown 内容渲染为页面

2. 页面布局

豆子碎片文章页面需要包含以下几个部分：

  • 标题区域，用于展示文章标题
  • 内容区域，用于展示渲染后的 Markdown 内容

示例代码

{
  "pages": ["pages/index/index", "pages/article/article"],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "豆子碎片文章"
  }
}

<view class="container">
  <view class="article-title">{{title}}</view>
  <import src="/towxml/entry.wxml" />
  <template is="entry" data="{{...articleContent}}" />
</view>

.container {
  padding: 20px;
}
.article-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

3. 下载 Markdown 内容

通过微信小程序的wx.request方法，从服务器下载 Markdown 内容。

示例代码

const towxml = require("/towxml/main"); // 引入towxml库

Page({
  data: {
    title: "",
    articleContent: {},
  },
  onLoad: function (options) {
    this.loadArticle(options.id);
  },
  loadArticle: function (id) {
    const url = `https://your-server-url.com/articles/${id}.md`;
    wx.request({
      url: url,
      success: (res) => {
        const markdown = res.data;
        this.parseMarkdown(markdown);
      },
    });
  },
  parseMarkdown: function (markdown) {
    const data = towxml.toJson(markdown, "markdown"); // 解析Markdown内容
    this.setData({
      title: data.title,
      articleContent: data,
    });
  },
});

4. 使用 towxml 渲染 Markdown

通过 towxml 组件，将下载并解析的 Markdown 内容渲染为页面。

示例代码

const towxml = require("/towxml/main"); // 引入towxml库

Page({
  data: {
    title: "",
    articleContent: {},
  },
  onLoad: function (options) {
    this.loadArticle(options.id);
  },
  loadArticle: function (id) {
    const url = `https://your-server-url.com/articles/${id}.md`;
    wx.request({
      url: url,
      success: (res) => {
        const markdown = res.data;
        this.parseMarkdown(markdown);
      },
    });
  },
  parseMarkdown: function (markdown) {
    const data = towxml.toJson(markdown, "markdown"); // 解析Markdown内容
    this.setData({
      title: data.title,
      articleContent: data,
    });
  },
});

5. 代码与预览效果对比

代码

{
  "pages": ["pages/index/index", "pages/article/article"],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "豆子碎片文章"
  }
}

<view class="container">
  <view class="article-title">{{title}}</view>
  <import src="/towxml/entry.wxml" />
  <template is="entry" data="{{...articleContent}}" />
</view>

.container {
  padding: 20px;
}
.article-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

const towxml = require("/towxml/main"); // 引入towxml库

Page({
  data: {
    title: "",
    articleContent: {},
  },
  onLoad: function (options) {
    this.loadArticle(options.id);
  },
  loadArticle: function (id) {
    const url = `https://your-server-url.com/articles/${id}.md`;
    wx.request({
      url: url,
      success: (res) => {
        const markdown = res.data;
        this.parseMarkdown(markdown);
      },
    });
  },
  parseMarkdown: function (markdown) {
    const data = towxml.toJson(markdown, "markdown"); // 解析Markdown内容
    this.setData({
      title: data.title,
      articleContent: data,
    });
  },
});

预览效果

  1. 打开微信开发者工具，创建一个新项目并将上述代码粘贴到相应文件中。
  2. 运行小程序，进入文章页面，页面会从服务器下载 Markdown 内容并显示解析后的文章。

通过以上示例，我们学习了如何在微信小程序中从服务器下载 Markdown 内容，并使用 towxml 组件进行渲染。希望这篇文章能帮助您更好地理解和应用这些技术，实现功能丰富的文章展示页面。