uni-app中使用Towxml 3.0，小程序完美支持Markdown-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app中使用Towxml 3.0，小程序完美支持Markdown。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简介

Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。
Towxml 3.0版本发布啦！✨✨✨
较2.x版本，新版体积更小、速度更快⚡️、支持无限级解析，增加诸多新特性。对微信小程序的Markdown及Html内容解析支持更加完善。
项目地址：https://github.com/sbfkcel/towxml

Towxml3.0 特性

Towxml 3.0 完整支持以下功能。当然在构建时可仅保留需要功能以减少体积大小和代码依赖。

支持echarts图表（3.0+）✨
支持LaTex数学公式（3.0+）✨
支持yuml流程图（3.0+）✨
支持按需构建（3.0+）✨
支持代码语法高亮、代码块行号显示
支持emoji表情😉
支持上标、下标、下划线、删除线、表格、视频、图片（几乎绝大部分html元素）……
支持typographer字符替换
支持多主题切换
支持Markdown TodoList
支持事件绑定（这样允许自行扩展功能哟，例如：点击页面中的某个元素，更新当前页面内容等…）
极致的中文排版优化
支持前后解析数据

Demo 截图

uni-app中使用Towxml 3.0，小程序完美支持Markdown

如何使用？

注意：3.0切勿直接拉取代码使用，请根据自行需要构建得到最终的代码。

首先需要构建

克隆项目到本地或直接到项目地址下载压缩包
git clone https://github.com/sbfkcel/towxml.git
解压后使用cmd安装构建依赖
npm install 或 yarn install
运行 npm run build 或 yarn run build即可

新构建出来的文件在dist目录下，将dist目录复制到你的小程序项目中并将目录名称改为towxml即可

在uniapp项目中使用

构建完成后，把构建好的文件夹dist改名为towxml，在uni-app项目根目录中新建的wxcomponents目录中，将towxml复制进去即可

修改 towxml/decode.json

{
  "component": true,
  "usingComponents": {
    "decode": "./decode",
    "audio-player": "./audio-player/audio-player",
    "echarts": "./echarts/echarts",
    "latex": "./latex/latex",
    "table": "./table/table",
    "todogroup": "./todogroup/todogroup",
    "yuml": "./yuml/yuml",
    "img": "./img/img"
  }
}

在pages.json中添加配置,在需要使用到towxml组件中引入

{
  "path": "pages/article/article",
  "style": {
  "usingComponents": {
  	"towxml": "/wxcomponents/towxml/towxml"
  },
}

在main.js中全局挂载towxml解析方法

vue3也不推荐Vue. prototype的方式挂在原型上，所以我选择了下面的方式

const towxml = require('./wxcomponents/towxml/index');
export function createApp() {
  const app = createSSRApp(App)
  app.config.globalProperties.$towxml = towxml
  return {
    app
  }
}

在需要使用towxml的组件中使用文章来源地址https://www.toymoban.com/news/detail-496265.html

<template>
  <view class="container">
    <towxml :nodes="article.content" />
  </view>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import $http from "@/api/request.js"

let { appContext } = getCurrentInstance();
const article = ref({} as any)
onLoad((e) => {
  getArticleById(e.id)
})

const getArticleById = (id: string) => {

  $http.request({
  	url: `/getArticleById/${id}`
  }).then(res => {
      // res.data.content = appContext.config.globalProperties.$towxml('markdown语法文本','markdown')
  	res.data.content = appContext.config.globalProperties.$towxml(res.data.content,'markdown')
  	article.value = res.data
  })
}
</script>

到了这里，关于uni-app中使用Towxml 3.0，小程序完美支持Markdown的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！