微信小程序使用Towxml动态渲染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"
  }
}

在页面视图层（WXML文件）中，需引入towxml标签。

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

在页面逻辑层（TS文件）中，需初始化Page实例并配置data。

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

使用

官方文档链接：链接

根据文档指引，在onload生命周期方法中调用初始化函数，即可对上文定义的towxml标签进行Markdown文本渲染。

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文本是直接硬编码在脚本中的，而在实际生产环境中，内容通常需从后端服务器动态获取。

为此，首先需封装一个用于获取文本数据的方法。

// 获取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文件内容。

最后，通过动态修改请求参数中的地址，即可灵活控制页面展示的具体文本内容。

总结

若采用传统手动开发方式，完成十几甚至二十几篇不同结构的页面开发，耗时可能长达一两天。而利用Markdown渲染方案，预计一小时即可完成，效率大幅提升。

作为开发者，应秉持自动化优先原则：能通过逻辑解决的问题绝不重复劳动，能通过工具自动化的步骤绝不动手操作。

以上就是微信小程序实现动态渲染Markdown示例详解的详细内容，更多关于微信小程序动态渲染Markdown的资料请关注本站其它相关文章！

微信小程序动态渲染Markdown教程：Towxml库集成与实战

需求

构建

使用

总结

实用工具推荐