小程序中把markdown标记转换成小程序渲染标记语言

work_fei

已于 2023-11-08 14:18:02 修改

阅读量739

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：小程序

于 2023-08-25 10:22:11 首次发布

本文链接：https://blog.youkuaiyun.com/work_fei/article/details/132489356

web前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用Towxml库将HTML和Markdown转换为微信小程序的WXML语言，包括下载库、配置项目、引入和使用方法，以及在实际场景中的应用步骤。

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

介绍

Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。

1.本地创建一个空文件夹，使用git clone 到本地

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

2.使用微信开发者打开本项目

3.安装构建依赖

npm install

4.打开终端输入打包命令

npm run build

5.打包后项目中会产生一个dist文件夹

6.在需要使用转换的小程序项目中添加引用

6.1 把dist文件夹复制到项目中并改名为towxml

6.2在app.js文件中引入库

App({
  towxml: require('/towxml/index')
})

6.3在需要使用的页面.json中引入组件

eg: detail.json中

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

6.4 在detail.js中进行语法转换

const app = getApp()
let result = app.towxml(res.data.msg,'markdown',{ // res.data.msg是需要转换的内容
          // base:'https://xxx.com',				// 相对资源的base路径
          theme:'dark',					// 主题，默认`light`
          events:{					// 为元素绑定的事件方法
            tap:(e)=>{
              console.log('tap',e);
            }
          }
        });
this.setData({ shop: res.data.msg, result: result })

6.5 在detail.wxml中进行调用