【1】Vue处理markdown数据
在Vue项目中展示Markdown格式的数据，比如通义千问模型返回的数据，你可以借助一些Markdown解析库将Markdown文本转换为HTML，然后在页面上渲染。以下为你详细介绍几种常用的实现方式。
方法一：使用marked库
marked是一个流行的Markdown解析器，能将Markdown文本转换为HTML。
步骤
- 安装
marked库
在项目根目录下，通过以下命令安装marked：
npm install marked
- 创建Vue组件
以下是一个简单的Vue组件示例，用于展示Markdown数据：
<template>
<div>
<!-- 使用v-html指令将解析后的HTML插入到DOM中 -->
<div v-html="parsedMarkdown"></div>
</div>
</template>
<script>
import marked from 'marked';
export default {
data() {
return {
// 模拟通义千问返回的Markdown数据
markdownData: `# 标题一
这是一段普通的文本。
- 列表项1
- 列表项2`,
parsedMarkdown: ''
};
},
mounted() {
// 在组件挂载时解析Markdown数据
this.parsedMarkdown = marked(this.markdownData);
}
};
</script>
方法二：使用vue-markdown组件
vue-markdown是专门为Vue设计的Markdown组件，使用起来更加方便。
步骤
- 安装
vue-markdown库
在项目根目录下，通过以下命令安装vue-markdown：
npm install vue-markdown
- 创建Vue组件
以下是使用vue-markdown组件的示例：
<template>
<div>
<!-- 使用vue-markdown组件展示Markdown数据 -->
<vue-markdown :source="markdownData"></vue-markdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
export default {
components: {
VueMarkdown
},
data() {
return {
// 模拟通义千问返回的Markdown数据
markdownData: `# 标题一
这是一段普通的文本。
- 列表项1
- 列表项2`
};
}
};
</script>
处理通义千问返回的数据
如果你要展示通义千问返回的Markdown数据，只需将上述示例中的markdownData替换为从通义千问API获取的数据即可。以下是一个简单的示例：
<template>
<div>
<vue-markdown :source="markdownData"></vue-markdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
import axios from 'axios';
export default {
components: {
VueMarkdown
},
data() {
return {
markdownData: ''
};
},
async mounted() {
try {
// 模拟调用通义千问API
const response = await axios.post('https://api.example.com', {
// 请求参数
});
// 假设返回的数据在response.data.text字段中
this.markdownData = response.data.text;
} catch (error) {
console.error('获取数据失败:', error);
}
}
};
</script>
【2】微信小程序处理markdown
在微信小程序里解析 Markdown 格式数据（如通义千问模型返回的数据），可以借助第三方库将 Markdown 转换为小程序能够渲染的格式，下面为你介绍几种常见的实现方式。
方法一：使用 markdown-it 库
markdown-it 是一个快速的 Markdown 解析器，可将 Markdown 文本转换为 HTML，再结合微信小程序的 rich-text 组件来展示。
步骤
- 安装
markdown-it库
可以通过 npm 来安装markdown-it到小程序项目中。在项目根目录下执行以下命令：
npm install markdown-it
接着在微信开发者工具里，点击“工具” -> “构建 npm”。
- 编写代码解析并展示 Markdown 数据
在小程序的.js文件里进行 Markdown 解析：
// pages/index/index.js
const MarkdownIt = require('markdown-it');
const md = new MarkdownIt();
Page({
data: {
htmlContent: ''
},
onLoad() {
// 模拟通义千问返回的 Markdown 数据
const markdownData = `# 标题一
这是一段普通的文本。
- 列表项1
- 列表项2`;
// 解析 Markdown 数据为 HTML
const html = md.render(markdownData);
this.setData({
htmlContent: html
});
}
});
在对应的 .wxml 文件里使用 rich-text 组件展示解析后的 HTML 内容：
<!-- pages/index/index.wxml -->
<rich-text nodes="{{htmlContent}}"></rich-text>
方法二：使用 wxParse 插件
wxParse 是专门为微信小程序设计的 HTML 解析插件，也能处理 Markdown 内容。
步骤
-
下载并引入
wxParse插件
从wxParse的 GitHub 仓库（https://github.com/icindy/wxParse）下载代码，将wxParse文件夹复制到小程序项目中。 -
使用
wxParse解析并展示 Markdown 数据
在.js文件中引入并使用wxParse：
// pages/index/index.js
const WxParse = require('../../wxParse/wxParse.js');
Page({
onLoad() {
// 模拟通义千问返回的 Markdown 数据
const markdownData = `# 标题一
这是一段普通的文本。
- 列表项1
- 列表项2`;
// 解析 Markdown 数据
WxParse.wxParse('content', 'md', markdownData, this, 5);
}
});
在对应的 .wxml 文件里展示解析后的内容：
<!-- pages/index/index.wxml -->
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:content.nodes}}"/>
处理通义千问返回的数据
若要展示通义千问返回的 Markdown 数据，只需把上述示例里模拟的 markdownData 替换成从通义千问 API 获取的数据即可。以下是一个简单示例：
// pages/index/index.js
const MarkdownIt = require('markdown-it');
const md = new MarkdownIt();
Page({
data: {
htmlContent: ''
},
async onLoad() {
try {
// 调用通义千问 API 获取数据
const response = await wx.request({
url: 'https://api.example.com',
method: 'POST',
data: {
// 请求参数
}
});
// 假设返回的数据在 response.data.text 字段中
const markdownData = response.data.text;
const html = md.render(markdownData);
this.setData({
htmlContent: html
});
} catch (error) {
console.error('获取数据失败:', error);
}
}
});
