搜狗資源平臺-圖片查看器調用幫助

基于對移動搜索領域用戶的深度調研及多維度訪談分析，圖片支持手勢縮放、滑動切換等交互操作已成為用戶群體的普遍認知與核心需求。圖片查看功能作為搜索移動端理想體驗的關鍵環節，能夠顯著提升用戶對圖文信息的獲取效率與沉浸感。為滿足合作方快速實現圖片瀏覽功能的需求，搜狗資源平臺正式推出圖片查看器組件，該組件具備輕量化、易接入的特性，旨在幫助合作方以低成本方式優化圖片交互體驗。同時，平臺期望各合作方嚴格遵循搜索理想體驗標準，共同構建信息豐富、操作流暢、用戶友好的移動搜索生態體系。

組件能力

通過JS API注入必要參數后，H5頁面內的圖片可在QQ瀏覽器移動端實現多重交互功能：用戶點擊圖片即可調起高清大圖預覽模式，支持在單張大圖與多圖輪播間自由切換，并可通過單指縮放、雙指縮放及滑動回收等精細化手勢操作，靈活控制圖片的展示細節，確保用戶獲得沉浸式的視覺瀏覽體驗。

接入方案

##### 調用方法

核心調用接口為 `browser.app.openPhotoBrowser(urls, index, [style])`，通過傳入特定參數實現圖片查看器的功能調用。

##### 調用時機

該接口應在用戶主動點擊頁面內圖片元素時觸發，確保交互響應的即時性與精準性，符合用戶對圖片查看操作的習慣性預期。

##### 參數說明

- urls（Array）：需預覽的圖片資源鏈接數組，支持傳入多張圖片的URL，用于構建圖片輪播列表。

- index（Number）：預覽起始索引值，從0開始對應urls數組中的首個圖片元素，用于指定用戶首次查看的圖片位置。

- style（Number）：圖片查看器樣式參數，可通過不同數值調用預設的視覺主題，適配合作頁面的整體設計風格。

##### 代碼示例

在HTML頁面中引入以下腳本以加載API接口：

```html

```

獲取需預覽的圖片地址并構造數組（以下為React示例，合作方可根據實際框架調整）：

```javascript

var sectionInfo = this.props.sectionInfo;

var imgUrls = sectionInfo.vImgUrls;

var prevImgUrls = [];

_.each(imgUrls, function (item) {

prevImgUrls.push(item.sImgUrl);

});

```

調用接口（建議在setTimeout中執行以確保DOM渲染完成，并對API存在性進行校驗）：

```javascript

setTimeout(function() {

if (window.browser && window.browser.app && window.browser.app.openPhotoBrowser) {

browser.app.openPhotoBrowser(prevImgUrls, 0, 0);

}

}, 0);

```

##### 注意事項

該組件能力僅在QQ瀏覽器移動端環境中生效，可通過檢測UserAgent中是否包含'MQQBrowser'標識來判斷當前環境是否支持。合作方需自行實現圖片元素的點擊事件綁定（如通過事件代理或直接綁定），若在接入過程中遇到技術問題，可向技術團隊反饋郵箱 zhangzhang@sogou-inc.com 提交需求與建議。

來源：搜狗資源平臺