收藏
评论

小程序富文本解析(无码)

功能

渲染微信公众号文章(搜索引擎)

市面上实现的方法

小程序内渲染:

方案一:

    使用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


---------------------更新---------------------

发现一个瑕疵,图片没有懒加载,内容替换不奏效啊

最后一次编辑于  2018-09-06  (未经腾讯允许,不得转载)
复制链接收藏赞 2

67 个评论

  • 长伴左手
    长伴左手
    2018-09-05

    这个我也遇到过,通常都是后台富文本长传了图片且格式为base64。这样就会导致前端拿到的数据非常庞大。我的解决方式是:让后台把图片base64格式转为网络路径。。

    2018-09-05
    赞同 11
    回复
  • 曜曜OvO
    曜曜OvO
    2018-09-05

    我们在使用wxparse插件的时候,如果文章比较长或者文章中含有大量的图片,会报『超出最大传输长度』错误,不知道楼主有没有遇到过?有没有解决方案呢?

    2018-09-05
    赞同
    回复 2
    • 刘乐
      刘乐
      2018-09-05

      wxParser-plugin么?通过公众平台添加的插件那个,不是外部引用的包。

      你说的这个问题我确实没遇到过,不知道你的文章能有多长,我渲染过一些公众号的文章也挺长的但是也没有问题。

      可以给你一个简易,把后台反的数据,截取下,截取成两部分,渲染两个wxparse试下 ,没有实际操作过,不过你可以试下

      2018-09-05
      赞同
      回复
    • .
      .
      2018-10-10

      请问一下wxParse插件解析a标签href为空 求解

      2018-10-10
      赞同
      回复
  • 你吼那么大声干什么
    你吼那么大声干什么
    2018-09-18

    在使用wxParse时,后台返回的数据没有被解析,而是显示了wxParse.js主函数中的“数据不能为空”,请问楼主有遇到过吗

    2018-09-18
    赞同
    回复 15
    • 刘乐
      刘乐
      2018-09-18

      这个没有

      2018-09-18
      赞同
      回复
    • 你吼那么大声干什么
      你吼那么大声干什么
      2018-09-18回复刘乐

      谢谢,已经解决了

      2018-09-18
      赞同
      回复
    • 刘乐
      刘乐
      2018-09-18回复你吼那么大声干什么

      嗯嗯,恭喜

      2018-09-18
      赞同
      回复
    • 你吼那么大声干什么
      你吼那么大声干什么
      2018-09-20回复刘乐

      使用wxparse时,假如是&amp;nbsp;好像就解析不了了?

      2018-09-20
      赞同
      回复
    • 刘乐
      刘乐
      2018-09-20回复你吼那么大声干什么


      &amp;我这可以解析出来,

      &nbsp也可以解析,我用的是小程序插件,看不到源码,wxparse没用测,感觉解析不出来,

      2018-09-20
      赞同
      回复
    查看更多(10)
  • 吴吴吴吴吴明
    吴吴吴吴吴明
    2018-09-19

    wxParse解析富文本,图片无法自适应屏幕宽度,遇到过吗?这个怎么解决,很头疼

    2018-09-19
    赞同
    回复 29
    • 吴吴吴吴吴明
      吴吴吴吴吴明
      2018-09-19

      如果我没用wepy框架,图片是可以自适应宽度的。但是用了wepy框架就不行了。

      2018-09-19
      赞同
      回复
    • 刘乐
      刘乐
      2018-09-19

      你用的是wxParse外部js包吧,

      可以替换后台返回数据,用repalce 把img 标签换成img style="width:100%" 这种,并不推荐

      你可以用下插件wxParse的插件  wx9d4d4ffa781ff3ac 在插件里搜索这个id 能搜到,wxparse 插件

      使用方法挺简单的,应该能解决你的问题



      2018-09-19
      赞同
      回复
    • 刘乐
      刘乐
      2018-09-19回复吴吴吴吴吴明

      wepy还能影响这个?图片不能自适应,应该是图片的width不是100%,是固定数值。

      实在是想不到为啥 wepy 还能影响到wxparse解析。

      2018-09-19
      赞同
      回复
    • 南栀傾寒
      南栀傾寒
      2018-12-26回复刘乐

      我用wxparse  把图片设置成了宽100%  为什么还是会有部分图片不显示  

      2018-12-26
      赞同
      回复
    • 刘乐
      刘乐
      2018-12-26回复南栀傾寒

      打开调试看图片是不是还有行内样式,还有看下包裹图片的容器宽度是不是100%,显示不全应该是图片宽度大于容器宽度,然后容器hidden了吧。

      2018-12-26
      赞同 11
      回复
    查看更多(24)
  • 吴吴吴吴吴明
    吴吴吴吴吴明
    2018-09-22

    wepy+wxparse,解析富文本,图片无法点击放大(原本的效果应该是点击图片,图片会全屏显示,并且可以左右切换)

    2018-09-22
    赞同
    回复 1
    • 刘乐
      刘乐
      2018-09-25

      建议使用微信插件版wxparse

      2018-09-25
      赞同
      回复
  • .
    .
    2018-10-10

    请问一下wxParse插件解析a标签href为空 求解

    2018-10-10
    赞同
    回复 2
    • 刘乐
      刘乐
      2018-10-10

      没太搞懂你的意思,如果a标签href值为空那解析出来的就是空的,但是为空也没事儿啊,又不能跳转。

      如果你要是想跳转,需要单独处理下,在tapWxParserLink 加跳转逻辑 就行,但是前提你用wxparse解析的数据含有对应跳转的数据跳到那,才能渲染到view标签上,然后在tapWxParserLink 获取到然后nav跳转。

      还是没太清楚啥问题,href为空就是元数据a标签href值为空

      2018-10-10
      赞同
      回复
    • .
      .
      2018-10-16

      原数据的a标签href是有值的 但是wxParse转义后href为空   像这种 <a href="www.baidu.com">百度</a>  解析后data-href就为空

      2018-10-16
      赞同
      回复
  • (ಡωಡ)hahaha
    (ಡωಡ)hahaha
    2018-12-13

        后台返回的数据,通过使用wxParse 得到 (其中的一部分)

    为什么页面没有展示出来

    2018-12-13
    赞同
    回复 9
    • 刘乐
      刘乐
      2018-12-13

      看一下dom结构,标签里面有没有内容,

      如果没有内容再看下appData数据里有没有内容,

      还是没有的话看看是不是dom结构层数太多了,wxParse渲染dom结构层级是有限制的太深了不能完全渲染

      2018-12-13
      赞同
      回复
    • (ಡωಡ)hahaha
      (ಡωಡ)hahaha
      2018-12-13回复刘乐

      Dom标签里没有内容, appData数据里面有内容

      2018-12-13
      赞同
      回复
    • 刘乐
      刘乐
      2018-12-13回复(ಡωಡ)hahaha

      你看下你的dom结构是不是太深了?

      2018-12-13
      赞同
      回复
    • 刘乐
      刘乐
      2018-12-13回复(ಡωಡ)hahaha

      dom结构层数是不是 太多了

      2018-12-13
      赞同
      回复
    • (ಡωಡ)hahaha
      (ಡωಡ)hahaha
      2018-12-13回复刘乐

      如果是太深了,怎么办

      2018-12-13
      赞同
      回复
    查看更多(4)
  • A(lwb)
    A(lwb)
    05-10

    怎么解决?使用wxParse时

    05-10
    赞同
    回复 1
    • 刘乐
      刘乐
      05-15

      配置的不对吧


      05-15
      赞同
      回复