【小程序制作之旅】完美支持 Markdown 看这一篇就够了，超详细教程

LeQi
2,269 阅读4分钟

博主小程序体验 | 博主公众号分享

小程序.jpg 公众号.jpg

【小程序制作之旅】完美支持 Markdown 看这一篇就够了，超详细教程

在我做自己小程序的时候有些文字描述、详情等等想用Markdown展示，但是发现微信小程序在支持Markdown方面不是很友好，于是就在 github 上找到了一款超好用的组件，Twoxml，完美支持Markdown,下面就记录一下小程序集成 twoxml 的过程分享一下！

Towxml 介绍

Towxml 是一个轻量级的 Markdown 渲染引擎，主要用于将 Markdown 格式的文本转换为 HTML 内容。它特别适合用于微信小程序、H5 应用等场景，可以方便地展示各种格式的文本，包括标题、列表、图片、链接等。

主要特点

  1. 简单易用：使用 Towxml 可以轻松地将 Markdown 文本渲染为可视化的内容。
  2. 支持多种 Markdown 语法：如标题、列表、粗体、斜体、引用、代码块等。
  3. 扩展性：用户可以根据需要进行自定义扩展，比如添加新的 Markdown 语法或样式。
  4. 高性能：专为小程序和移动端设计，渲染性能较高，能快速响应用户操作。
  5. 样式灵活：可以通过 CSS 自定义渲染后的 HTML 的样式，使其更符合应用的设计需求。

使用场景

  • 博客或文档：适合用于展示技术文档、博客文章等。
  • 小程序开发：在微信小程序中展示 Markdown 格式的内容。
  • H5 页面：用于网页中的文本内容展示。

Towxml 是一个实用的工具，特别适合开发者在需要 Markdown 渲染的场合使用。如果你需要快速地将 Markdown 文本展示为 HTML 内容，Towxml 是一个不错的选择。

Towxml 特色

640.webp

Towxml 截图效果

640.webp

Towxml 文档

Towxml 官网：

github.com/sbfkcel/tow…

Towxml 如何使用：

github.com/sbfkcel/tow…

小程序中引入 Twoxml

  • 1、首先下载 twoxml
// clone twoxml 仓库
git clone https://github.com/sbfkcel/towxml.git
// 进入文件夹
cd towxml
// 安装依赖
npm install
// 构建
npm run build
  • 2、构建完成后，找到 dist文件夹改名为towxml,方便识别，然后复制到小程序的/miniprogram/路径下与pages等目录同级

图片

  • 3、在小程序的app.ts中引入towxml
// app.ts
App<any>({
  globalData: {},
  towxml: require('/towxml/index'),
})
  • 4、在需要使用 md 的页面使用

JSON 文件

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

wxml 文件

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

ts 文件

//获取应用实例
const app = getApp();

Page({
  data: {
    md: {}// md 内容
  },
})

towxml 接口获取md内容渲染

  // 获取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: 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({
        md:result
      });
    })
  }

towxml 详细讲解一下如何渲染项目中自己写的 md 内容(因为我是自己开发的，并没有后端，想把内容直接写在项目中)

  • 1、在项目中创建个 md-txt.ts，然后使用模板字符串写自己的 md 内容，如下：
export const mdTxt = `

## 测试 towxml 渲染 md title

> 使用方法
>
> **简单易用**

`

重点：在字符串模板中其他的都好说，字符串随便写，如果要渲染 代码，就需要一下方法了，将 (```)转义一下才可以。如下

export const mdTxt = `

## 渲染 code 方法, 如下

\`\`\`html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    
</body>
</html>

<script>

</script>

\`\`\`
`
  • 2、引入 mdText，并赋值
import { mdTxt } from "./md-txt";

const app = getApp();
data: {
    md: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    const result = app.towxml(mdTxt, 'markdown', {
      theme: 'dark',					// 主题，默认`light`
      events: {					// 为元素绑定的事件方法
        tap: (e: any) => {
          console.log('tap', e);
        }
      }
    });
    // 更新解析数据
    this.setData({
      md: result,
    });
  },

640.webp

总结

使用Towxml来实现markdown其实比较简单，方便快捷，网上也可以搜到具体使用方法，但是问什么我还要写这一篇文章，就是因为想把内容直接写在项目中，并且用模板字符串的方式渲染 md ，当时碰到 在模板字符串中用md 语法写 代码的时候碰到的这个问题，想着就把他总结下来。

分享，非独使他人明晰，更为自身升华之途

avatar
文章
阅读
粉丝