Markdown

Markdown越来越玩的纯熟，在小程序架构稳定之后，剩下的就是Markdown内容的编辑，我已经不满足于基础的标题和段落，我还会根据适当的场景使用。我必须把常用的Markdown介绍一下，感觉其设计真是奇妙，比如在一行中用三个以上的星号、减号、底线来建立一个分割线，行内不能有其它东西。也可以在星号或减号中间插入空格。这样就是一条分割线。当你完全掌握之后，就会发现我们还可以进行扩展，比如我后面的跳转公众号文章，跳转小程序。 我们先来快速浏览一下除了标题和段落之外不常用但重要的Markdown语法。不感兴趣可以跳过。 *斜体文本* _斜体文本_ **粗体文本** __粗体文本__ ***粗斜体文本*** ___粗斜体文本___ # 分割线 *** * * * ***** - - - --------- ~~删除线~~ <u>下划线文本</u> [^脚注，要注明的文本] # 无序列表 * 第一项 + 第二项 - 第三项 # 有序列表 1. 第一项 2. 第二项 3. 第三项 # 列表嵌套需要在子列表中的选项签名添加两个或四个空格即可。 1. 第一项： - 第一项嵌套的第一个元素 - 第一项嵌套的第二个元素 2. 第二项： - 第二项嵌套的第一个元素 - 第二项嵌套的第二个元素 # 区块 > 最外层 > > 第一层嵌套 > > > 第二层嵌套 # 列表中使用区块，如果列表中要使用区块，请在>前添加四个空格即可。 * 第一项 > 菜鸟教程 > 学的不仅是技术更是梦想 * 第二项 # 链接 [链接名称](链接地址) <链接地址> # 图片显示     # 只设置宽，会按比例进行缩放  # 使用 html <img>标签。 <img src="https://xxx.com/x.png" width="50%"> # 制作表格使用|来分割不同的单元格，可以使用-来分割表头和其它行。 | 表头 | 表头 | | ---- | ---- | | 单元格 | 单元格 | | 单元格 | 单元格 | # 设置表格的对齐方式使用如下符号： -: 设置内容和标题栏居右对齐。 :- 设置内容和标题栏居左对齐。 :-: 设置内容和标题栏居中对齐。 # Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符： **文本加粗** \*\* 正常显示星号 \*\* 使用 KaTex 或 MathJax 来渲染数学表达式。 Mardown语法扩展 当然我还扩展了一些内容，比如链接，我在小程序中支持跳转到公众号文章，以及跳转到小程序。具体的实现就是通过前缀。 ...

在学习了微信小程序之后，我使用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内容。 ...