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

解决方案:

  1. 使用 wxParserich-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 需要注意版本兼容性问题。

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

相关推荐
掘金安东尼12 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~14 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务17 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛17 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑20 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭27 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿31 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨40 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
racerun1 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter