收藏
评论

小程序里面使用wxParse解析富文本


  1. 在部分安卓手机上会出现白屏的情况且有些ios手机上图文混排上,图片显示不出问题

    解决:把插件里面的console.dir去掉即可(原因在于安卓手机无法解析console.dir)


  2. 有些图片解析出来下面会有滚动条的存在

    解决:首先我们找到wxPrase文件夹里面的wxParse.js文件,打开之后找wxAutoImageCal方法,给定具体的值,或者乘上对应的值即可。(原因在于,该图片给的宽度为屏幕宽度,而我们给的外层view宽度是小于屏幕宽度的,因而会有滚动条的存在)

  3. 图片点击预览后,原图片宽高变大和变小的情况(即初次进入页面,图片点击预览后,和未点击预览时,宽高不一致的情况)

  4. 解决: 在wxParse.wxml内找到

    <template name="wxParseImg"></template>

    内面的style="width:{{item.width}}px;"改成 style="width:{{item.attr.width}}px;"即可。


    原因: 点击图片预览后,item里面的width不见了,而item.attr.width存在,而item.width不见后,走的是mode=“widthFix”,会造成原图片和预览后图片宽高不一致的情况。


  5. 安卓手机上滑动页面,会有卡顿的情况

  6. 解决:插件wxParse.wxss里面给的是:

    view{

       word-break:break-all;

       overflow:auto;

    }

    上面文本里面存在段落的高度上有滚动条的情况,所以才会有卡顿,滑动不流畅的情况存在;

    view{

       word-break:break-all;

       height: auto;

       overflow: hidden;

    }

    改成这样便可完美解决卡顿情况。





最后一次编辑于  2018-07-11
收藏

10 个评论

  • 满目山河
    满目山河
    2022-03-28

    你好 有解析后的回调吗 想复制富文本中的文字



    2022-03-28
    赞同
    回复
  • ℳℓ 辉
    ℳℓ 辉
    2021-10-11

    为什么加测后会自动换行?怎么解决?

    2021-10-11
    赞同
    回复
  • Puck
    Puck
    2020-07-01

    我们后台 直接是res.data然后就是内容了 导致我这里还多显示了<!DOCTYPE html> title style啥的 咋解决

    2020-07-01
    赞同
    回复 1
    • Puck
      Puck
      2020-07-01
      我这里可以让后台改成res.data.detail吗  让他多加个detail
      2020-07-01
      回复
  • 🍄
    🍄
    2020-01-03

    有个问题 wxParse的页面跳转时间如果绑在图片上,只执行图片预览而不能触发跳转事件,有没有大神能帮忙解决下的!!??

    2020-01-03
    赞同
    回复 1
    • 朝儿
      朝儿
      2020-03-02
      找到点击图片事件,把里面的预览去掉换成跳转事件就可以了
      2020-03-02
      回复
  • 听书人
    听书人
    2019-10-23

    我的怎么安文档操作用不了??


    2019-10-23
    赞同
    回复 11
    • 朝儿
      朝儿
      2019-10-23
      wxParse文件引入了吗
      2019-10-23
      回复
    • 听书人
      听书人
      2019-10-23回复朝儿
      就是这个导入不进去
      2019-10-23
      回复
    • 听书人
      听书人
      2019-10-23
      2019-10-23
      回复
    • 朝儿
      朝儿
      2019-10-23回复听书人
      引入路径不对
      2019-10-23
      回复
    • 听书人
      听书人
      2019-10-23回复朝儿
      路径是对的
      2019-10-23
      回复
    查看更多(6)
  • 雷神
    雷神
    2018-08-14

    ios,wxparse 解析公众号里面的文章,图片不能正常显示

    2018-08-14
    赞同
    回复 11
    • 朝儿
      朝儿
      2018-08-14

      不正常显示是显示不出来还是什么情况,图片格式是webp格式的吗

      2018-08-14
      回复
    • 雷神
      雷神
      2018-08-14回复朝儿

      tp=webp

      就是webp格式的,有没啥解决方案呢

      2018-08-14
      回复
    • 朝儿
      朝儿
      2018-08-14回复雷神

      把webp替换掉就可以了,wxparse解析webp格式图片有问题

      2018-08-14
      回复
    • 雷神
      雷神
      2018-08-14回复朝儿

      在安卓上面没有问题,替换成什么?

      2018-08-14
      回复
    • 雷神
      雷神
      2018-08-14回复雷神

      在安卓上面没有问题,替换成什么?

      2018-08-14
      回复
    查看更多(6)
  • 2018-07-25

    我遇到的情况比你这复杂10倍不止

    2018-07-25
    赞同
    回复 5
    • 朝儿
      朝儿
      2018-07-25

      你可以把你遇到的坑和解决的问题发在社区上,大家都可以学习下啊

      2018-07-25
      回复
    • 2018-07-25

      我在边是做在线作业的,后端服务端将试题中的图片全部转换成了 img标签,而且是没有宽高的,图片存在题干、题目选项、答案、解析中。在显示的时候图片完全缩到一起去了,我这边是通过重写 wxParseImgLoad事件,来设置图片的大小

      2018-07-25
      回复
    • 2018-07-25

      我在边是做在线作业的,后端服务端将试题中的图片全部转换成了 img标签,而且是没有宽高的,图片存在题干、题目选项、答案、解析中。在显示的时候图片完全缩到一起去了,我这边是通过重写 wxParseImgLoad事件,来设置图片的大小

      困难1、图片太多,加载慢的时候影响页面布局,会触发到scroll-view 的下拉事件,造成加载更多死循环

              2、图片与内容之间的关联

      3、同一个页面不同题目中相同图片在加载设置

      解决思路

      1、在做原始数据转格式时候wxParseData 约定好 from 后面方便定位具体图片设置

      2、在做转格式时候记录下没道题的图片信息 用数组保存 并附带是否加载属性

      3、在wxparseImgload 方法中计算图片大小的同事,处理2中的数据

      4、根据2中的数据的变化设置资源(图片)加载的遮罩层进度条,加载完成后就关闭(该步骤是为了防止用户继续操作页面,照成事件延迟)

      2018-07-25
      回复
    • 朝儿
      朝儿
      2018-07-25回复

      组件image提供的mode属性,wxParse组件的image模板里面有,是不起作用吗

      2018-07-25
      回复
    • 2018-07-25

      亲测,不可以


      2018-07-25
      回复
  • 小程序开发者
    小程序开发者
    2018-07-19

    2018-07-19
    赞同
    回复
  • Thinking80s
    Thinking80s
    2018-07-17

    mark

    2018-07-17
    赞同
    回复
  • xxx  is undefined !
    xxx is undefined !
    2018-07-10

    不是已经有富文本组件了

    2018-07-10
    赞同
    回复 1
    • 朝儿
      朝儿
      2018-07-10

      rich-text组件对富文本支持不太全面,而且图片没法预览,而wxParse可图片预览,当然还有其他的优点,看个人需求吧,只是建议及意见

      2018-07-10
      回复
登录 后发表内容