Markdown 进化论：从小程序文章列表到游戏关卡到时间轴作品集再到项目模块集市

Wed, 03 Sep 2025 12:40:16 +0800

Markdown越来越玩的纯熟，在小程序架构稳定之后，剩下的就是Markdown内容的编辑，我已经不满足于基础的标题和段落，我还会根据适当的场景使用。我必须把常用的Markdown介绍一下，感觉其设计真是奇妙，比如在一行中用三个以上的星号、减号、底线来建立一个分割线，行内不能有其它东西。也可以在星号或减号中间插入空格。这样就是一条分割线。当你完全掌握之后，就会发现我们还可以进行扩展，比如我后面的跳转公众号文章，跳转小程序。

我们先来快速浏览一下除了标题和段落之外不常用但重要的Markdown语法。不感兴趣可以跳过。

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
# 分割线
***
* * *
*****
- - -
---------
~~删除线~~
<u>下划线文本</u>
[^脚注，要注明的文本]
# 无序列表
* 第一项
+ 第二项
- 第三项
# 有序列表
1. 第一项
2. 第二项
3. 第三项
# 列表嵌套需要在子列表中的选项签名添加两个或四个空格即可。
1. 第一项：
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
2. 第二项：
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
# 区块
> 最外层
> > 第一层嵌套
> > > 第二层嵌套
# 列表中使用区块，如果列表中要使用区块，请在>前添加四个空格即可。
* 第一项
> 菜鸟教程
> 学的不仅是技术更是梦想
* 第二项
# 链接
[链接名称](链接地址)
<链接地址>
# 图片显示
![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")
![alt 属性文本](图片地址居中#pic_center)
![alt 属性文本](图片地址宽和高 =400x200)
# 只设置宽，会按比例进行缩放
![alt 属性文本](图片地址 =400x)
# 使用 html <img>标签。
<img src="https://xxx.com/x.png" width="50%">
# 制作表格使用|来分割不同的单元格，可以使用-来分割表头和其它行。
| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
# 设置表格的对齐方式使用如下符号：
-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。
# Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：
**文本加粗**
\*\* 正常显示星号 \*\*
使用 KaTex 或 MathJax 来渲染数学表达式。

Mardown语法扩展

当然我还扩展了一些内容，比如链接，我在小程序中支持跳转到公众号文章，以及跳转到小程序。具体的实现就是通过前缀。

万物皆可 Markdown：小程序动态内容渲染通用架构设计

Tue, 03 Jun 2025 12:40:16 +0800

在学习了微信小程序之后，我使用wxml页面可以做出唐诗的内容了。结合wxss，我可以定义好看的布局。在小程序需要备案时，因为唐诗需要资质，而我个人无法满足这些条件，所以我需要开发新的项目。恰好最近在为我的技术笔记发愁。我希望有一个可以展示我笔记内容的工具。

我的最初想法非常简单：
1，可以更新文章内容而不需要升级小程序。
2，需要在小程序端进行展示，并且需要美观。
3，能够根据标题或者关键字进行搜索文章内容。

经过一番研究后，我决定小程序使用原生开发，界面 UI 使用 WeUI，内容渲染使用Markdown。

小程序页面架构是列表+详情。列表作为首页，首页页面非常简单，一个标题和描述，用来解释小程序干什么？一个搜索框用来搜索内容，三个快捷按钮用于快速查找内容。这个也是为了小程序审核，避免成为资讯类主题。

在完成之后，我发现这套架构可以通用，用来渲染动态内容。像列表页面以及WEUI使用，熟悉前端的非常容易理解实现。下面是一些核心介绍，主要介绍Markdown的渲染实现。

在小程序中，无法直接展示 Markdown 数据，我们需要将 Markdown 转换为 WXML，网上的大神很多，有多款 Markdown 转 WXML 库，我使用的是 TOWXML 库。我使用Markdown主要是因为更新内容不用升级小程序，这是动态渲染的最大优点。当然它还有其它一些优势，比如容易编辑，支持数学公式，布局美观等。

下面是Markdown具体实现，不感兴趣可以跳过。可以看技术下面的架构思考。
1，按照 towxml 库的说明文档，我们将编译后的 towxml 复制到我们的项目中，然后在 app.js 文件中引入这个组件。

App({
towxml: require('./towxml/index'),

2，按照首页的步骤，我们添加文章详情页面。

"pages/article/index"

在 index.wxml 文件中，我们添加页面布局，这个很简单，显示渲染后的内容即可。

<!--pages/article/index.wxml-->
<view class="page">
<!--使用towxml-->
<towxml nodes="{{article}}" />
</view>

3，注意，我们还需要在 index.json 中添加组件引入。

{
"usingComponents": {
"towxml": "../../towxml/towxml"
}
}

4，在 js 文件中，我们需要调用 Markdown 数据。

onLoad(options) {
const _ts = this;
wx.showLoading({
title: '加载中',
})
httpGet('/artd', {
uuid: options.guid,
}).then((res) => {
const result = res.data;
if (result.code == 1) {
let content = result.data;
let obj = app.towxml(content, 'markdown', {
theme: 'light',
events: {
tap: (e) => {
console.log('tap', e);
}
}
});
_ts.setData({
article: obj,
});
wx.hideLoading({
success: (res) => { },
})
} else {
wx.hideLoading()
}
}).catch((err) => {
console.log(err);
wx.hideLoading()
wx.showToast({
title: '网络异常请重试',
})
})
},

我们在 onLoad 中加载函数，这样页面启动就会自动网络请求，然后渲染 Markdown 数据。在请求数据时，我们注意到 guid，这个参数是上一个页面即首页，点击文章列表项带过来的数据。你也可以使用其它参数，它能唯一代表从服务器拉取哪篇文章的Markdown内容。

Markdown on 豆子技术站

Markdown 进化论：从小程序文章列表到游戏关卡到时间轴作品集再到项目模块集市

Mardown语法扩展

万物皆可 Markdown：小程序动态内容渲染通用架构设计