本文做者：無雙，GitHub連接：https://github.com/wushuangzhao/blog/issues/1css
在小程序中，能夠經過rich-text 組件用來顯示富文本，可是智能小程序中會屏蔽rich-text內部全部節點的事件（參見 rich-text文檔中的bug&tip部分說明），咱們沒法經過直接綁定 rich-text 裏面的圖片點擊事件來實現對應業務邏輯。 當咱們須要對 rich-text 中的圖片進行點擊預覽時，該如何實現呢？node
本文爲您介紹了以下兩種方案：git
-
方案一：在 rich-text組件上綁定tap事件。github
-
方案二：使用富文本解析工具-bdParse(本組件爲開發者貢獻組件)，經過將節點類型轉義成獨立的元素，好比，
<img>=><image>，而後在 image 組件上綁定點擊事件，從而實現點擊圖片預覽的功能。npm
解決方案一： 在 rich-text 組件上綁定 tap 事件。
實現原理
rich-text 組件內雖然屏蔽了全部節點的事件，但提供了默認事件的支持，包括：tap、touchstart、touchmove、touchcancel、touchend 和 longtap，這裏咱們使用到了 tap 事件。json
實現步驟
-
獲取用戶點擊具體位置小程序
在swan文件中，使用tap事件，獲取到點擊內容的 rich-text 座標 (x,y)，即用戶點擊的具體位置。markdown
<rich-text nodes="{{content}}" bindtap="getClickInfo"></rich-text>
-
獲取圖片渲染後所在位置app
在獲取 rich-text 具體位置以後，咱們可在js文件中，經過 createSelectorQuery() 進行查詢，獲取圖片渲染後位置。
swan.createSelectorQuery().selectAll('.rich-text-img').fields({rect: true}).exec((res)=> {
console.log(res)
}
)
這麼作的目的是確認點擊範圍：假設圖片是在屏幕距離頂部是 126px，圖片底部距離頂部爲 375px，則只要用戶點擊的區域在這個範圍內，就是點擊了該圖片，此時默認寬度爲100%。
-
在js文件中實現圖片預覽
知道了圖片的位置和用戶點擊的位置以後，咱們就能夠調用 previewImage 來實現預覽啦。
swan.previewImage({
urls: this.data.images,
current: this.data.images[imageIndex]
})
更多關於在圖片渲染時和用戶滑動操做時對高度變化問題的處理，你們可將下述代碼片斷導入開發者工具中，預覽效果： swanide://fragment/ff1c48cca302b06c598aa4128dc6ece51584432236472
解決方案二：使用富文本解析工具-bdParse
bdParse：改造自wxparse，支持html轉換成智能小程序富文本節點。本組件爲開發者貢獻組件。
實現原理
首先執行npm install @smt-lib/bdparse安裝小程序lib庫，安裝完成後在對應的文件中能夠看到bdparse已經內置了不少功能，其中包括 bdparse 支持將 html 節點轉換爲 json 格式：
- bdparse 支持 html 節點轉換爲 json 格式 bdParse.swan 文件中已經存放了不少組件的模版，其中包括經過 bdParse.js 將獲取到的 html 節點轉換爲 json 格式：
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 支持圖片預覽 經過循環 template 模版的方式將獲取到的 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兩種屬性，開發者可根據實際狀況使用。 屬性說明以下：
| 屬性名 | 類型 | 必填 | 默認值 | 說明 |
|---|---|---|---|---|
| raw | String | 是 | '' | 須要轉換展示的原始內容 |
| format | String | 否 | 'html' | 須要轉換內容的原始格式，可選有：'html', 'markdown' |
| padding | Number | 否 | 5 | 渲然出來界面的左右留白(px爲單位) |
- 在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> - 在css文件中設置樣式：
.custom-img { width: 100% !important; }
更多詳細內容可將下述代碼片斷導入開發者工具中，預覽效果：
swanide://fragment/80138c592c5052fe0e8938c27c501fce1580812312899
總結
本文爲您提供的兩種方法中：
- 在 rich-text 組件上綁定 tap 事件的方法，優勢在於提高性能，咱們知道渲染的節點越多實際上是越消耗性能的，此方案可避免生成更多的節點，縮短頁面渲染時長。
除了圖片以外，其實只要咱們拿到用戶須要操做的位置和所需元素的位置，就能夠經過使用這種方法實現點擊圖片、播放視頻、點擊或複製文字等功能。
- 使用富文本解析工具-bdParse則爲使用封裝好的插件，節省開發時間。不過當一篇文章的內容較長時，經過轉義產生新的組件會較多，增長內存和渲染時長。
建議您根據本身的實際使用場景選擇使用不一樣的方法。