用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(')')) {
      // 提取图片URL
      const 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

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