微信小程序中Towxml解析Markdown及html

news2024/9/27 19:26:08

一、Towxml

Towxml 是一个让小程序可以解析Markdown、HTML的解析库。
在这里插入图片描述

二、引入

2.1 clone代码

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

2.2 安装依赖

npm install

2.3 打包

npm run build

2.4 引入文件

将dist文件复制到微信小程序根目录,改名为towxml
在这里插入图片描述

三、使用

3.1 app.js引入

//app.js
App({
    // 引入`towxml`解析方法
    towxml:require('/towxml/index')
})

3.2 页面配置文件json中引用

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

3.3 页面js使用

const app = getApp();
Page({
    data: {
        content: ''
    },
    onLoad: function (options) {
        // todo 库中返回markdown
        const contentMd = '# 一级标题';
        let result = app.towxml(contentMd, 'markdown', {
        	theme: 'light'
        });
        this.setData({
            content: result
        });
    }
})

3.4 wxml展示

<towxml nodes="{{content}}"/>

3.5 效果

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2088666.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

简化WPF开发:CommunityToolkit.Mvvm在MVVM架构中的实践与优势

文章目录 前言一、CommunityToolkit.Mvvm1.特点2.优点3.缺点 二、WPF项目应用1.引入到 WPF 项目2.使用示例 总结 前言 CommunityToolkit.Mvvm 是 Microsoft 提供的一个社区工具包&#xff0c;专为 MVVM&#xff08;Model-View-ViewModel&#xff09;模式设计&#xff0c;旨在帮…

基于Virtex UltraScale+ VU13P FPGA的4路FMC接口基带信号处理平台

Virtex UltraScale系列 FPGA处理器&#xff1a;XCVU13P-2FHGB2104I动态存储数量&#xff1a;2组DDR4 SDRAM动态存储容量&#xff1a;每组4GByte&#xff0c;每个颗粒为8GBit动态存储带宽&#xff1a;工作时钟1000MHz&#xff0c;数据率2000Mbps板载6路QSFP光纤接口板载4个FMC高…

echarts 柱状图_堆叠柱状图_数据分区_常用图表配置_数据可视化

Echarts 常用各类图表模板配置 注意&#xff1a; 这里主要就是基于各类图表&#xff0c;更多的使用 Echarts 的各类配置项&#xff1b; 以下代码都可以复制到 Echarts 官网&#xff0c;直接预览&#xff1b; 图标模板目录 Echarts 常用各类图表模板配置一、数据分区显示二、折…

Redis入门篇 - CentOS 7下载、安装Redis实操演示

文章记录了在CentOS 7上&#xff0c;通过源码的形式,下载安装Redis的操作过程 进入要安装Redis的目录 cd /usr/local下载源码压缩包 wget https://download.redis.io/redis-stable.tar.gz # 不同版本可能地址不同下载完成后&#xff0c;使用ll命令检查&#xff0c;可以看到下载…

移动端视频编辑SDK,赋能开发者,共创未来视界

美摄科技&#xff0c;作为移动端视频编辑领域的佼佼者&#xff0c;再次突破技术边界&#xff0c;推出了全面升级的移动端视频编辑SDK解决方案&#xff0c;旨在为广大开发者及内容创作者提供一套强大而灵活的创意工具箱&#xff0c;让视频与图片编辑的每一个细节都焕发无限可能。…

51单片机——定时器

1、定时器介绍 定时器介绍:51单片机的定时器属于单片机的内部资源&#xff0c;其电路的连接和运转均在单片机内部完成。 定时器作用: (1) 用于计时系统&#xff0c;可实现软件计时&#xff0c;或者使程序每隔一固定时间完成一项操作 (2) 替代长时间的Delay&#xff0c;提高…

LuaJit分析(三)luajit字节码文件格式

Luajit字节码文件格式的完整信息如上图所示&#xff0c;包括文件头Header和原型Proto&#xff0c;一个原型可以对应lua源码中的一个函数或源文件。一、文件头文件标志&#xff1a;占用三个字节&#xff0c;始终是0x1B4C4A&#xff0c;表示这是一个luajit文件版本&#xff1a;占…

006-Sleuth(Micrometer)+ZipKin分布式链路追踪

这里写目录标题 1 分布式链路追踪概述1.1 为什么会出现这个技术&#xff1f;需要解决哪些问题&#xff1f;1.2 在分布式与微服务场景下需要解决的问题 2 新一代Spring Cloud Sleuth&#xff1a;Micrometer2.1 官网重要提示2.1.1 新一代Sleuth2.1.2 官网2.1.3 说明2.1.3.1 老项目…

性能测试计划怎么写?

一&#xff0e;简介 简介部分就不用过多描述了&#xff0c;无非是项目的背景&#xff0c;进行此次性能测试的原因&#xff0c;以及性能测试覆盖的范围等等&#xff0c;几乎所有项目文档都在开端对项目进行简单的阐述。 二&#xff0e;性能测试需求 寻找的被测试对象和压力点…

SD-WAN 跨国专线主要应用在哪些地方?

随着企业需求的不断变化和发展&#xff0c;传统的WAN技术已无法完全满足现代企业的需求。因此&#xff0c;SD-WAN跨国专线逐渐成为企业连接全球业务的重要选择。SD-WAN跨国专线通过SD-WAN技术&#xff0c;实现跨国业务的高效专线连接&#xff0c;极大地提升了企业的全球运营能力…

泡泡玛特2024半年报发布:收入利润高增长 各项指标超预期

泡泡玛特发布2024上半年业绩报告。报告显示&#xff0c;2024年上半年泡泡玛特国际集团实现营收45.6亿元(人民币&#xff0c;下同)&#xff0c;同比增长62.0%&#xff0c;经调整后净利10.2亿元&#xff0c;同比增长90.1%。国内地市场差异化渠道定位及精细化运营驱动其业务实现营…

分类预测|基于Transformer-LSTM的数据分类预测Matlab程序 多特征输入多类别输出

分类预测|基于Transformer-LSTM的数据分类预测Matlab程序 多特征输入多类别输出 文章目录 一、Transformer-LSTM基本原理1. 模型原理TransformerLSTM 2. 流程步骤1. 数据预处理2. Transformer编码器3. LSTM层4. 分类层5. 模型训练与评估 3. 优势与应用 二、实验结果三、核心代码…

【原创教程】电气电工14:电磁阀知识一篇搞定

电气电工这些知识点,我们描述的比较细,虽然看起来比较简单,但是它是后面我们技能提升的基础,如果我们后面学电气工程师相关知识,这些都属于基本功。 接着我们来看一下电磁阀。 电磁阀是一种利用电磁原理控制流体介质方向、流量、压力等参数的控制元件。它是将电信号转化…

安装Ubuntu

1.看到如下直接回车&#xff08;安装&#xff09; 2.选择语言 3.有的版本会叫你更新&#xff08;1.更新2.不用继续安装3.返回&#xff09; 4.键盘选择&#xff08;一般默认即可回车&#xff09; 5.Ubuntu版本选择 6.网路配置 7.代理服务器配置&#xff08;不懂回车即可&#xf…

C语言教程-13_1-初识指针

title: C语言教程-13_1-初识指针 tags: [C] categories: C语言教程 description: 接触C语言的灵魂-指针 概要: 简要讲解内存地址与内存模型简单介绍C语言的指针这一数据类型掌握指针相关最基本的两种互逆运算 前置知识: 理解能力和想象能力耐心和实验精神数组与函数的知识 …

ES(Elasticsearch)可视化界面-浏览器插件

安装 支持Micrsoft Edge、谷歌、火狐浏览器 此处我以IE为例 使用 extension://aonamamifdfigcflbeokdndfappnmogo/es-client/index.html?td_channelidchrome#/more/about 输入相关连接信息即可 rest client语法 和kibana的开发者工具查询方式一致,可以参考我另一篇文章Kiba…

Python生成指定数量的随机XML文件

我的需求是随机生成18位数字的XML文件名&#xff0c;其中前12位数字是随机数&#xff0c;后6位是时间信息 其中XML中写入CSN的tag值&#xff0c;代码如下 import os import random import time import xml.etree.ElementTree as ETdef generate_random_filename():random_part…

光耦合器的简要揭秘

光耦合器&#xff0c;也称为光隔离器或光电耦合器&#xff0c;是电子器件中必不可少的元件&#xff0c;它提供了一种在电路隔离部分之间传输电信号的方法。这种隔离对于保护系统的敏感部分免受高压尖峰或电气噪声的影响至关重要&#xff0c;这使得光耦合器在许多应用中成为一种…

Linux内核编程(十四)IIC总线驱动FT5X06触摸屏

本文目录 前述&#xff1a;一、IIC子系统框架二、I2C设备驱动层1. i2c_client编写&#xff08;C语言版-旧内核&#xff09;2. i2c_client编写&#xff08;设备树版-新内核&#xff09; 前述&#xff1a; 对于IIC的基础知识&#xff0c;这里不做过多的介绍&#xff0c;详细情况…

智能地理信息系统平台应该是什么样子?

现在GIS平台除了三维GIS属于重大突破&#xff0c;这些年基本上都属于蹭热点概念&#xff0c;并在这些热点概念之间左右逢源&#xff0c;究其本质&#xff0c;还是在于没有把握好GIS的立足之本与用户之间的巨大鸿沟。回归到题目上&#xff0c;智能地理信息系统平台&#xff0c;从…