请选择 进入手机版 | 继续访问电脑版
查看: 667|回复: 0

[工具答疑] 如何使用富文本组件实现点击后图片预览

[复制链接]
发表于 2020-4-21 18:34:42 | 显示全部楼层 |阅读模式
本文介绍在百度智能小程序开发中,如何实现对于富文本组件rich-text中的图片进行预览。在小程序中,可以通过rich-text 组件用来显示富文本,但是智能小程序中会屏蔽rich-text内部所有节点的事件(参见 rich-text文档中的bug&tip部分说明),我们无法通过直接绑定 rich-text 里面的图片点击事件来实现对应业务逻辑。 当我们需要对 rich-text 中的图片进行点击预览时,该如何实现呢?
本文为您介绍了如下两种方案:
  • 方案一:在 rich-text组件上绑定tap事件。
  • 方案二:使用富文本解析工具-bdParse(本组件为开发者贡献组件),通过将节点类型转义成独立的元素,比如,<img>=> <image>,然后在 image 组件上绑定点击事件,从而实现点击图片预览的功能。
解决方案一: 在 rich-text 组件上绑定 tap 事件。实现原理:
rich-text 组件内虽然屏蔽了所有节点的事件,但提供了默认事件的支持,包括:tap、touchstart、touchmove、touchcancel、touchend 和 longtap,这里我们使用到了 tap 事件。
实现步骤
  • 获取用户点击具体位置
在swan文件中,使用tap事件,获取到点击内容的 rich-text 坐标 (x,y),即用户点击的具体位置。
<rich-text nodes="{{content}}" bindtap="getClickInfo"></rich-text>
    2. 获取图片渲染后所在位置
在获取 rich-text 具体位置之后,我们可在js文件中,通过 createSelectorQuery() 进行查询,获取图片渲染后位置。
swan.createSelectorQuery().selectAll('.rich-text-img').fields({rect: true}).exec((res)=> {    console.log(res) })
这么做的目的是确认点击范围:假设图片是在屏幕距离顶部是 126px,图片底部距离顶部为 375px,则只要用户点击的区域在这个范围内,就是点击了该图片,此时默认宽度为100%。
    3. 在js文件中实现图片预览
知道了图片的位置和用户点击的位置之后,我们就可以调用 previewImage 来实现预览啦。
swan.previewImage({urls: this.data.images,current: this.data.images[imageIndex]})
更多关于在图片渲染时和用户滑动操作时对高度变化问题的处理,大家可以在开发者工具中预览效果
解决方案二:使用富文本解析工具-bdParse
bdParse:改造自wxparse,支持html转换成智能小程序富文本节点。本组件为开发者贡献组件。
实现原理
首先执行 npm install @smt-lib/bdparse 安装小程序 lib 库,安装完成后在对应的文件中可以看到 bdparse 已经内置了很多功能,其中包括 bdparse 支持将 html 节点转换为 json 格式:
  • bdparse 支持 html 节点转换为 json 格式 bdParse.swan 文件中已经存放了很多组件的模版,其中包括通过 bdParse.js 将获取到的 html 节点转换为 json 格式:n        nodes:[                {             "node": "element",             "tag": "img",             "index": "0.2",             "tagType": "inline",             "classStr": "custom-img",             "attr": {              "src": "http://5b0988e595225.cdn.sohucs.com/images/20180605/3cb1f7e7bdae4c5aa4e7aa62ede169ab.jpeg",              "class": "custom-img"             },             "imgIndex": 0,             "from": "article"            }        ]
  • bdParse 支持图片预览 通过循环templeta模版的方式将获取到的 json 格式的数据绑定到当前的image组件上,如 bdParse.swan 中 的 bdParseImg图片模版:<template name="bdParseImg">  <image class="{{item.classStr}} bdParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{item.attr.src}}"  data-idx="{{item.imgIndex}}" src="{{item.attr.src}}"  bindload="bdParseImgLoad" bindtap="bdParseImgTap" mode="aspectFit" style="width:{{item.width}}px;height:{{item.height}}px;"/></template>​
  • bdParse 支持图片点击事件 在bdParse.js中已内置了图片点击事件:// 图片点击事件function bdParseImgTap(e) {  var that = this;  var nowImgUrl = e.target.dataset.src;  var tagFrom = e.target.dataset.from;  if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {   swan.previewImage({      current: nowImgUrl, // 当前显示图片的http链接      urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表    })  }}​
实现步骤
  • 在js文件中将原始内容转换为需要展现的内容。
        Page({            data: {                raw:[   //需要转换展现的原始内容                    '<div>',                    '<span>我是HTML代码</span>',                    '<span>',                    '内容',                    '</span>',                    '<img src="https://b.bdstatic.com/miniapp/images/demo-dog.png" class="custom-img" />',                    '</div>'                ].join('\n')            }});
这里我们使用了raw,承载需要转换展现的原始内容,除了这个属性,bdpars还提供了format和padding两种属性,开发者可根据实际情况使用。 属性说明列表如下:
      2. 在swan文件中使用 bdparse 插件。
        <view class="card-area">            <view class="top-description border-bottom">原文</view>            <view class="text-content">{{raw}}</view> </view>        <view class="card-area {{converted ? 'show': 'hide'}}">            <view class="top-description border-bottom">转换后的内容</view>            <view class="text-content">                <bdparse raw={{raw}} />            </view>        </view>
       3.在css文件中设置样式:
```        .custom-img {                   width: 100% !important;        }```
更多详细内容可在开发者工具中预览效果
总结
本文为您提供的两种方法中:
  • 在 rich-text 组件上绑定 tap 事件的方法,优点在于提升性能,我们知道渲染的节点越多其实是越消耗性能的,此方案可避免生成更多的节点,缩短页面渲染时长。除了图片之外,其实只要我们拿到用户需要操作的位置和所需元素的位置,就可以通过使用这种方法实现点击图片、播放视频、点击或复制文字等功能。
  • 使用富文本解析工具-bdParse则为使用封装好的插件,节省开发时间。不过当一篇文章的内容较长时,通过转义产生新的组件会较多,增加内存和渲染时长。
建议您根据自己的实际使用场景选择使用不同的方法。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|Archiver|Baidu Inc.

GMT+8, 2020-11-28 14:48 , Processed in 0.192718 second(s), 16 queries .

Powered by Discuz! X3.2

© 2001-2011 Comsenz Inc.

返回顶部