富文本解析 wxParse 解析数据造成页面假死

问题描述

小程序中总有富文本解析的场景，比如：头条的终端页。我们的终端页使用了 wxParse, 但是由于 wxParse有些小问题，并且项目使用 mpvue，所以把
wxParse 拉到本地做了一些魔改，但是依然遇到性能瓶颈，数据过多造成页面假死，相对于小程序原生的 rich-text 富文本解析组件；wxparse 的功能性更丰富，支持 video；

解决方案

由于数据过多而造成页面假死，那就从数据层的角度考虑，把数据分段加载，关键部分代码如下：

<template><!--基础元素--><div class="wxParse" :class="className" v-if="!loading"><block v-for="(node,index) of nodes" :key="index"><wxParseTemplate :node="node"/></block></div>
</template><script>
let query = null;
let scrollTime = null;
let nodesData = [];
export default {data() {return {nodes:[], // 计算属性中的 nodes 放到 data 里};},onPageScroll(e){if (!nodesData.length) return;if (scrollTime) clearTimeout(scrollTime);scrollTime = setTimeout( ()=> {query.exec((res) => {clearTimeout(scrollTime);console.log('res');console.log(res);console.log(e);if (e.scrollTop > (res[0].height/2)) {console.log('我要加载');this.nodes.push(...nodesData.splice(0,15));}})},100);},onLoad() {nodesData = [];console.log('wxParse start');query = wx.createSelectorQuery();query.select('.wxParse').boundingClientRect();nodesData = this.getNodes();this.nodes.push(...nodesData.splice(0,25));},onUnload () {nodesData = [];if (scrollTime) clearTimeout(scrollTime);},methods: {getNodes () {const {content,noData,imageProp,startHandler,endHandler,charsHandler,} = this;const parseData = content || noData;const customHandler = {start: startHandler,end: endHandler,chars: charsHandler,};const results = HtmlToJson(parseData, customHandler, imageProp, this);this.imageUrls = results.imageUrls;return results.nodes;},},
}
</script>

上面方法的思路是在页面滑动的时候对数据进行分段加载，但是通过实践，发现如果终端页要跳转其他页面，返回之后还是会把剩余数据加载完，依旧造成页面卡死，还有问题就是刚进入页面解析数据，比如有贴底按钮无法点击（此时在解析数据）。最终还是重新自写了个 parse，如果对于需求比较简单的，推荐小程序原生的
rich-text，如果数据较少， wxParse 还行，如果数据量过大，慎用！！！

富文本解析 wxParse 解析数据造成页面假死相关推荐

微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
在上一篇微信小程序开发(十二)富文本插件wxParse的使用中,我已经使用了wxParse插件.下午有时间就仔细的把玩了一下,发现了一个bug. 问题描述仔细看报错,我们会发现是wxParse.js ...
分批次插入mysql:一次性插入mysql两万以上数据造成数据库假死
强烈推荐一个大神的人工智能的教程:http://www.captainbed.net/zhanghan 项目距离上线的日期越来越近了,需要规范一下数据库中的数据,就需要从前端页面上导入系统数据到mys ...
关于微信小程序富文本编辑器回显数据初始化editor的时候，页面滑动到最底部了
** 一个页面高度超出一屏时,底部使用了富文本编辑器组件editor之后,如果在进入页面时对editor进行了赋值,页面会滚动到底部控制页面不滚动到底部?** 这个问题的关键是进入页面给富文本赋值造 ...
微信小程序开发(十二)富文本插件wxParse的使用
昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...
解决百度富文本框中添加的表格页面获取后不显示表格边框的问题
在百度富文本框添加表格后可以右击设置表格边框是否可见,设为可见就可以显示了转载于:https://www.cnblogs.com/missguolf/p/9076535.html
微信小程序解析html富文本插件wxparse的使用
第一步:下载把wxparse文件放到根目录下第二步:引入<import src="../../wxParse/wxParse.wxml"/> 在xx.wxml页面 ...
微信小程序-后台使用富文本编辑器返回数据，小程序编译富文本编辑器返回的数据
最近遇到一个功能,后台管理系统添加商品的时候,商品详情是使用富文本编辑器添加的.小程序获取的商品详情数据是含有<p>标签的. 后台管理系统百度了多种方法,也试用了很多方法,最终觉得wxP ...
微信小程序富文本组件wxParse
项目地址:https://github.com/icindy/wxParse 1 打开项目地址,下载项目文件 2 将wxParse文件夹粘贴到项目 3 新建页面 "pages/home/ri ...
微信小程序-富文本插件wxParse
一.准备工作 github下载waParse插件,地址:https://github.com/icindy/wxParse 放到小程序目录下:和utils平级二.使用 //WXML页面 <im ...

富文本解析 wxParse 解析数据造成页面假死

富文本解析 wxParse 解析数据造成页面假死

问题描述

解决方案

富文本解析 wxParse 解析数据造成页面假死相关推荐

最新文章

热门文章