微信小程序实现动态渲染Markdown

零、需求

十几个图文编排的介绍文章，每个页面的结构、内容都不相同，
因此没有办法通过WXML代码把文章结构固定下来。

因此笔者想到的解决方案包括：

全部转成长截图，好处是代码超级简单，坏处是：即使只改一个字，也要重新生成、上传截图
全部用原生小程序硬编码出来，每个介绍文章写一个组件。虽然后期修改灵活，但过于低效且麻烦。

考虑到对于图文编排来说，markdown的效率远高于HTML，如果有办法把markdown文档渲染成小程序页面，以上的需求就能很好的解决。

查了一下，还真有，仓库地址：Towxml

一、构建

名字非常简单粗暴：to wxml，就是把markdown或HTML转换成WXML。

作者说这个包不建议从NPM上获取，而应该自己使用源码构建：

// clone仓库
git clone https://github.com/sbfkcel/towxml.git
// 进入文件夹
cd towxml
// 安装依赖
npm install
// 构建
npm run build

构建完成后，把dist文件夹复制到小程序的/miniprogram/路径下（和app.ts、pages等目录同级）：

在小程序的app.ts中添加towxml:require('/towxml/index')：

/**
 * app.ts
 * TS小程序的App泛型可能和引入的组件不兼容，可以改成any
 */
App<any>({ 
 globalData: {},
 towxml:require('/towxml/index'),
 onLaunch() {
 },
})

在需要使用的页面json中添加组件引用：

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

页面V层（wxml文件）：

<!--index.wxml-->
<view class="container">
 <towxml nodes="{{article}}"/>
</view>

页面C层（ts文件）：

//获取应用实例
const app = getApp();
// data中添加两个变量
Page({
 data: {
 isLoading: true, // 判断是否尚在加载中
 article: {} // 内容数据
 },
})

二、使用

官方文档链接：链接

文档中写到，在onload方法中初始化，就可以渲染markdown文本了，最终作用在上文写的towxml标签上：

 onLoad: function () {
 let result = app.towxml('# Markdown', 'markdown',{
 base:'https://xxx.com', // 相对资源的base路径
 theme:'light', // 主题，默认`light`
 events:{ // 为元素绑定的事件方法
 tap:(e)=>{
 console.log('tap',e);
 }
 }
 });
 // 更新解析数据
 this.setData({
 article:result,
 isLoading: false
 });
 }

towxml方法的三个参数：

文本型，必填。就是实际需要渲染的文本，上述代码的#Markdown渲染出来就是一级标题
文本型，必填。表示类型，本文只用到markdown所以写'markdown'即可
对象，必填。表示渲染时的参数，具体可以看文档，比如，主题可以改成亮色或暗色。

接下来需要解决一个问题：

上述代码的markdown文本是直接写在代码里的，实际应用肯定需要从后端获取

因此先写一个获取文本的方法：

 // 获取markdown文本
 getText: (url, callback) => {
 wx.request({
 url: url,
 header: {
 'content-type': 'application/x-www-form-urlencoded'
 },
 success: (res) => {
 if (typeof callback === 'function') {
 callback(res);
 };
 }
 });
 },

然后改写一下原来的onload：

onLoad: function () {
 // 获取文本，第一个参数指向后端的文件地址（你需要起一个后端）
 this.getText('http://127.0.0.1:8080/test.md', res => {
 // 回调函数中完成更新数据的逻辑
 let result = app.towxml(res.data, 'markdown',{
 base:'https://xxx.com', 
 theme:'light', 
 events:{ 
 tap:(e)=>{
 console.log('tap',e);
 }
 }
 });
 // 更新解析数据
 this.setData({
 article:result,
 isLoading: false
 });
 })
 }

此时就可以渲染来自HTTP的markdown文件了：