如何使用富文本組件實現點擊後圖片預覽

本文做者：無雙，GitHub連接： https://github.com/wushuangzh...

本文介紹在百度智能小程序開發中，如何實現對於富文本組件rich-text中的圖片進行預覽。歡迎開發者分享您在開發智能小程序中的經驗心得，咱們會經過智能小程序技術團隊的社區渠道把你的經驗分享給更多開發者朋友，投稿地址：smartprogramtech@baidu.com。

在小程序中，能夠經過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 事件。

實現步驟

1. 獲取用戶點擊具體位置

   在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]
      })

   更多關於在圖片渲染時和用戶滑動操做時對高度變化問題的處理，你們可將下述代碼片斷導入開發者工具中，預覽效果： 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 支持圖片預覽
  經過循環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連接列表
      })
    }
  }

實現步驟

1. 在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爲單位)

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;
   }

更多詳細內容可將下述代碼片斷導入開發者工具中，預覽效果：
swanide://fragment/80138c592c5052fe0e8938c27c501fce1580812312899

總結

本文爲您提供的兩種方法中：

• 在 rich-text 組件上綁定 tap 事件的方法，優勢在於提高性能，咱們知道渲染的節點越多實際上是越消耗性能的，此方案可避免生成更多的節點，縮短頁面渲染時長。

  除了圖片以外，其實只要咱們拿到用戶須要操做的位置和所需元素的位置，就能夠經過使用這種方法實現點擊圖片、播放視頻、點擊或複製文字等功能。

• 使用富文本解析工具-bdParse則爲使用封裝好的插件，節省開發時間。不過當一篇文章的內容較長時，經過轉義產生新的組件會較多，增長內存和渲染時長。

建議您根據本身的實際使用場景選擇使用不一樣的方法。智能小程序開發者社區文章連接

最後，感謝各位開發者積極投身百度小程序的開發當中，在開發過程當中有任何問題均可以在社區與官方或其餘開發者進行互動，也可將您的意見發送郵件至smartprogramtech@baidu.com，期待您的參與！