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

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

  • Towxml概述
  • [安装下载 Towxml](#安装下载 Towxml)
  • [在小程序中使用 towxml](#在小程序中使用 towxml)

Towxml概述

towxml3.0 支持以下功能:

● echarts图表,默认禁用,需自行构建以开启此功能

● LaTeX数学公式,默认禁用,需搭建解析服务并自行构建以开启此功能

● yuml图表,默认禁用,需要搭建解析服务并自行构建以开启此功能

● highlight代码高亮,默认开启(默认仅开启bash、javascript、json、python、html、css、php、scss、shell),其它语言高亮支持需自行构建以开启

安装下载 Towxml

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

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

在小程序中使用 towxml

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

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

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

下面是官方给出的例子:

javascript 复制代码
//获取应用实例
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)函数

javascript 复制代码
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)}}

  1. 页面显示效果
相关推荐
老华带你飞1 小时前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽1 小时前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
说私域11 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往11 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw11 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld15 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
996幸存者16 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮17 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
The_era_achievs_hero1 天前
UniappDay03
vue.js·微信小程序·uni-app
说私域1 天前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源