uniapp中集成towxml
分类:Uniapp 别名:integrate-towxml-in-uniapp

towxml是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。

使用他的原因是,渲染markdown内容出来的效果特别赞!(效果见文末)

我是使用uniapp框架对小程序进行的开发,所以和towxml给的官方wiki使用方式有些不一样。

先下载towxml项目至uniapp项目中,以下有2处使用到路径,请注意替换。

在官方的wiki中,就要求在页面配置文件中引入towxml组件,在uniapp中,则需要这样引入

// #ifdef MP-WEIXIN            <= 为微信小程序时才引入
import towxml from "@/static/towxml/towxml"
// #endif
export default {
    data() {
        return {
            towxmlFunc:require('@/static/towxml/index.js')            <= 执行方法
        }
    },
    components: {
        // #ifdef MP-WEIXIN
        towxml,            <= 引入至usingComponents
        // #endif
    }
}

完整代码为:

<template>        <= 静态文件
    <!-- #ifdef MP-WEIXIN -->
    <towxml :nodes="contentText"/>
    <!-- #endif -->
</template>

<script>
// #ifdef MP-WEIXIN            <= 为微信小程序时才引入
import towxml from "@/static/towxml/towxml"
// #endif
export default {
    data() {
        return {
            towxmlFunc:require('@/static/towxml/index.js'),            <= 执行方法
            contentText:null        <= 展示数据
        }
    },
    components: {
        // #ifdef MP-WEIXIN
        towxml,            <= 引入至usingComponents
        // #endif
    },
    methods: {
        get() {
            ...执行获取html或markdown逻辑
            this.contentText = this.towxmlFunc(数据源,"html");
        }
    }
}
</script>

效果:

关闭