调用微信SDK预览图片

最新推荐文章于 2023-11-03 16:33:23 发布

原创最新推荐文章于 2023-11-03 16:33:23 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #app #css3 #微信 #sdk

移动端h5页面同时被 2 个专栏收录

13 篇文章

订阅专栏

javascript

13 篇文章

订阅专栏

本文介绍如何在网页中集成微信SDK以实现图片预览功能。通过引入微信提供的SDK并配置必要的参数，如appId、timestamp等，可以轻松启用微信内置浏览器的图片预览功能。示例展示了使用JavaScript触发图片预览的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入微信sdk js
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
2.准备阶段
wx.config({
debug: false,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: '<?php echo $signPackage["timestamp"];?>',
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList:['previewImage']  //把要调用的微信sdk接口全都写到该数组里边
});
3.调用微信sdk
$(function(){
           $(".div02 img").click(function(){
           var index = $(this).index();
           var imgList = [
                  'http://www.juevent.com/assets/wcj/form/img/img01.png',
                  'http://www.juevent.com/assets/wcj/form/img/img02.png',
                  'http://www.juevent.com/assets/wcj/form/img/img03.png',
                  'http://www.juevent.com/assets/wcj/form/img/img04.png',
                  'http://www.juevent.com/assets/wcj/form/img/img05.png',
                  'http://www.juevent.com/assets/wcj/form/img/img07.png',
                  'http://www.juevent.com/assets/wcj/form/img/img08.png',
                  'http://www.juevent.com/assets/wcj/form/img/img09.png',
                  'http://www.juevent.com/assets/wcj/form/img/img10.png',
                  'http://www.juevent.com/assets/wcj/form/img/img11.png'
            ];
            wx.previewImage({
                  current: imgList[index],
                  urls:  imgList
            });
           })
         })