uni-app中使用towxml

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>