微信小程序Markdonw、HTML富文本内容显示解决办法

Towxml是一款用于将HTML和markdown格式的内容转换为微信小程序支持的WXML格式的工具。它解决了微信小程序无法直接解析HTML的问题,通过简单的配置即可实现高质量的富文本渲染,支持代码高亮、多主题动态选择等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Towxml

Towxml 是一个可将HTMLmarkdown转换为WXML(WeiXin Markup Language)的渲染库。

由于微信小程序不能直接渲染HTML,因此富文本编辑器生成的HTML内容无法直接在小程序中展示。

可能是出于安全因素考虑,即使WXML文本在小程序中也是以字符串方式进行渲染。

所以……

然后……

于是,Towxml 就因此降临了。

Towxml 下载

https://github.com/sbfkcel/towxml

特色

  • 支持代码语法高亮
  • 使用简单
  • 多主题动态支持
  • 极致的中文排版优化

快速上手

1. 克隆TOWXML到小程序根目录

git clone https://github.com/sbfkcel/towxml.git

2. 在小程序app.js中引入库

//app.js
const Towxml = require('/towxml/main');     //引入towxml库
App({
    onLaunch: function () {
    },
    towxml:new Towxml()                     //创建towxml对象,供小程序页面使用
})

3. 在小程序页面文件中引入模版

<!--pages/index.wxml-->

<!--引入towxml模版入口文件,并使用模版-->
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>

4. 在小程序对应的js中请求数据

//pages/index.js

const app = getApp();
Page({
    data: {
        //article将用来存储towxml数据
        article:{}
    },
    onLoad: function () {
        const _ts = this;

        //请求markdown文件,并转换为内容
        wx.request({
            url: 'http://xxx/doc.md',
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: (res) => {
                //将markdown内容转换为towxml数据
                let data = app.towxml.toJson(res.data,'markdown');

                //设置文档显示主题,默认'light'
                data.theme = 'dark';

                //设置数据
                _ts.setData({
                    article: data
                });
            }
        });
    }
})

5. 引入对应的WXSS

/**pages/index.wxss**/

/**基础风格样式**/
@import '/towxml/style/main.wxss';


/**如果页面有动态主题切换,则需要将使用到的样式全部引入**/

/**主题配色(浅色样式)**/
@import '/towxml/style/theme/light.wxss';

/**主题配色(深色样式)**/
@import '/towxml/style/theme/dark.wxss';

OK,大功告成~~

API

如果为了追求极致的体验,建议将markdownhtml转换为towxml数据的过程放在服务器上,在小程序中直接请求数据即可。

1. 依赖环境

需要 Node.js 环境。(已经安装请忽略)

2. 安装towxml

npm install towxml

3. 接口使用

const Towxml = require('towxml');
const towxml = new Towxml();

//Markdown转WXML
let wxml = towxml.md2wxml('# Article title');

//html转WXML
let wxml = towxml.html2wxml('<h1>Article title</h1>');

//Markdown转towxml数据
let data = towxml.toJson('# Article title','markdown');

//htm转towxml数据
let data = towxml.toJson('# Article title');

Demo示例

  1. towxml/demo添加为小程序工程
  2. 再克隆towxmldemo目录
  3. 使用小程序开发工具编译即可

License

MIT

### 实现微信小程序Markdown文本的解析与显示 为了实现在微信小程序中展示Markdown格式的内容,开发者可以选择多种方法和技术栈来完成这一目标。其中一种流行的方式是利用专门设计的小程序组件来进行MarkdownWXML微信小程序标记语言)的转换。 #### 使用 `wxParse` 组件 `wxParse` 是一款专为微信小程序打造的支持HTMLMarkdown解析的自定义组件[^1]。通过该工具能够轻松地把外部传入的Markdown字符串转化为可以在小程序视图层正常渲染的形式。具体操作如下: 安装并配置好 `wxParse` 后,在页面逻辑部分加载所需数据源中的Markdown内容,并调用相应接口处理这些文本;接着在模板文件里绑定经由 `wxParse` 转换后的结果即可实现预期效果。 ```javascript // 假设已成功集成 wxParse 并初始化完毕 Page({ onLoad() { const markdownContent = "# Hello, World!"; this.setData({ parsedHtml: wxParse('article', markdownContent)}); } }) ``` #### 利用 `Towxml` 库 另一个推荐的选择是采用名为 `Towxml` 的开源库[^2]。此库仅限于简单的语法转换功能,还提供了丰富的API供进一步定制化需求使用。以下是基于 `Towxml` 解决方案的一个简单实例说明: 首先按照官方指南克隆仓库、安装必要的依赖项以及构建项目[^5]。之后便可在应用内部引用编译好的资源文件,并编写相应的JS代码片段读取待呈现的文章主体——即一段标准形式下的Markdown描述符。最后借助 `<parser>` 标签配合特定属性值传递给前端界面以达到最终目的。 ```html <!-- WXML 文件 --> <view> <parser type="md">{{ mdText }}</parser> <!-- 这里的 {{ mdText }} 即为要解析的数据 --> </view> ``` ```javascript import towxml from 'path/to/towxml.min.js'; Page({ data: { mdText: '# Welcome to My App\nThis is an example of using Towxml.' }, onReady(){ let parserInstance = new towxml(); this.setData({ parsedResult: parserInstance.parse(this.data.mdText) }); } }); ``` 这两种方式都能有效地帮助开发者在其微信小程序内嵌入对Markdown格式的良好支持,从而提升用户体验和交互质量。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值