小程序富文本解析(无码)
功能 渲染微信公众号文章(搜索引擎) 市面上实现的方法 小程序内渲染: 方案一: 使用rich-text 坑: 图片不能控制; let content = res.data.entities.content.replace(/\<img/gi, '<img style="width:100%;height:auto" ') 替换了,模拟机是正常width:100%但是真机图片没有效果(华为v9,6.67,如果你的可以请告知) 有的数据渲染不出来 没有定位(猜想是有的标签渲染不出来); 所有这个方案pass 掉了,说一句rich-text速度还是可以,的不知道实现原理是什么,为什么说渲染速度,下文有提。 方案二: 使用wxParse 插件 因为之前使用过wxParse所有一开始,觉得渲染功能还是很简单的,BUT,并不是。 功能需要,文章在单独一个页面。从后台数在页面渲染出效果,还可以,但是有个console,Template `wxParse12` not found. 之前使用并未出现,只能定位下,最后发现,是渲染dom层级太深了导致,从GitHub https://github.com/icindy/wxParse/wiki/wxParse-%E5%A6%82%E4%BD%95%E9%87%8D%E5%A4%8D%E5%B5%8C%E5%A5%97%E6%A8%A1%E7%89%88 添加了几个后,菊花一紧,性能可能要崩。果然用真机一跑,打开第一篇文章还好,但是返回到列表就不对了,卡出翔,loadmore事件触发不了,再次点击文章title,半天进入不了详情页面,也是给跪了。。。 坑: 总结一下就是文章数据有点多,dom层级有点深,渲染有点慢,交互有点卡(公众号文章渲染层级能达到15+的深度) 方案三: 使用业务域名,webview组件 文章图片防盗链,后台不好处理,处理好了需要存自己服务器,需要和后台沟通 解决ing。。。 改下wxParse,把多余的绑定事件去掉,减少模板循环,(发现循环10以上的内容都是垃圾内容)。 尝试下wxParse小程序的插件,好像是基于rich-text的 与后台沟通页面渲染 16:56 ------------------------更新-------------------------- 修改wxparse,去掉了图片相关的事件,但是效果并不好, 然后调研了wxParser-plugin,用起来还可以,暂时发现的问题是包有点大,然后插件解析的页面,第二次进来会看到上次页面的内容,最好添加一个loading,等内容替换掉展示,其他的问题暂时没有,就暂时使用这个插件,接下来如果还有问题持续更细 18:00 -----------------------更新------------------------ 需要把\n替换掉否则会占一行,也是很奇怪,text不能设置height为0么,因为插件会把换行解析出来,用text包裹,然后f12尝试下把height设置成0,并没有奏效,不知道在代码里写会不会奏效,还是text就不能设置height为0,无所谓了,如果不想\n空占一行,请替换掉,wxparse好像没有这个。18:43 ----------------------更新------------------------ 项目中用了wepy,把文章展示提到了组件中,在组件config配置usingComponents 没有起作用需要在引用组件页面config,其他插件应该也是一样的。 2018/9/5 ---------------------更新--------------------- 发现一个瑕疵,图片没有懒加载,内容替换不奏效啊