钉钉开发平台 —H5微应用-- 图片浏览 api 示例

心已赠人 2024-04-20 09:02 58阅读 0赞

> **图片浏览器**
> 
> --------------------
> 
> **使用说明**
> 
> 调用此api，将进行预览图片。
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td> <p>客户端</p> </td> 
>    <td> <p>Android</p> </td> 
>    <td> <p>iOS</p> </td> 
>    <td> <p>PC</p> </td> 
>   </tr> 
>   <tr> 
>    <td> <p>支持说明</p> </td> 
>    <td> <p>支持</p> </td> 
>    <td> <p>支持</p> </td> 
>    <td> <p>2.7.0</p> </td> 
>   </tr> 
>  </tbody> 
> </table>
> 
>     dd.biz.util.previewImage({
>         urls: [String],//图片地址列表
>         current: String,//当前显示的图片链接
>         onSuccess : function(result) {
>             /**/
>         },
>         onFail : function(err) {}
>     })
> 
> **参数说明**
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td> <p>参数</p> </td> 
>    <td> <p>参数类型</p> </td> 
>    <td> <p>说明</p> </td> 
>   </tr> 
>   <tr> 
>    <td> <p>urls</p> </td> 
>    <td> <p>Array[String]</p> </td> 
>    <td> <p>图片地址列表</p> </td> 
>   </tr> 
>   <tr> 
>    <td> <p>current</p> </td> 
>    <td> <p>String</p> </td> 
>    <td> <p>当前显示的图片链接</p> </td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> **Andorid&iOS端示例 **          PC端示例
> 
> ![format_png][]
> 
> ![format_png 1][]

> 1. 引用js文件(https://ding-doc.dingtalk.com/doc\#/dev/swk0bg 钉钉开发平台开发文档)
> 
>     <script src="//g.alicdn.com/dingding/open-develop/1.6.9/dingtalk.js"></script>
> 
> 2. 图片预览 示例代码:
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <meta http-equiv="X-UA-Compatible" content="ie=edge">
>         <title>Document</title>
>     </head>
>     
>     <body>
>         <div id="div">
>           
>             <button type="button" onclick="DDimg()">图片预览</button>
>         </div>
>         <script src="//g.alicdn.com/dingding/open-develop/1.6.9/dingtalk.js"></script>
>         <script>
>            
>              //图片预览  
>              function DDimg() {
>                 dd.ready(function () {
>                     dd.biz.util.previewImage({
>                         urls: ["http://192.168.1.23/Html5/login.jpg","http://192.168.1.23/Html5/踏青《测试》.jpg","http://192.168.1.23/Html5/timg.jpg"],//图片地址列表
>                         current: "http://192.168.1.23/Html5/login.jpg",//当前显示的图片链接
>                         onSuccess : function(result) {
>                             /**/
>                         },
>                         onFail : function(err) {}
>                     })
>                 })
>     
>             }
>         </script>
>     </body>
>     
>     </html>
> 
>

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ueXVxdWUuY29tL2xhcmsvMjAxOC9wbmcvMjg1MjAvMTUyMjQ4NjE0NjAxNC0wOWYzOWM5Zi1kMGE0LTQ3MWMtYTBlNi02Y2EwNGU2N2RkOTcucG5nI2FsaWduPWxlZnQmZGlzcGxheT1pbmxpbmUmaGVpZ2h0PTM1NiZvcmlnaW5IZWlnaHQ9MzU2Jm9yaWdpbldpZHRoPTIwMCZzdGF0dXM9ZG9uZSZ3aWR0aD0yMDA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ueXVxdWUuY29tL2xhcmsvMjAxOC9wbmcvMjg1MjAvMTUyMjQ4NjEyODY1NS0zYjk1NDQ1Mi1kYzdlLTQ4NDctODEwMi1jMGMyMmI3NDExZDAucG5nI2FsaWduPWxlZnQmZGlzcGxheT1pbmxpbmUmaGVpZ2h0PTM1MiZvcmlnaW5IZWlnaHQ9MTI3NiZvcmlnaW5XaWR0aD0xODgyJnN0YXR1cz1kb25lJndpZHRoPTUxOQ?x-oss-process=image/format,png