uni-app使用markdown组件

xiaohai 2022-07-28 17:42:59 4254人围观 标签: Vue 
简介在使用uni-app开发微信小程序的过程中,要解析markdown那么就可以使用Towxml组件,本文主要介绍下如何在uni-app中添加Towxml组件。

环境:
uni-app中Vue版本是3.0
Towxml版本:3.0

Towxml 是一个让小程序(微信/QQ)可以解析Markdown、HTML的解析库。能够使小程序完美解析Markdown内容。

github地址:https://github.com/sbfkcel/towxml

下面介绍如何使用Towxml:

第一步:首先,需要构建Towxml(常规步骤,按照操作步骤执行就是了)
  • 克隆项目到本地
  • git clone https://github.com/sbfkcel/towxml.git
  • 安装构建依赖
  • npm install 或 yarn
  • 编辑配置文件towxml/config.js
  • 根据自行需要,仅保留你需要的功能即可(配置中有详细注释)
  • 运行 npm run build 或 yarn run build即可
  • (重要)修改 towxml/decode.json 里所有/towxml开头的绝对路径为相对路径。例如 “decode”: “/towxml/decode”, 改成 “decode”: “./decode”,
第二步:将构建好的towxml复制到项目中

首先在项目下新建wxcomponents目录,名字不能错,这个是“乌龟的屁股”。
图片alt

将第一步构建的Towxml目录复制到wxcomponents中,目录结构如下.图片alt

第三步:开始使用
1、在main.js中进入Towxml
//新增一
const towxml = require("./wxcomponents/towxml/index")  //这里最后一定是index,不要写成了towxml

//新增二
app.config.globalProperties.$towxml = towxml

完整代码如下:

app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
import App from './App.vue'

//新增一
const towxml = require("./wxcomponents/towxml/index")

export function createApp() {
  const app = createSSRApp(App)
  //新增二
  app.config.globalProperties.$towxml = towxml
  return {
    app
  }
}
// #endif
2、在页面中引入组件

在pages.json中,在指定页面新增组件:

"usingComponents": {
    "towxml": "/wxcomponents/towxml/towxml"
}

完整使用如下:

{
        "path": "pages/home/home",
        "style": {
            "navigationBarTitleText": "首页",
            "enablePullDownRefresh": false,
            "usingComponents": {
                "towxml": "/wxcomponents/towxml/towxml"
            }
        }
    },
3、在页面插入组件
<template>
    <view>
        <towxml :nodes="article"></towxml>
    </view>
</template>
4、解析内容
<script>
    export default {
        data() {
            return {
                article: {}
            };
        },
        onLoad() {
            uni.showLoading({
                title:"加载数据中...."
            })
            uni.request({
                url: 'https://www.vvadd.com/wxml_demo/demo.txt?v=2', //仅为示例,并非真实接口地址。
                data: {},
                header: {},
                success: (res) => {
                    uni.showToast({
                        title:"获取数据完成"
                    })
                    this.parseMarkdown(res.data.data);
                },
                complete() {
                    uni.hideLoading()
                }
            });
        },
        methods: {
            parseMarkdown(content) {
                let result = this.$towxml(content,
                    'markdown', {
                        // base: 'https://xxx.com', // 相对资源的base路径
                        theme: 'dark', // 主题,默认`light`
                        events: { // 为元素绑定的事件方法
                            tap: (e) => {
                                console.log('tap', e);
                            }
                        }
                    });
                // 更新解析数据
                this.article = result
            }
        }
    }
</script>

以上就是towxml的使用方法

注意:如果上面的步骤都没有问题,但是解析出来没有样式,只需要将项目重新运行下即可.