用AI帮忙，开发刷题小程序：微信小程序中实现Markdown图片解析与渲染功能详解

用AI帮忙，开发刷题小程序：微信小程序中实现Markdown图片解析与渲染功能详解

在开发微信小程序在线考试系统时，我们经常会遇到需要在题目内容或解析中显示图片的场景。为了提升用户体验，我们需要支持在文本中直接嵌入Markdown格式的图片，并在正确的位置渲染显示。本文将详细介绍如何在微信小程序中实现这一功能。

效果预览

功能需求分析

在软考真题练习系统中，许多题目和解析都包含图片，这些图片通常以Markdown语法格式存储在后台数据库中。例如：

这是题目内容![图片描述](http://example.com/image.png)这是图片后的文本内容

我们的目标是：

1. 解析包含Markdown图片语法的文本内容
2. 按照原始顺序显示文本和图片
3. 保持内容的语义连贯性和视觉美观性

技术实现方案

1. 核心思路

我们将采用以下步骤实现该功能：

1. 创建工具函数解析包含Markdown图片的文本
2. 将解析后的内容转换为文本和图片的混合数组
3. 在WXML模板中循环渲染这些元素
4. 添加适当的样式美化显示效果

2. 工具函数实现

首先，我们在 examUtils.ts 文件中添加解析函数：

/*** 解析包含Markdown图片的内容，生成混合的文本和图片数组* @param content 包含Markdown图片的内容* @returns 混合的文本和图片数组*/
static parseContentWithImages(content: string): Array<{type: 'text' | 'image', content: string}> {if (!content) return [];const result: Array<{type: 'text' | 'image', content: string}> = [];// 匹配Markdown图片语法: ![alt](url)const parts = content.split(/(!\[.*?\]\(.*?\))/g);parts.forEach(part => {if (part.startsWith('![') && part.includes('](') && part.endsWith(')')) {// 提取图片URLconst urlMatch = part.match(/!\[.*?\]\((.*?)\)/);if (urlMatch && urlMatch[1]) {result.push({type: 'image',content: urlMatch[1]});}} else if (part) {// 文本内容result.push({type: 'text',content: part});}});return result;
}

这个函数将输入的文本按Markdown图片语法分割，并生成一个包含文本和图片信息的数组。

3. 组件逻辑修改

接下来，我们需要修改题目组件的逻辑文件 exam-question.ts，添加对内容的解析处理：

properties: {question: {type: Object,value: {},observer: function(newVal: any) {// 当question数据变化时，解析其中的内容和图片if (newVal && (newVal.content || newVal.answerAnalysis)) {const parsedContent = getApp().globalData.examUtils.parseContentWithImages(newVal.content || '');const parsedAnalysis = getApp().globalData.examUtils.parseContentWithImages(newVal.answerAnalysis || '');this.setData({'question.parsedContent': parsedContent,'question.parsedAnalysis': parsedAnalysis});}}}
}

这里我们使用了 observer 监听器，在题目数据变化时自动解析内容和解析文本。

4. WXML模板修改

在 exam-question.wxml 文件中，我们需要修改内容显示部分：

<!-- 题目内容 -->
<view class="question-content"><text user-select decode>{{question.questionNo}}. </text><block wx:for="{{question.parsedContent}}" wx:key="index"><text wx:if="{{item.type === 'text'}}" user-select decode>{{item.content}}</text><image wx:elif="{{item.type === 'image'}}" class="content-image" src="{{item.content}}" mode="widthFix" lazy-load="true"></image></block>
</view><!-- 解析区域 -->
<view class="answer-section {{question.showExplanation ? 'show' : ''}}"><text class="answer-title">题目解析</text><block wx:for="{{question.parsedAnalysis}}" wx:key="index"><text wx:if="{{item.type === 'text'}}" user-select decode class="answer-analysis">{{item.content}}</text><image wx:elif="{{item.type === 'image'}}" class="analysis-image" src="{{item.content}}" mode="widthFix" lazy-load="true"></image></block>
</view>

这样就实现了文本和图片的混合显示，保持了它们在原始内容中的顺序。

5. 样式优化

在 exam-question.less 文件中添加图片样式：

.question-content {font-size: 28rpx;font-weight: 500;color: #333;line-height: 1.4;padding: 20rpx 10rpx 10rpx 10rpx;.content-image {width: 100%;margin: 10rpx 0;border-radius: 10rpx;}
}.answer-section {// ... 其他样式.analysis-image {width: 100%;margin: 10rpx 0;border-radius: 10rpx;}
}

功能测试

完成上述修改后，当题目内容或解析中包含如下格式的Markdown图片时：

这是题目内容![图片描述](http://example.com/image.png)这是图片后的文本内容

系统会自动解析并在正确位置显示图片，效果如下：

1. 文本内容正常显示
2. 图片在原始位置渲染显示
3. 图片后的内容继续正常显示
4. 整体内容保持语义连贯性

总结

通过以上步骤，我们成功实现了在微信小程序中解析和渲染Markdown图片的功能。该方案具有以下优点：

1. 保持了内容的原始顺序和语义连贯性
2. 实现了文本和图片的混合显示
3. 代码结构清晰，易于维护和扩展
4. 具有良好的用户体验

这个功能可以广泛应用于需要图文混排的场景，如在线教育、内容展示等微信小程序项目中。开发者可以根据实际需求对解析逻辑和显示样式进行调整和优化。

---

项目源码地址：https://gitee.com/alioo/ruankao

想要体验小程序的朋友可以通过以下二维码进行访问：