uni-app中使用towxml

本文介绍如何在uni-app项目中集成towxml,实现Markdown和HTML内容的有效解析与显示。文章详细说明了通过自定义组件引入towxml、全局挂载解析方法以及在页面中实际展示的过程。

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

uni-app是一个使用 Vue.js 开发所有前端应用的框架
towxml是一个在小程序中解析markdown或html的工具

我给博客用uni-app写了一个微信小程序版,要展示文档详情,总所周知小程序本身的rich-text很难用,所以经过一番调研,就选择了towxml。
但是uni-app本身并没有集成towxml,使用的过程中也是遇到了一点麻烦,分享给大家

第一步 以自定义组件的方式引入towxml包

根据官网指引,如果要使用towxml3.0需要构建一下,把构建好的文件夹改名为towxml放在uni-app项目中新建的wxcomponents目录中。
这个目录的名字是固定的具体可以到官网文档查看

修改 towxml/decode.json 里所有/towxml开头的绝对路径为相对路径
例如 "decode": "/towxml/decode", 改成 "decode": "./decode"

在pages.json中添加配置

{
    "pages": [{
        "path" : "pages/index/index",
        "style" : {
            "usingComponents":{
                "towxml": "/wxcomponents/Towxml/towxml"
             }
         }
    }]
}
第二步 在全局挂载towxml解析方法

towxml本是提供给小程序使用的,所以用了很多commonjs 语法,导出方式都是module.exports,然而vue3已经不再支持这种语法了,直接引入会报错
而且vue3也不推荐Vue. prototype的方式挂在原型上,所以我选择了下面的方式

main.js

const towxml = require('./wxcomponents/Towxml/index');
export function createApp() {
  const app = createSSRApp(App)
  app.config.globalProperties.$towxml = towxml
  return {
    app
  }
}
第三步 在页面中展示
<template>
  <view>
    <towxml :nodes="data"/>
  </view>
</template>

<script setup>
	import {ref,onMount} from 'vue'
	let {appContext} = getCurrentInstance();
	const data = ref('')
	onMount(()=>{
      data.value = appContext.config.globalProperties.$towxml('markdown文本,'markdown')
    })
</script>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花贝是只猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值