今天我们要讲到含金量非常高的技术了，将 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 组件进行渲染。希望这篇文章能帮助您更好地理解和应用这些技术，实现功能丰富的文章展示页面。