本文介绍在百度智能小程序开发中,如何实现对于富文本组件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]})解决方案二:使用富文本解析工具-bdParsebdParse:改造自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链接列表 }) }}
实现步骤 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则为使用封装好的插件,节省开发时间。不过当一篇文章的内容较长时,通过转义产生新的组件会较多,增加内存和渲染时长。
建议您根据自己的实际使用场景选择使用不同的方法。
|