搜狗资源平台-图片查看器调用帮助

基于对移动搜索领域用户的深度调研及多维度访谈分析，图片支持手势缩放、滑动切换等交互操作已成为用户群体的普遍认知与核心需求。图片查看功能作为搜索移动端理想体验的关键环节，能够显著提升用户对图文信息的获取效率与沉浸感。为满足合作方快速实现图片浏览功能的需求，搜狗资源平台正式推出图片查看器组件，该组件具备轻量化、易接入的特性，旨在帮助合作方以低成本方式优化图片交互体验。同时，平台期望各合作方严格遵循搜索理想体验标准，共同构建信息丰富、操作流畅、用户友好的移动搜索生态体系。

组件能力

通过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 提交需求与建议。

来源：搜狗资源平台