uni-app使用markdown组件

环境：
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目录，名字不能错，这个是“乌龟的屁股”。

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

第三步：开始使用

1、在main.js中进入Towxml

1. //新增一
2. const towxml = require("./wxcomponents/towxml/index") //这里最后一定是index，不要写成了towxml
3.  
4. //新增二
5. app.config.globalProperties.$towxml = towxml

完整代码如下：

1. app.$mount()
2. // #endif
3.  
4. // #ifdef VUE3
5. import { createSSRApp } from 'vue'
6. import App from './App.vue'
7.  
8. //新增一
9. const towxml = require("./wxcomponents/towxml/index")
10.  
11. export function createApp() {
12. const app = createSSRApp(App)
13. //新增二
14. app.config.globalProperties.$towxml = towxml
15. return {
16. app
17. }
18. }
19. // #endif

2、在页面中引入组件

在pages.json中，在指定页面新增组件：

1. "usingComponents": {
2. "towxml": "/wxcomponents/towxml/towxml"
3. }

完整使用如下：

1. {
2. "path": "pages/home/home",
3. "style": {
4. "navigationBarTitleText": "首页",
5. "enablePullDownRefresh": false,
6. "usingComponents": {
7. "towxml": "/wxcomponents/towxml/towxml"
8. }
9. }
10. },

3、在页面插入组件

1. <template>
2. <view>
3. <towxml :nodes="article"></towxml>
4. </view>
5. </template>

4、解析内容

1. <script>
2. export default {
3. data() {
4. return {
5. article: {}
6. };
7. },
8. onLoad() {
9. uni.showLoading({
10. title:"加载数据中...."
11. })
12. uni.request({
13. url: 'https://www.vvadd.com/wxml_demo/demo.txt?v=2', //仅为示例，并非真实接口地址。
14. data: {},
15. header: {},
16. success: (res) => {
17. uni.showToast({
18. title:"获取数据完成"
19. })
20. this.parseMarkdown(res.data.data);
21. },
22. complete() {
23. uni.hideLoading()
24. }
25. });
26. },
27. methods: {
28. parseMarkdown(content) {
29. let result = this.$towxml(content,
30. 'markdown', {
31. // base: 'https://xxx.com', // 相对资源的base路径
32. theme: 'dark', // 主题，默认`light`
33. events: { // 为元素绑定的事件方法
34. tap: (e) => {
35. console.log('tap', e);
36. }
37. }
38. });
39. // 更新解析数据
40. this.article = result
41. }
42. }
43. }
44. </script>

<towxml :nodes="$towxml(article,
                  'markdown', {
                    // base: 'https://xxx.com', // 相对资源的base路径
                    theme: 'dark', // 主题，默认`light`
                    events: { // 为元素绑定的事件方法
                      tap: (e: any) => {
                        console.log('tap', e);
                      }
                    }
 })"></towxml>

 
uniapp vue3的调用示例



以上就是towxml的使用方法

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