微信JS SDK Demo
wchat 2017-03-12 01:11:29

参考文档：

http://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B6

微信官方的SDK demo：http://203.195.235.76/jssdk/ 

在线生成签名校验：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

所有JS列表：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#63

 

踩坑记录：http://www.yoyo88.cn/study/vue/260.html 

 

 

 

DEMO页面：

http://demo.open.weixin.qq.com/jssdk

Jssdk demo001.png

 


示例代码：

http://demo.open.weixin.qq.com/jssdk/sample.zip

备注：链接中包含php、java、nodejs以及python的示例代码供第三方参考，第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。 

 

微信JS-SDK（企业号版）

注：微信企业号需认证才可以使用分享的自定义参数，详情见官方文档

 

使用：

PHP Code复制内容到剪贴板
  1. <?php  
  2. use wechat\components\weixin\jssdk;  
  3.   
  4. $weChatAsset = WeChatAsset::register($this)->baseUrl;  
  5.   
  6. $appid = Yii::$app->config->get("CorpID");  
  7. $key = Yii::$app->config->get("Secret");  
  8.   
  9. $jssdk = new jssdk($appid, $key);  
  10. $sign = $jssdk->getSignPackage();  
  11. ?>  
  12.   
  13.     <!--  微信JSSDK  -->  
  14.     <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  
  15.     <script type="text/javascript">  
  16.         // 微信配置  
  17.         wx.config({  
  18.             debug: false,  
  19.             appId: "<?=$sign['appId']?>", // 你的AppID  
  20.             timestamp: "<?=$sign['timestamp']?>", //上一步生成的时间戳  
  21.             nonceStr: "<?=$sign['nonceStr']?>", //上一步中的字符串  
  22.             signature: "<?=$sign['signature']?>", //上一步生成的签名  
  23.             jsApiList: [  
  24.                 'checkJsApi',  
  25.                 'onMenuShareTimeline', //分享到朋友圈  
  26.                 'onMenuShareAppMessage', //分享给朋友  
  27.                 'onMenuShareQQ', //分享到QQ  
  28.                 'onMenuShareWeibo', //分享到腾讯微博  
  29.                 'onMenuShareQZone', //分享到QQ空间  
  30.             ]  
  31.         });  
  32.   
  33.         var share_config = {  
  34.             "imgUrl": "<?=Yii::$app->request->hostInfo?>/images/shareLogo.png",//分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。  
  35.             "desc" : "摘要测试",//摘要,如果分享到朋友圈的话，不显示摘要。  
  36.             "title" : "测试标题",//分享卡片标题  
  37.             "link": "<?=$sign['url']?>",//分享出去后的链接，这里可以将链接设置为另一个页面。  
  38.             trigger: function (res) {  
  39. //                alert('用户点击分享');  
  40.             },  
  41.             "success":function(){  
  42.                 //分享成功后的回调函数  
  43.                 alert("分享成功");  
  44.             },  
  45.             'cancel': function () {  
  46.                 // 用户取消分享后执行的回调函数  
  47.                 alert("您已取消分享");  
  48.   
  49.             }  
  50.         };  
  51.         wx.ready(function() {  
  52.             wx.onMenuShareAppMessage(share_config);  
  53.             wx.onMenuShareAppMessage(share_config);  
  54.             wx.onMenuShareTimeline(share_config);  
  55.             wx.onMenuShareQQ(share_config);  
  56.             wx.onMenuShareWeibo(share_config);  
  57.             wx.onMenuShareQZone(share_config);  
  58.         });  
  59.         wx.error(function(res){  
  60.             // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。  
  61.             console.log("报错");  
  62.             console.log(res);  
  63.         });  
  64.     </script>  

 

 

微信JS-SDK（公众号版）

PHP Code复制内容到剪贴板
  1. <?php  
  2. require_once ECMS_PATH."skin/weixin/class/jssdk.php";  
  3. $jssdk = new JSSDK("appid", "key");  
  4. $signPackage = $jssdk->GetSignPackage();  
  5. ?>  
  6. <script src="[!--news.url--]skin/weixin/js/jweixin-1.2.0.js" type="text/javascript"></script>  
  7. <script>  
  8. wx.config({  
  9.     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
  10.     appId: '<?php echo $signPackage["appId"];?>',  
  11.     timestamp: '<?php echo $signPackage["timestamp"];?>',  
  12.     nonceStr: '<?php echo $signPackage["nonceStr"];?>',  
  13.     signature: '<?php echo $signPackage["signature"];?>',  
  14.     jsApiList: [  
  15.         'getLocation',  
  16.         'scanQRCode'  
  17.     ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
  18. });  
  19. wx.ready(function(){  
  20.     // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。  
  21.     wx.getLocation({  
  22.         timestamp: 0, // 位置签名时间戳，仅当需要兼容6.0.2版本之前时提供  
  23.         nonceStr: '', // 位置签名随机串，仅当需要兼容6.0.2版本之前时提供  
  24.         addrSign: '', // 位置签名，仅当需要兼容6.0.2版本之前时提供，详见附录4  
  25.         success: function (res) {  
  26.             var longitude = res.longitude; // 纬度，浮点数，范围为90 ~ -90  
  27.             var latitude = res.latitude; // 经度，浮点数，范围为180 ~ -180。  
  28.             var speed = res.speed; // 速度，以米/每秒计  
  29.             var accuracy = res.accuracy; // 位置精度  
  30.         }  
  31.     });  
  32.     wx.scanQRCode({  
  33.         desc: 'scanQRCode desc',  
  34.         needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，  
  35.         scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有  
  36.         success: function (res) {  
  37.             var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果  
  38.         }  
  39.     });  
  40. });  
  41. </script>  

 

 

 

 一、JS部分

JavaScript Code复制内容到剪贴板
  1. wx.ready(function () {  
  2.   // 1 判断当前版本是否支持指定 JS 接口，支持批量判断  
  3.   document.querySelector('#checkJsApi').onclick = function () {  
  4.     wx.checkJsApi({  
  5.       jsApiList: [  
  6.         'getNetworkType',  
  7.         'previewImage'  
  8.       ],  
  9.       success: function (res) {  
  10.         alert(JSON.stringify(res));  
  11.       }  
  12.     });  
  13.   };  
  14.   
  15.   // 2. 分享接口  
  16.   // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口  
  17.   document.querySelector('#onMenuShareAppMessage').onclick = function () {  
  18.     wx.onMenuShareAppMessage({  
  19.       title: '互联网之子',  
  20.       desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',  
  21.       link: 'http://movie.douban.com/subject/25785114/',  
  22.       imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',  
  23.       trigger: function (res) {  
  24.         alert('用户点击发送给朋友');  
  25.       },  
  26.       success: function (res) {  
  27.         alert('已分享');  
  28.       },  
  29.       cancel: function (res) {  
  30.         alert('已取消');  
  31.       },  
  32.       fail: function (res) {  
  33.         alert(JSON.stringify(res));  
  34.       }  
  35.     });  
  36.     alert('已注册获取“发送给朋友”状态事件');  
  37.   };  
  38.   
  39.   // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口  
  40.   document.querySelector('#onMenuShareTimeline').onclick = function () {  
  41.     wx.onMenuShareTimeline({  
  42.       title: '互联网之子',  
  43.       link: 'http://movie.douban.com/subject/25785114/',  
  44.       imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',  
  45.       trigger: function (res) {  
  46.         alert('用户点击分享到朋友圈');  
  47.       },  
  48.       success: function (res) {  
  49.         alert('已分享');  
  50.       },  
  51.       cancel: function (res) {  
  52.         alert('已取消');  
  53.       },  
  54.       fail: function (res) {  
  55.         alert(JSON.stringify(res));  
  56.       }  
  57.     });  
  58.     alert('已注册获取“分享到朋友圈”状态事件');  
  59.   };  
  60.   
  61.   // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口  
  62.   document.querySelector('#onMenuShareQQ').onclick = function () {  
  63.     wx.onMenuShareQQ({  
  64.       title: '互联网之子',  
  65.       desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',  
  66.       link: 'http://movie.douban.com/subject/25785114/',  
  67.       imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',  
  68.       trigger: function (res) {  
  69.         alert('用户点击分享到QQ');  
  70.       },  
  71.       complete: function (res) {  
  72.         alert(JSON.stringify(res));  
  73.       },  
  74.       success: function (res) {  
  75.         alert('已分享');  
  76.       },  
  77.       cancel: function (res) {  
  78.         alert('已取消');  
  79.       },  
  80.       fail: function (res) {  
  81.         alert(JSON.stringify(res));  
  82.       }  
  83.     });  
  84.     alert('已注册获取“分享到 QQ”状态事件');  
  85.   };  
  86.     
  87.   // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口  
  88.   document.querySelector('#onMenuShareWeibo').onclick = function () {  
  89.     wx.onMenuShareWeibo({  
  90.       title: '互联网之子',  
  91.       desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',  
  92.       link: 'http://movie.douban.com/subject/25785114/',  
  93.       imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',  
  94.       trigger: function (res) {  
  95.         alert('用户点击分享到微博');  
  96.       },  
  97.       complete: function (res) {  
  98.         alert(JSON.stringify(res));  
  99.       },  
  100.       success: function (res) {  
  101.         alert('已分享');  
  102.       },  
  103.       cancel: function (res) {  
  104.         alert('已取消');  
  105.       },  
  106.       fail: function (res) {  
  107.         alert(JSON.stringify(res));  
  108.       }  
  109.     });  
  110.     alert('已注册获取“分享到微博”状态事件');  
  111.   };  
  112.   
  113.   
  114.   // 3 智能接口  
  115.   var voice = {  
  116.     localId: '',  
  117.     serverId: ''  
  118.   };  
  119.   // 3.1 识别音频并返回识别结果  
  120.   document.querySelector('#translateVoice').onclick = function () {  
  121.     if (voice.localId == '') {  
  122.       alert('请先使用 startRecord 接口录制一段声音');  
  123.       return;  
  124.     }  
  125.     wx.translateVoice({  
  126.       localId: voice.localId,  
  127.       complete: function (res) {  
  128.         if (res.hasOwnProperty('translateResult')) {  
  129.           alert('识别结果：' + res.translateResult);  
  130.         } else {  
  131.           alert('无法识别');  
  132.         }  
  133.       }  
  134.     });  
  135.   };  
  136.   
  137.   // 4 音频接口  
  138.   // 4.2 开始录音  
  139.   document.querySelector('#startRecord').onclick = function () {  
  140.     wx.startRecord({  
  141.       cancel: function () {  
  142.         alert('用户拒绝授权录音');  
  143.       }  
  144.     });  
  145.   };  
  146.   
  147.   // 4.3 停止录音  
  148.   document.querySelector('#stopRecord').onclick = function () {  
  149.     wx.stopRecord({  
  150.       success: function (res) {  
  151.         voice.localId = res.localId;  
  152.       },  
  153.       fail: function (res) {  
  154.         alert(JSON.stringify(res));  
  155.       }  
  156.     });  
  157.   };  
  158.   
  159.   // 4.4 监听录音自动停止  
  160.   wx.onVoiceRecordEnd({  
  161.     complete: function (res) {  
  162.       voice.localId = res.localId;  
  163.       alert('录音时间已超过一分钟');  
  164.     }  
  165.   });  
  166.   
  167.   // 4.5 播放音频  
  168.   document.querySelector('#playVoice').onclick = function () {  
  169.     if (voice.localId == '') {  
  170.       alert('请先使用 startRecord 接口录制一段声音');  
  171.       return;  
  172.     }  
  173.     wx.playVoice({  
  174.       localId: voice.localId  
  175.     });  
  176.   };  
  177.   
  178.   // 4.6 暂停播放音频  
  179.   document.querySelector('#pauseVoice').onclick = function () {  
  180.     wx.pauseVoice({  
  181.       localId: voice.localId  
  182.     });  
  183.   };  
  184.   
  185.   // 4.7 停止播放音频  
  186.   document.querySelector('#stopVoice').onclick = function () {  
  187.     wx.stopVoice({  
  188.       localId: voice.localId  
  189.     });  
  190.   };  
  191.   
  192.   // 4.8 监听录音播放停止  
  193.   wx.onVoicePlayEnd({  
  194.     complete: function (res) {  
  195.       alert('录音（' + res.localId + '）播放结束');  
  196.     }  
  197.   });  
  198.   
  199.   // 4.8 上传语音  
  200.   document.querySelector('#uploadVoice').onclick = function () {  
  201.     if (voice.localId == '') {  
  202.       alert('请先使用 startRecord 接口录制一段声音');  
  203.       return;  
  204.     }  
  205.     wx.uploadVoice({  
  206.       localId: voice.localId,  
  207.       success: function (res) {  
  208.         alert('上传语音成功，serverId 为' + res.serverId);  
  209.         voice.serverId = res.serverId;  
  210.       }  
  211.     });  
  212.   };  
  213.   
  214.   // 4.9 下载语音  
  215.   document.querySelector('#downloadVoice').onclick = function () {  
  216.     if (voice.serverId == '') {  
  217.       alert('请先使用 uploadVoice 上传声音');  
  218.       return;  
  219.     }  
  220.     wx.downloadVoice({  
  221.       serverId: voice.serverId,  
  222.       success: function (res) {  
  223.         alert('下载语音成功，localId 为' + res.localId);  
  224.         voice.localId = res.localId;  
  225.       }  
  226.     });  
  227.   };  
  228.   
  229.   // 5 图片接口  
  230.   // 5.1 拍照、本地选图  
  231.   var images = {  
  232.     localId: [],  
  233.     serverId: []  
  234.   };  
  235.   document.querySelector('#chooseImage').onclick = function () {  
  236.     wx.chooseImage({  
  237.       success: function (res) {  
  238.         images.localId = res.localIds;  
  239.         alert('已选择 ' + res.localIds.length + ' 张图片');  
  240.       }  
  241.     });  
  242.   };  
  243.   
  244.   // 5.2 图片预览  
  245.   document.querySelector('#previewImage').onclick = function () {  
  246.     wx.previewImage({  
  247.       current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',  
  248.       urls: [  
  249.         'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',  
  250.         'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',  
  251.         'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'  
  252.       ]  
  253.     });  
  254.   };  
  255.   
  256.   // 5.3 上传图片  
  257.   document.querySelector('#uploadImage').onclick = function () {  
  258.     if (images.localId.length == 0) {  
  259.       alert('请先使用 chooseImage 接口选择图片');  
  260.       return;  
  261.     }  
  262.     var i = 0, length = images.localId.length;  
  263.     images.serverId = [];  
  264.     function upload() {  
  265.       wx.uploadImage({  
  266.         localId: images.localId[i],  
  267.         success: function (res) {  
  268.           i++;  
  269.           alert('已上传：' + i + '/' + length);  
  270.           images.serverId.push(res.serverId);  
  271.           if (i < length) {  
  272.             upload();  
  273.           }  
  274.         },  
  275.         fail: function (res) {  
  276.           alert(JSON.stringify(res));  
  277.         }  
  278.       });  
  279.     }  
  280.     upload();  
  281.   };  
  282.   
  283.   // 5.4 下载图片  
  284.   document.querySelector('#downloadImage').onclick = function () {  
  285.     if (images.serverId.length === 0) {  
  286.       alert('请先使用 uploadImage 上传图片');  
  287.       return;  
  288.     }  
  289.     var i = 0, length = images.serverId.length;  
  290.     images.localId = [];  
  291.     function download() {  
  292.       wx.downloadImage({  
  293.         serverId: images.serverId[i],  
  294.         success: function (res) {  
  295.           i++;  
  296.           alert('已下载：' + i + '/' + length);  
  297.           images.localId.push(res.localId);  
  298.           if (i < length) {  
  299.             download();  
  300.           }  
  301.         }  
  302.       });  
  303.     }  
  304.     download();  
  305.   };  
  306.   
  307.   // 6 设备信息接口  
  308.   // 6.1 获取当前网络状态  
  309.   document.querySelector('#getNetworkType').onclick = function () {  
  310.     wx.getNetworkType({  
  311.       success: function (res) {  
  312.         alert(res.networkType);  
  313.       },  
  314.       fail: function (res) {  
  315.         alert(JSON.stringify(res));  
  316.       }  
  317.     });  
  318.   };  
  319.   
  320.   // 8 界面操作接口  
  321.   // 8.1 隐藏右上角菜单  
  322.   document.querySelector('#hideOptionMenu').onclick = function () {  
  323.     wx.hideOptionMenu();  
  324.   };  
  325.   
  326.   // 8.2 显示右上角菜单  
  327.   document.querySelector('#showOptionMenu').onclick = function () {  
  328.     wx.showOptionMenu();  
  329.   };  
  330.   
  331.   // 8.3 批量隐藏菜单项  
  332.   document.querySelector('#hideMenuItems').onclick = function () {  
  333.     wx.hideMenuItems({  
  334.       menuList: [  
  335.         'menuItem:readMode', // 阅读模式  
  336.         'menuItem:share:timeline', // 分享到朋友圈  
  337.         'menuItem:copyUrl' // 复制链接  
  338.       ],  
  339.       success: function (res) {  
  340.         alert('已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');  
  341.       },  
  342.       fail: function (res) {  
  343.         alert(JSON.stringify(res));  
  344.       }  
  345.     });  
  346.   };  
  347.   
  348.   // 8.4 批量显示菜单项  
  349.   document.querySelector('#showMenuItems').onclick = function () {  
  350.     wx.showMenuItems({  
  351.       menuList: [  
  352.         'menuItem:readMode', // 阅读模式  
  353.         'menuItem:share:timeline', // 分享到朋友圈  
  354.         'menuItem:copyUrl' // 复制链接  
  355.       ],  
  356.       success: function (res) {  
  357.         alert('已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');  
  358.       },  
  359.       fail: function (res) {  
  360.         alert(JSON.stringify(res));  
  361.       }  
  362.     });  
  363.   };  
  364.   
  365.   // 8.5 隐藏所有非基本菜单项  
  366.   document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {  
  367.     wx.hideAllNonBaseMenuItem({  
  368.       success: function () {  
  369.         alert('已隐藏所有非基本菜单项');  
  370.       }  
  371.     });  
  372.   };  
  373.   
  374.   // 8.6 显示所有被隐藏的非基本菜单项  
  375.   document.querySelector('#showAllNonBaseMenuItem').onclick = function () {  
  376.     wx.showAllNonBaseMenuItem({  
  377.       success: function () {  
  378.         alert('已显示所有非基本菜单项');  
  379.       }  
  380.     });  
  381.   };  
  382.   
  383.   // 8.7 关闭当前窗口  
  384.   document.querySelector('#closeWindow').onclick = function () {  
  385.     wx.closeWindow();  
  386.   };  
  387.   
  388.   // 9 微信原生接口  
  389.   // 9.1.1 扫描二维码并返回结果  
  390.   document.querySelector('#scanQRCode0').onclick = function () {  
  391.     wx.scanQRCode({  
  392.       desc: 'scanQRCode desc'  
  393.     });  
  394.   };  
  395.   // 9.1.2 扫描二维码并返回结果  
  396.   document.querySelector('#scanQRCode1').onclick = function () {  
  397.     wx.scanQRCode({  
  398.       needResult: 1,  
  399.       desc: 'scanQRCode desc',  
  400.       success: function (res) {  
  401.         alert(JSON.stringify(res));  
  402.       }  
  403.     });  
  404.   };  
  405.   
  406.   // 10 微信支付接口  
  407.   // 10.1 发起一个支付请求  
  408.   document.querySelector('#chooseWXPay').onclick = function () {  
  409.     wx.chooseWXPay({  
  410.       timestamp: 1414723227,  
  411.       nonceStr: 'noncestr',  
  412.       package: 'addition=action_id%3dgaby1234%26limit_pay%3d&bank_type=WX&body=innertest&fee_type=1&input_charset=GBK¬ify_url=http%3A%2F%2F120.204.206.246%2Fcgi-bin%2Fmmsupport-bin%2Fnotifypay&out_trade_no=1414723227818375338&partner=1900000109&spbill_create_ip=127.0.0.1&total_fee=1&sign=432B647FE95C7BF73BCD177CEECBEF8D',  
  413.       paySign: 'bd5b1933cda6e9548862944836a9b52e8c9a2b69'  
  414.     });  
  415.   };  
  416.   
  417.   // 11.3  跳转微信商品页  
  418.   document.querySelector('#openProductSpecificView').onclick = function () {  
  419.     wx.openProductSpecificView({  
  420.       productId: 'pDF3iY0ptap-mIIPYnsM5n8VtCR0'  
  421.     });  
  422.   };  
  423.   
  424.   // 12 微信卡券接口  
  425.   // 12.1 添加卡券  
  426.   document.querySelector('#addCard').onclick = function () {  
  427.     wx.addCard({  
  428.       cardList: [  
  429.         {  
  430.           cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',  
  431.           cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'  
  432.         },  
  433.         {  
  434.           cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',  
  435.           cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'  
  436.         }  
  437.       ],  
  438.       success: function (res) {  
  439.         alert('已添加卡券：' + JSON.stringify(res.cardList));  
  440.       }  
  441.     });  
  442.   };  
  443.   
  444.   // 12.2 选择卡券  
  445.   document.querySelector('#chooseCard').onclick = function () {  
  446.     wx.chooseCard({  
  447.       cardSign: '97e9c5e58aab3bdf6fd6150e599d7e5806e5cb91',  
  448.       timestamp: 1417504553,  
  449.       nonceStr: 'k0hGdSXKZEj3Min5',  
  450.       success: function (res) {  
  451.         alert('已选择卡券：' + JSON.stringify(res.cardList));  
  452.       }  
  453.     });  
  454.   };  
  455.   
  456.   // 12.3 查看卡券  
  457.   document.querySelector('#openCard').onclick = function () {  
  458.     alert('您没有该公众号的卡券无法打开卡券。');  
  459.     wx.openCard({  
  460.       cardList: [  
  461.       ]  
  462.     });  
  463.   };  
  464.   
  465.   var shareData = {  
  466.     title: '微信JS-SDK DEMO',  
  467.     desc: '微信JS-SDK,帮助第三方为用户提供更优质的移动web服务',  
  468.     link: 'http://www.yoyo88.cn/study/wchat/88.html',  
  469.     imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0'  
  470.   };  
  471.   wx.onMenuShareAppMessage(shareData);  
  472.   wx.onMenuShareTimeline(shareData);  
  473. });  
  474.   
  475. wx.error(function (res) {  
  476.   alert(res.errMsg);  
  477. });  

 

二、HTML调用

PHP Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>微信JS-SDK Demo</title>  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">  
  7.   <link rel="stylesheet" href="http://demo.open.weixin.qq.com/jssdk/css/style.css?ts=1420774989">  
  8. </head>  
  9. <body ontouchstart="">  
  10. <div class="wxapi_container">  
  11.     <div class="wxapi_index_container">  
  12.       <ul class="label_box lbox_close wxapi_index_list">  
  13.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-basic">基础接口</a></li>  
  14.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-share">分享接口</a></li>  
  15.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-image">图像接口</a></li>  
  16.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-voice">音频接口</a></li>  
  17.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-smart">智能接口</a></li>  
  18.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-device">设备信息接口</a></li>  
  19.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-location">地理位置接口</a></li>  
  20.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-webview">界面操作接口</a></li>  
  21.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-scan">微信扫一扫接口</a></li>  
  22.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-shopping">微信小店接口</a></li>  
  23.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-card">微信卡券接口</a></li>  
  24.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-pay">微信支付接口</a></li>  
  25.       </ul>  
  26.     </div>  
  27.     <div class="lbox_close wxapi_form">  
  28.       <h3 id="menu-basic">基础接口</h3>  
  29.       <span class="desc">判断当前客户端是否支持指定JS接口</span>  
  30.       <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>  
  31.   
  32.       <h3 id="menu-share">分享接口</h3>  
  33.       <span class="desc">获取“分享到朋友圈”按钮点击状态及自定义分享内容接口</span>  
  34.       <button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>  
  35.       <span class="desc">获取“分享给朋友”按钮点击状态及自定义分享内容接口</span>  
  36.       <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>  
  37.       <span class="desc">获取“分享到QQ”按钮点击状态及自定义分享内容接口</span>  
  38.       <button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>  
  39.       <span class="desc">获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口</span>  
  40.       <button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>  
  41.   
  42.       <h3 id="menu-image">图像接口</h3>  
  43.       <span class="desc">拍照或从手机相册中选图接口</span>  
  44.       <button class="btn btn_primary" id="chooseImage">chooseImage</button>  
  45.       <span class="desc">预览图片接口</span>  
  46.       <button class="btn btn_primary" id="previewImage">previewImage</button>  
  47.       <span class="desc">上传图片接口</span>  
  48.       <button class="btn btn_primary" id="uploadImage">uploadImage</button>  
  49.       <span class="desc">下载图片接口</span>  
  50.       <button class="btn btn_primary" id="downloadImage">downloadImage</button>  
  51.   
  52.       <h3 id="menu-voice">音频接口</h3>  
  53.       <span class="desc">开始录音接口</span>  
  54.       <button class="btn btn_primary" id="startRecord">startRecord</button>  
  55.       <span class="desc">停止录音接口</span>  
  56.       <button class="btn btn_primary" id="stopRecord">stopRecord</button>  
  57.       <span class="desc">播放语音接口</span>  
  58.       <button class="btn btn_primary" id="playVoice">playVoice</button>  
  59.       <span class="desc">暂停播放接口</span>  
  60.       <button class="btn btn_primary" id="pauseVoice">pauseVoice</button>  
  61.       <span class="desc">停止播放接口</span>  
  62.       <button class="btn btn_primary" id="stopVoice">stopVoice</button>  
  63.       <span class="desc">上传语音接口</span>  
  64.       <button class="btn btn_primary" id="uploadVoice">uploadVoice</button>  
  65.       <span class="desc">下载语音接口</span>  
  66.       <button class="btn btn_primary" id="downloadVoice">downloadVoice</button>  
  67.   
  68.       <h3 id="menu-smart">智能接口</h3>  
  69.       <span class="desc">识别音频并返回识别结果接口</span>  
  70.       <button class="btn btn_primary" id="translateVoice">translateVoice</button>  
  71.   
  72.       <h3 id="menu-device">设备信息接口</h3>  
  73.       <span class="desc">获取网络状态接口</span>  
  74.       <button class="btn btn_primary" id="getNetworkType">getNetworkType</button>  
  75.   
  76.       <h3 id="menu-location">地理位置接口</h3>  
  77.       <span class="desc">使用微信内置地图查看位置接口</span>  
  78.       <button class="btn btn_primary" id="openLocation">openLocation</button>  
  79.       <span class="desc">获取地理位置接口</span>  
  80.       <button class="btn btn_primary" id="getLocation">getLocation</button>  
  81.   
  82.       <h3 id="menu-webview">界面操作接口</h3>  
  83.       <span class="desc">隐藏右上角菜单接口</span>  
  84.       <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button>  
  85.       <span class="desc">显示右上角菜单接口</span>  
  86.       <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button>  
  87.       <span class="desc">关闭当前网页窗口接口</span>  
  88.       <button class="btn btn_primary" id="closeWindow">closeWindow</button>  
  89.       <span class="desc">批量隐藏功能按钮接口</span>  
  90.       <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button>  
  91.       <span class="desc">批量显示功能按钮接口</span>  
  92.       <button class="btn btn_primary" id="showMenuItems">showMenuItems</button>  
  93.       <span class="desc">隐藏所有非基础按钮接口</span>  
  94.       <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>  
  95.       <span class="desc">显示所有功能按钮接口</span>  
  96.       <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>  
  97.   
  98.       <h3 id="menu-scan">微信扫一扫</h3>  
  99.       <span class="desc">调起微信扫一扫接口</span>  
  100.       <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>  
  101.       <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回结果)</button>  
  102.   
  103.       <h3 id="menu-shopping">微信小店接口</h3>  
  104.       <span class="desc">跳转微信商品页接口</span>  
  105.       <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>  
  106.   
  107.       <h3 id="menu-card">微信卡券接口</h3>  
  108.       <span class="desc">批量添加卡券接口</span>  
  109.       <button class="btn btn_primary" id="addCard">addCard</button>  
  110.       <span class="desc">调起适用于门店的卡券列表并获取用户选择列表</span>  
  111.       <button class="btn btn_primary" id="chooseCard">chooseCard</button>  
  112.       <span class="desc">查看微信卡包中的卡券接口</span>  
  113.       <button class="btn btn_primary" id="openCard">openCard</button>  
  114.   
  115.       <h3 id="menu-pay">微信支付接口</h3>  
  116.       <span class="desc">发起一个微信支付请求</span>  
  117.       <button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>  
  118.     </div>  
  119.   </div>  
  120. </body>  
  121. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> </script>  
  122. <script>  
  123.   wx.config({  
  124.       debug: false,  
  125.       appId: 'wxf8b4f85f3a794e77',  
  126.       timestamp: 1420774989,  
  127.       nonceStr: '2nDgiWM7gCxhL8v0',  
  128.       signature: '1f8a6552c1c99991fc8bb4e2a818fe54b2ce7687',  
  129.       jsApiList: [  
  130.         'checkJsApi',  
  131.         'onMenuShareTimeline',  
  132.         'onMenuShareAppMessage',  
  133.         'onMenuShareQQ',  
  134.         'onMenuShareWeibo',  
  135.         'hideMenuItems',  
  136.         'showMenuItems',  
  137.         'hideAllNonBaseMenuItem',  
  138.         'showAllNonBaseMenuItem',  
  139.         'translateVoice',  
  140.         'startRecord',  
  141.         'stopRecord',  
  142.         'onRecordEnd',  
  143.         'playVoice',  
  144.         'pauseVoice',  
  145.         'stopVoice',  
  146.         'uploadVoice',  
  147.         'downloadVoice',  
  148.         'chooseImage',  
  149.         'previewImage',  
  150.         'uploadImage',  
  151.         'downloadImage',  
  152.         'getNetworkType',  
  153.         'openLocation',  
  154.         'getLocation',  
  155.         'hideOptionMenu',  
  156.         'showOptionMenu',  
  157.         'closeWindow',  
  158.         'scanQRCode',  
  159.         'chooseWXPay',  
  160.         'openProductSpecificView',  
  161.         'addCard',  
  162.         'chooseCard',  
  163.         'openCard'  
  164.       ]  
  165.   });  
  166. </script>  
  167. <script src="http://demo.open.weixin.qq.com/jssdk/js/api-6.1.js?ts=1420774989"> </script>  
  168. </html>  

 

 

 

本文来自于：http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html

上一篇 微信企业号回调模式
下一篇 微信企业号OAuth2验证报50001错误
相关的文章
Powered by yoyo苏ICP备15045725号