towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。

Towxml概述

towxml3.0 支持以下功能:

● echarts图表,默认禁用,需自行构建以开启此功能
● LaTeX数学公式,默认禁用,需搭建解析服务并自行构建以开启此功能
● yuml图表,默认禁用,需要搭建解析服务并自行构建以开启此功能
● highlight代码高亮,默认开启(默认仅开启bash、javascript、json、python、html、css、php、scss、shell),其它语言高亮支持需自行构建以开启

安装下载 Towxml

  1. 先使用命令克隆到本地中(使用git进行安装)
git clone https://github.com/sbfkcel/towxml.git
  1. 对克隆的下的文件进行依赖安装和npm重构
npm install  # 安装依赖
npm run build # npm 重构

在这里插入图片描述

构建完成后,会在当前的目录中生成一个dist目录(按照提示找到对应的文件夹),然后将其拷贝到微信小程序项目中(根下),重命名为towxml即可。

在这里插入图片描述

在小程序中使用 towxml

  1. 引入towxml库到 App.js中
// app.js
App({
   
  towxml: require('./towxml/index'),
  onLaunch() {
   
  },
})
  1. 在具体页面的配置文件中引入towxml组件

注意:这里的组件路径根据自己的页面去找相对路径。

{
   
    "usingComponents": {
   
        "towxml": "../../towxml/towxml"
    }
}
  1. 在wxml页面中使用towxml组件
<view class="content-info">
  <towxml nodes="{
    {article}}"/>
</view>
  1. 在具体页面的js中对需要进行markdown转换wxml的业务进行处理解析

下面是官方给出的例子:

//获取应用实例
const app = getApp();
Page({
   
  data: {
   
    isLoading: true,                    // 判断是否尚在加载中
    article: {
   }                        // 内容数据
  },
  onLoad: function () {
   
    let result = app.towxml(`# Markdown`,'markdown',{
   
      base:'https://xxx.com',                // 相对资源的base路径
      theme:'dark',                    // 主题,默认`light`
      events:{
                       // 为元素绑定的事件方法
        tap:(e)=>{
   
          console.log('tap',e);
        }
      }
    });

    // 更新解析数据
    this.setData({
   
      article:result,
      isLoading: false
    });

  }
})

其实就是调用app.towxml(str,type,options)函数

const app = getApp(); // 应用实例
Page({
   
  // ....
   onLoad:function(){
   
     // 这是一个伪代码
     let 解析的结果 = app.towxml('想要被解析的数据','markdown',[options])
   } 
})

其中的options选项都是可选的,可以一个都不加,选项说明如下:
app.towxml(str,type,options)有三个参数
str 必选,html或markdown字符串
type 必选,需要解析的内容类型html或markdown
options [object] 可选,可以该选项设置主题、绑定事件、设置base等
base [string] 可选,用于指定静态相对资源的base路径。例如:https://xx.com/static/
theme [string] 可选,默认:light,用于指定主题’light’或’dark’,或其它自定义
events [object] 可选,用于为元素绑定事件。key为事件名称,value则必须为一个函数。例如:{tap:e=>{console.log(e)}}
5. 页面显示效果

在这里插入图片描述

相关文章
|
5天前
|
人工智能 文字识别 数据挖掘
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式
MarkItDown 是微软开源的多功能文档转换工具,支持将 PDF、PPT、Word、Excel、图像、音频等多种格式的文件转换为 Markdown 格式,具备 OCR 文字识别、语音转文字和元数据提取等功能。
61 9
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式
|
3月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
4月前
|
存储 自然语言处理 前端开发
Star 6.9k!开源的全能Markdown格式文件提取器:MinerU
总的来说,MinerU是一款非常实用且强大的数据提取工具。无论你是开发者、互联网从业者,还是有具体需求的新人小白,MinerU都能极大地提升你的工作效率,让你专注于更有价值的工作。 最后,如果你对MinerU感兴趣,不妨亲自尝试一下,相信你会爱上这款全能的Markdown格式文件提取器。
|
4月前
【Latex 格式】Markdown或者LaTeX在单个字母上加一横、一点、两点、三角
Markdown或者LaTeX在单个字母上加一横、一点、两点、三角
407 8
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
695 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
750 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
146 7
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
86 6
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
252 1
|
2月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
87 5