微信小程序显示后台文章副文本，图片和视频正常显示

解决方案:

1. 使用 wxParse 或 rich-text 组件: 这两种方式可以解析 HTML 字符串并渲染富文本内容，包括图片和视频。

2. 数据处理: 将后台返回的富文本数据进行处理，提取出图片和视频的链接，并将其转换成小程序支持的格式。

方案一：使用 rich-text 组件 (推荐)

优点:

• 无需引入第三方库
• 小程序原生支持，性能更优

代码示例:

<!-- pages/article/article.wxml -->
<view class="container"><rich-text nodes="{{articleContent}}"></rich-text>
</view>

// pages/article/article.js
Page({data: {articleContent: "",},onLoad: function (options) {this.getArticleDetail(options.id);},getArticleDetail: function (articleId) {// 模拟数据请求wx.request({url: `your-api-url/${articleId}`, // 替换成你的接口地址success: (res) => {const articleContent = this.processArticleContent(res.data.content);this.setData({articleContent,});},});},// 处理文章内容，将图片和视频链接转换为小程序支持的格式processArticleContent: function (content) {// 使用正则表达式匹配图片和视频链接const imgReg = /<img.*?src="(.*?)".*?>/g;const videoReg = /<video.*?src="(.*?)".*?>/g;// 替换图片链接content = content.replace(imgReg, (match, src) => {return `<image src="${src}" mode="widthFix"></image>`;});// 替换视频链接content = content.replace(videoReg, (match, src) => {return `<video src="${src}" controls></video>`;});return content;},
});

方案二：使用 wxParse 第三方库

优点:

• 功能强大，支持更多 HTML 标签和样式
• 使用简单，容易上手

步骤:

1. 安装 wxParse:

   npm install wxParse
   

2. 引入 wxParse:

   在需要使用 wxParse 的页面对应的 .js 文件中引入：

   var WxParse = require('../../wxParse/wxParse.js'); 
   // 将路径替换成 wxParse.js 文件在你项目中的实际路径
   

3. 使用 wxParse 解析富文本:

   // pages/article/article.js
   Page({data: {},onLoad: function (options) {this.getArticleDetail(options.id);},getArticleDetail: function (articleId) {wx.request({url: `your-api-url/${articleId}`, // 替换成你的接口地址success: (res) => {// 使用 wxParse 解析富文本内容WxParse.wxParse('article', 'html', res.data.content, this, 5);},});},
   });
   

4. 在 wxml 中渲染:

   <!-- pages/article/article.wxml -->
   <view class="container"><template is="wxParse" data="{{wxParseData:article.nodes}}"/> </view>
   

注意:

• 以上两种方案都需要根据实际情况对图片和视频链接进行处理，确保链接格式正确且资源可访问。
• 建议使用 HTTPS 链接，以避免在小程序中出现安全警告。
• 使用 wxParse 需要注意版本兼容性问题。

希望以上信息能够帮助你!