功夫码

小程序rich-text组件常见使用的问题

晓峰 时间:2019-08-22 08:51:22 阅读:16

rich-text组件为微信小程序富文本解析器,该组件支持富文本解析,但需要对照一套自定义规则的 JOSN 数据格式,API 返回的富文本需要前端做数据转换。

日常开发中该组件的主要用途就是解析html标签,但是在使用中也是有一些问题

这种情况下后端如果不返回富文本,前端去在小程序去处理是比较麻烦的,还得定个规则,前端再写好样式拼接起来。如果后端直接给你返回富文本,用这个去解析可以直接搞定。

Bug & Tip

  1. tipnodes 不推荐使用 String 类型,性能会有所下降。

  2. tiprich-text 组件内屏蔽所有节点的事件。

  3. tipattrs 属性不支持 id ,支持 class 。

  4. tipname 属性大小写不敏感。

  5. tip: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。

  6. tipimg 标签仅支持网络图片。

  7. tip: 如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

该组件能解析几乎所有的html标签,其中tableimg标签支持width,问题就出现了,设定了固定的width,除非是百分比,否则还能自适应各个屏幕吗?另外img只支持网络图片,这个大家可以理解,毕竟代码不可能连图片资源一起带过来。

rich-text组件图片不显示

多半这种问题产生的原因就在于你没有使用网络图片,解决方法如下,就把图片的路径换成绝对地址。

python代码处理如下

content = '<p><img class="size-full wp-image-20763 aligncenter" src="/uploads/eb-52019_400-300.jpg" alt="" width="400" /></p><p style="text-align: center;"> EB-5新规出台,投资项目如何选?</strong></span></p>'
content = content.replace('"/uploads/', '"https://www.diandian100.cn/uploads/')

php代码处理如下

$content = '<p><img class="size-full wp-image-20763 aligncenter" src="/uploads/eb-52019_400-300.jpg" alt="" width="400" /></p><p style="text-align: center;"> EB-5新规出台,投资项目如何选?</strong></span></p>'
$content = str_replace('"/uploads/', '"https://www.diandian100.cn/uploads/', $content)

服务器后台先对图片地址进行处理,修改为绝对的网络地址


rich-text组件图片宽度超出了页面和图片之间有间隙

图片超出了页面,设置最大宽度为100%就可以解决,图片有间隙,把 style样式的:display:block来处理。

处理方法有两种,

方法1 服务器端处理

php代码处理如下

$content = str_replace("<img ", "<img style='max-width:100%;height:auto;display:block;'", $content);

python代码处理如下

content = content.replace("<img ", "<img style='max-width:100%;height:auto;display:block;'");

方法2 小程序处处理

 that.setData({
          content: res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
        })
 
//或
 
 that.setData({
          content: res.data.contents.replace('<img ', '<img style="max-width:100%;height:auto;display:block;"')          
        })





本文来源:功夫码(gongfuma.com)

声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有,未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

回到顶部