微信小程序使用 wxParse 加载过慢问题

本文讲述了在小程序中遇到的一个问题,即使用wxParse组件加载大量富文本内容导致弹窗显示延迟,影响用户体验。作者通过切换到小程序官方的<rich-text>组件成功解决了这个问题,实现了内容的快速加载,并确保了弹窗在任何情况下都能即时关闭,提升了用户交互的流畅性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前提

由于业务需求,我需要在一个弹窗中展示完整的隐私条款信息,这个隐私条款采用富文本的方式引入,而且条款内容非常非常多,我最初采用的是一个自定义组件,采用 wxParse 加载富文本,代码如下:

<wxParse nodes="{{ richText.content }}" />

示意图:
弹窗

问题

  • 因富文本内容过长导致加载过程缓慢,弹窗显示后需要等待一会儿才能加载完成(注意这是在已经拉取后台数据后出现的问题,也就是纯属富文本加载问题),导致用户体验感很差。
  • 弹窗在拉取后台数据后出现时,内容未加载完成时点击取消按钮出现延时问题,需要等待内容加载完成才能关闭弹窗。正常情况下应该是无论内容是否加载完成,均可以关闭弹窗。

解决方法

使用小程序官方组件 <rich-text> 替换 <wxParse>,替换后弹窗内容在拉取数据后正常显示,不会有加载问题;点击按钮可以正常关闭弹窗。
代码如下:

 <rich-text
   class="rich-text"
   nodes="{{ memberPolicy }}"
/>

END

小程序<rich-text>官方文档地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值