根据微信开发文档步骤如下：

1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

JS接口安全域名设置 mi.com（前面不用带www/http,域名必须备案过）

2.引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

3.通过config接口注入权限验证配置

  1. wx.config({
  2.     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  3.     appId: '', // 必填，公众号的唯一标识
  4.     timestamp: , // 必填，生成签名的时间戳
  5.     nonceStr: '', // 必填，生成签名的随机串
  6.     signature: '',// 必填，签名，见附录1
  7.     jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  8. });

注：appId从公众号里面获取，timestamp、nonceStr、signature临时通过按微信规定的规则发送url获取

4.通过ready接口处理成功验证

  1. wx.ready(function(){
  2.  
  3.     // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  4. });

5.通过error接口处理失败验证，测试时可以先不用这个

  1. wx.error(function(res){
  2.  
  3.     // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
  4.  
  5. });

JS-SDK网页所有接口代码如下：

  1. <?php
  2. require_once "jssdk.php";
  3. $jssdk = new JSSDK("wx46c6ccb293dfsda5fd", "e5e7ad8f4b068f118939f2cec0bc98394d");	//APPID和SECRET
  4. $signPackage = $jssdk->GetSignPackage();
  5. ?>
  6.  
  7. <!DOCTYPE html>
  8. <html>
  9. <head>
  10.   <meta charset="utf-8">
  11.   <title>微信JS-SDK Demo</title>
  12.   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  13.    <link rel="stylesheet" href="http://demo.open.weixin.qq.com/jssdk/css/style.css?ts=1420774989">
  14. </head>
  15. <body>
  16. <div class="wxapi_container">
  17.     <div class="wxapi_index_container">
  18.       <ul class="label_box lbox_close wxapi_index_list">
  19.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-basic">基础接口</a></li>
  20.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-share">分享接口</a></li>
  21.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-image">图像接口</a></li>
  22.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-voice">音频接口</a></li>
  23.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-smart">智能接口</a></li>
  24.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-device">设备信息接口</a></li>
  25.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-location">地理位置接口</a></li>
  26.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-webview">界面操作接口</a></li>
  27.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-scan">微信扫一扫接口</a></li>
  28.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-shopping">微信小店接口</a></li>
  29.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-card">微信卡券接口</a></li>
  30.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-pay">微信支付接口</a></li>
  31.       </ul>
  32.     </div>
  33.     <div class="lbox_close wxapi_form">
  34.       <h3 id="menu-basic">基础接口</h3>
  35.       判断当前客户端是否支持指定JS接口
  36.       <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
  37.  
  38.       <h3 id="menu-share">分享接口</h3>
  39.       获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
  40.       <button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>
  41.       获取“分享给朋友”按钮点击状态及自定义分享内容接口
  42.       <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
  43.       获取“分享到QQ”按钮点击状态及自定义分享内容接口
  44.       <button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>
  45.       获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
  46.       <button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>
  47.  
  48.       <h3 id="menu-image">图像接口</h3>
  49.       拍照或从手机相册中选图接口
  50.       <button class="btn btn_primary" id="chooseImage">chooseImage</button>
  51.       预览图片接口
  52.       <button class="btn btn_primary" id="previewImage">previewImage</button>
  53.       上传图片接口
  54.       <button class="btn btn_primary" id="uploadImage">uploadImage</button>
  55.       下载图片接口
  56.       <button class="btn btn_primary" id="downloadImage">downloadImage</button>
  57.  
  58.       <h3 id="menu-voice">音频接口</h3>
  59.       开始录音接口
  60.       <button class="btn btn_primary" id="startRecord">startRecord</button>
  61.       停止录音接口
  62.       <button class="btn btn_primary" id="stopRecord">stopRecord</button>
  63.       播放语音接口
  64.       <button class="btn btn_primary" id="playVoice">playVoice</button>
  65.       暂停播放接口
  66.       <button class="btn btn_primary" id="pauseVoice">pauseVoice</button>
  67.       停止播放接口
  68.       <button class="btn btn_primary" id="stopVoice">stopVoice</button>
  69.       上传语音接口
  70.       <button class="btn btn_primary" id="uploadVoice">uploadVoice</button>
  71.       下载语音接口
  72.       <button class="btn btn_primary" id="downloadVoice">downloadVoice</button>
  73.  
  74.       <h3 id="menu-smart">智能接口</h3>
  75.       识别音频并返回识别结果接口
  76.       <button class="btn btn_primary" id="translateVoice">translateVoice</button>
  77.  
  78.       <h3 id="menu-device">设备信息接口</h3>
  79.       获取网络状态接口
  80.       <button class="btn btn_primary" id="getNetworkType">getNetworkType</button>
  81.  
  82.       <h3 id="menu-location">地理位置接口</h3>
  83.       使用微信内置地图查看位置接口
  84.       <button class="btn btn_primary" id="openLocation">openLocation</button>
  85.       获取地理位置接口
  86.       <button class="btn btn_primary" id="getLocation">getLocation</button>
  87.  
  88.       <h3 id="menu-webview">界面操作接口</h3>
  89.       隐藏右上角菜单接口
  90.       <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button>
  91.       显示右上角菜单接口
  92.       <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button>
  93.       关闭当前网页窗口接口
  94.       <button class="btn btn_primary" id="closeWindow">closeWindow</button>
  95.       批量隐藏功能按钮接口
  96.       <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button>
  97.       批量显示功能按钮接口
  98.       <button class="btn btn_primary" id="showMenuItems">showMenuItems</button>
  99.       隐藏所有非基础按钮接口
  100.       <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>
  101.       显示所有功能按钮接口
  102.       <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>
  103.  
  104.       <h3 id="menu-scan">微信扫一扫</h3>
  105.       调起微信扫一扫接口
  106.       <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>
  107.       <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回结果)</button>
  108.  
  109.       <h3 id="menu-shopping">微信小店接口</h3>
  110.       跳转微信商品页接口
  111.       <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>
  112.  
  113.       <h3 id="menu-card">微信卡券接口</h3>
  114.       批量添加卡券接口
  115.       <button class="btn btn_primary" id="addCard">addCard</button>
  116.       调起适用于门店的卡券列表并获取用户选择列表
  117.       <button class="btn btn_primary" id="chooseCard">chooseCard</button>
  118.       查看微信卡包中的卡券接口
  119.       <button class="btn btn_primary" id="openCard">openCard</button>
  120.  
  121.       <h3 id="menu-pay">微信支付接口</h3>
  122.       发起一个微信支付请求
  123.       <button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>
  124.     </div>
  125.   </div>
  126. </body>
  127. <!--步骤二：引入JS文件  -->
  128. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  129. <script>
  130.  
  131. 	//步骤三：通过config接口注入权限验证配置
  132.   wx.config({
  133.       debug: false,
  134.       appId: '<?php echo $signPackage["appId"];?>',
  135.       timestamp: <?php echo $signPackage["timestamp"];?>,
  136.       nonceStr: '<?php echo $signPackage["nonceStr"];?>',
  137.       signature: '<?php echo $signPackage["signature"];?>',
  138.       jsApiList: [
  139.         'checkJsApi',
  140.         'onMenuShareTimeline',
  141.         'onMenuShareAppMessage',
  142.         'onMenuShareQQ',
  143.         'onMenuShareWeibo',
  144.         'hideMenuItems',
  145.         'showMenuItems',
  146.         'hideAllNonBaseMenuItem',
  147.         'showAllNonBaseMenuItem',
  148.         'translateVoice',
  149.         'startRecord',
  150.         'stopRecord',
  151.         'onRecordEnd',
  152.         'playVoice',
  153.         'pauseVoice',
  154.         'stopVoice',
  155.         'uploadVoice',
  156.         'downloadVoice',
  157.         'chooseImage',
  158.         'previewImage',
  159.         'uploadImage',
  160.         'downloadImage',
  161.         'getNetworkType',
  162.         'openLocation',
  163.         'getLocation',
  164.         'hideOptionMenu',
  165.         'showOptionMenu',
  166.         'closeWindow',
  167.         'scanQRCode',
  168.         'chooseWXPay',
  169.         'openProductSpecificView',
  170.         'addCard',
  171.         'chooseCard',
  172.         'openCard'
  173.       ]
  174.   });
  175. </script>
  176. <script> 
  177.  
  178. //步骤四：通过ready接口处理成功验证
  179.  
  180. wx.ready(function () {
  181.   // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
  182.   document.querySelector('#checkJsApi').onclick = function () {
  183.     wx.checkJsApi({
  184.       jsApiList: [
  185.         'getNetworkType',
  186.         'previewImage'
  187.       ],
  188.       success: function (res) {
  189.         alert(JSON.stringify(res));
  190.       }
  191.     });
  192.   };
  193.  
  194.   // 2. 分享接口
  195.   // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
  196.   document.querySelector('#onMenuShareAppMessage').onclick = function () {
  197.     wx.onMenuShareAppMessage({
  198.       title: '互联网之子',
  199.       desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
  200.       link: 'http://movie.douban.com/subject/25785114/',
  201.       imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
  202.       trigger: function (res) {
  203.         // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
  204.         alert('用户点击发送给朋友');
  205.       },
  206.       success: function (res) {
  207.         alert('已分享');
  208.       },
  209.       cancel: function (res) {
  210.         alert('已取消');
  211.       },
  212.       fail: function (res) {
  213.         alert(JSON.stringify(res));
  214.       }
  215.     });
  216.     alert('已注册获取“发送给朋友”状态事件');
  217.   };
  218.  
  219.   // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
  220.   document.querySelector('#onMenuShareTimeline').onclick = function () {
  221.     wx.onMenuShareTimeline({
  222.       title: '互联网之子',
  223.       link: 'http://movie.douban.com/subject/25785114/',
  224.       imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
  225.       trigger: function (res) {
  226.         // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
  227.         alert('用户点击分享到朋友圈');
  228.       },
  229.       success: function (res) {
  230.         alert('已分享');
  231.       },
  232.       cancel: function (res) {
  233.         alert('已取消');
  234.       },
  235.       fail: function (res) {
  236.         alert(JSON.stringify(res));
  237.       }
  238.     });
  239.     alert('已注册获取“分享到朋友圈”状态事件');
  240.   };
  241.  
  242.   // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
  243.   document.querySelector('#onMenuShareQQ').onclick = function () {
  244.     wx.onMenuShareQQ({
  245.       title: '互联网之子',
  246.       desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
  247.       link: 'http://movie.douban.com/subject/25785114/',
  248.       imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
  249.       trigger: function (res) {
  250.         alert('用户点击分享到QQ');
  251.       },
  252.       complete: function (res) {
  253.         alert(JSON.stringify(res));
  254.       },
  255.       success: function (res) {
  256.         alert('已分享');
  257.       },
  258.       cancel: function (res) {
  259.         alert('已取消');
  260.       },
  261.       fail: function (res) {
  262.         alert(JSON.stringify(res));
  263.       }
  264.     });
  265.     alert('已注册获取“分享到 QQ”状态事件');
  266.   };
  267.  
  268.   // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
  269.   document.querySelector('#onMenuShareWeibo').onclick = function () {
  270.     wx.onMenuShareWeibo({
  271.       title: '互联网之子',
  272.       desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
  273.       link: 'http://movie.douban.com/subject/25785114/',
  274.       imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
  275.       trigger: function (res) {
  276.         alert('用户点击分享到微博');
  277.       },
  278.       complete: function (res) {
  279.         alert(JSON.stringify(res));
  280.       },
  281.       success: function (res) {
  282.         alert('已分享');
  283.       },
  284.       cancel: function (res) {
  285.         alert('已取消');
  286.       },
  287.       fail: function (res) {
  288.         alert(JSON.stringify(res));
  289.       }
  290.     });
  291.     alert('已注册获取“分享到微博”状态事件');
  292.   };
  293.  
  294.   // 3 智能接口
  295.   var voice = {
  296.     localId: '',
  297.     serverId: ''
  298.   };
  299.   // 3.1 识别音频并返回识别结果
  300.   document.querySelector('#translateVoice').onclick = function () {
  301.     if (voice.localId == '') {
  302.       alert('请先使用 startRecord 接口录制一段声音');
  303.       return;
  304.     }
  305.     wx.translateVoice({
  306.       localId: voice.localId,
  307.       complete: function (res) {
  308.         if (res.hasOwnProperty('translateResult')) {
  309.           alert('识别结果：' + res.translateResult);
  310.         } else {
  311.           alert('无法识别');
  312.         }
  313.       }
  314.     });
  315.   };
  316.  
  317.   // 4 音频接口
  318.   // 4.2 开始录音
  319.   document.querySelector('#startRecord').onclick = function () {
  320.     wx.startRecord({
  321.       cancel: function () {
  322.         alert('用户拒绝授权录音');
  323.       }
  324.     });
  325.   };
  326.  
  327.   // 4.3 停止录音
  328.   document.querySelector('#stopRecord').onclick = function () {
  329.     wx.stopRecord({
  330.       success: function (res) {
  331.         voice.localId = res.localId;
  332.       },
  333.       fail: function (res) {
  334.         alert(JSON.stringify(res));
  335.       }
  336.     });
  337.   };
  338.  
  339.   // 4.4 监听录音自动停止
  340.   wx.onVoiceRecordEnd({
  341.     complete: function (res) {
  342.       voice.localId = res.localId;
  343.       alert('录音时间已超过一分钟');
  344.     }
  345.   });
  346.  
  347.   // 4.5 播放音频
  348.   document.querySelector('#playVoice').onclick = function () {
  349.     if (voice.localId == '') {
  350.       alert('请先使用 startRecord 接口录制一段声音');
  351.       return;
  352.     }
  353.     wx.playVoice({
  354.       localId: voice.localId
  355.     });
  356.   };
  357.  
  358.   // 4.6 暂停播放音频
  359.   document.querySelector('#pauseVoice').onclick = function () {
  360.     wx.pauseVoice({
  361.       localId: voice.localId
  362.     });
  363.   };
  364.  
  365.   // 4.7 停止播放音频
  366.   document.querySelector('#stopVoice').onclick = function () {
  367.     wx.stopVoice({
  368.       localId: voice.localId
  369.     });
  370.   };
  371.  
  372.   // 4.8 监听录音播放停止
  373.   wx.onVoicePlayEnd({
  374.     complete: function (res) {
  375.       alert('录音（' + res.localId + '）播放结束');
  376.     }
  377.   });
  378.  
  379.   // 4.8 上传语音
  380.   document.querySelector('#uploadVoice').onclick = function () {
  381.     if (voice.localId == '') {
  382.       alert('请先使用 startRecord 接口录制一段声音');
  383.       return;
  384.     }
  385.     wx.uploadVoice({
  386.       localId: voice.localId,
  387.       success: function (res) {
  388.         alert('上传语音成功，serverId 为' + res.serverId);
  389.         voice.serverId = res.serverId;
  390.       }
  391.     });
  392.   };
  393.  
  394.   // 4.9 下载语音
  395.   document.querySelector('#downloadVoice').onclick = function () {
  396.     if (voice.serverId == '') {
  397.       alert('请先使用 uploadVoice 上传声音');
  398.       return;
  399.     }
  400.     wx.downloadVoice({
  401.       serverId: voice.serverId,
  402.       success: function (res) {
  403.         alert('下载语音成功，localId 为' + res.localId);
  404.         voice.localId = res.localId;
  405.       }
  406.     });
  407.   };
  408.  
  409.   // 5 图片接口
  410.   // 5.1 拍照、本地选图
  411.   var images = {
  412.     localId: [],
  413.     serverId: []
  414.   };
  415.   document.querySelector('#chooseImage').onclick = function () {
  416.     wx.chooseImage({
  417.       success: function (res) {
  418.         images.localId = res.localIds;
  419.         alert('已选择 ' + res.localIds.length + ' 张图片');
  420.       }
  421.     });
  422.   };
  423.  
  424.   // 5.2 图片预览
  425.   document.querySelector('#previewImage').onclick = function () {
  426.     wx.previewImage({
  427.       current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
  428.       urls: [
  429.         'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
  430.         'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
  431.         'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
  432.       ]
  433.     });
  434.   };
  435.  
  436.   // 5.3 上传图片
  437.   document.querySelector('#uploadImage').onclick = function () {
  438.     if (images.localId.length == 0) {
  439.       alert('请先使用 chooseImage 接口选择图片');
  440.       return;
  441.     }
  442.     var i = 0, length = images.localId.length;
  443.     images.serverId = [];
  444.     function upload() {
  445.       wx.uploadImage({
  446.         localId: images.localId[i],
  447.         success: function (res) {
  448.           i++;
  449.           alert('已上传：' + i + '/' + length);
  450.           images.serverId.push(res.serverId);
  451.           if (i < length) {
  452.             upload();
  453.           }
  454.         },
  455.         fail: function (res) {
  456.           alert(JSON.stringify(res));
  457.         }
  458.       });
  459.     }
  460.     upload();
  461.   };
  462.  
  463.   // 5.4 下载图片
  464.   document.querySelector('#downloadImage').onclick = function () {
  465.     if (images.serverId.length === 0) {
  466.       alert('请先使用 uploadImage 上传图片');
  467.       return;
  468.     }
  469.     var i = 0, length = images.serverId.length;
  470.     images.localId = [];
  471.     function download() {
  472.       wx.downloadImage({
  473.         serverId: images.serverId[i],
  474.         success: function (res) {
  475.           i++;
  476.           alert('已下载：' + i + '/' + length);
  477.           images.localId.push(res.localId);
  478.           if (i < length) {
  479.             download();
  480.           }
  481.         }
  482.       });
  483.     }
  484.     download();
  485.   };
  486.  
  487.   // 6 设备信息接口
  488.   // 6.1 获取当前网络状态
  489.   document.querySelector('#getNetworkType').onclick = function () {
  490.     wx.getNetworkType({
  491.       success: function (res) {
  492.         alert(res.networkType);
  493.       },
  494.       fail: function (res) {
  495.         alert(JSON.stringify(res));
  496.       }
  497.     });
  498.   };
  499.  
  500.   // 7 地理位置接口
  501.   // 7.1 查看地理位置
  502.   document.querySelector('#openLocation').onclick = function () {
  503.     wx.openLocation({
  504.       latitude: 23.099994,
  505.       longitude: 113.324520,
  506.       name: 'TIT 创意园',
  507.       address: '广州市海珠区新港中路 397 号',
  508.       scale: 14,
  509.       infoUrl: 'http://weixin.qq.com'
  510.     });
  511.   };
  512.  
  513.   // 7.2 获取当前地理位置
  514.   document.querySelector('#getLocation').onclick = function () {
  515.     wx.getLocation({
  516.       success: function (res) {
  517.         alert(JSON.stringify(res));
  518.       },
  519.       cancel: function (res) {
  520.         alert('用户拒绝授权获取地理位置');
  521.       },
  522.       fail: function (res) {
  523.           alert(JSON.stringify(res));
  524.         }
  525.     });
  526.   };
  527.  
  528.   // 8 界面操作接口
  529.   // 8.1 隐藏右上角菜单
  530.   document.querySelector('#hideOptionMenu').onclick = function () {
  531.     wx.hideOptionMenu();
  532.   };
  533.  
  534.   // 8.2 显示右上角菜单
  535.   document.querySelector('#showOptionMenu').onclick = function () {
  536.     wx.showOptionMenu();
  537.   };
  538.  
  539.   // 8.3 批量隐藏菜单项
  540.   document.querySelector('#hideMenuItems').onclick = function () {
  541.     wx.hideMenuItems({
  542.       menuList: [
  543.         'menuItem:readMode', // 阅读模式
  544.         'menuItem:share:timeline', // 分享到朋友圈
  545.         'menuItem:copyUrl' // 复制链接
  546.       ],
  547.       success: function (res) {
  548.         alert('已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
  549.       },
  550.       fail: function (res) {
  551.         alert(JSON.stringify(res));
  552.       }
  553.     });
  554.   };
  555.  
  556.   // 8.4 批量显示菜单项
  557.   document.querySelector('#showMenuItems').onclick = function () {
  558.     wx.showMenuItems({
  559.       menuList: [
  560.         'menuItem:readMode', // 阅读模式
  561.         'menuItem:share:timeline', // 分享到朋友圈
  562.         'menuItem:copyUrl' // 复制链接
  563.       ],
  564.       success: function (res) {
  565.         alert('已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
  566.       },
  567.       fail: function (res) {
  568.         alert(JSON.stringify(res));
  569.       }
  570.     });
  571.   };
  572.  
  573.   // 8.5 隐藏所有非基本菜单项
  574.   document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
  575.     wx.hideAllNonBaseMenuItem({
  576.       success: function () {
  577.         alert('已隐藏所有非基本菜单项');
  578.       }
  579.     });
  580.   };
  581.  
  582.   // 8.6 显示所有被隐藏的非基本菜单项
  583.   document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
  584.     wx.showAllNonBaseMenuItem({
  585.       success: function () {
  586.         alert('已显示所有非基本菜单项');
  587.       }
  588.     });
  589.   };
  590.  
  591.   // 8.7 关闭当前窗口
  592.   document.querySelector('#closeWindow').onclick = function () {
  593.     wx.closeWindow();
  594.   };
  595.  
  596.   // 9 微信原生接口
  597.   // 9.1.1 扫描二维码并返回结果
  598.   document.querySelector('#scanQRCode0').onclick = function () {
  599.     wx.scanQRCode();
  600.   };
  601.   // 9.1.2 扫描二维码并返回结果
  602.   document.querySelector('#scanQRCode1').onclick = function () {
  603.     wx.scanQRCode({
  604.       needResult: 1,
  605.       desc: 'scanQRCode desc',
  606.       success: function (res) {
  607.         alert(JSON.stringify(res));
  608.       }
  609.     });
  610.   };
  611.  
  612.   // 10 微信支付接口
  613.   // 10.1 发起一个支付请求
  614.   document.querySelector('#chooseWXPay').onclick = function () {
  615.     // 注意：此 Demo 使用 2.7 版本支付接口实现，建议使用此接口时参考微信支付相关最新文档。
  616.     wx.chooseWXPay({
  617.       timestamp: 1414723227,
  618.       nonceStr: 'noncestr',
  619.       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',
  620.       signType: 'SHA1', // 注意：新版支付接口使用 MD5 加密
  621.       paySign: 'bd5b1933cda6e9548862944836a9b52e8c9a2b69'
  622.     });
  623.   };
  624.  
  625.   // 11.3  跳转微信商品页
  626.   document.querySelector('#openProductSpecificView').onclick = function () {
  627.     wx.openProductSpecificView({
  628.       productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw'
  629.     });
  630.   };
  631.  
  632.   // 12 微信卡券接口
  633.   // 12.1 添加卡券
  634.   document.querySelector('#addCard').onclick = function () {
  635.     wx.addCard({
  636.       cardList: [
  637.         {
  638.           cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
  639.           cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'
  640.         },
  641.         {
  642.           cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
  643.           cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'
  644.         }
  645.       ],
  646.       success: function (res) {
  647.         alert('已添加卡券：' + JSON.stringify(res.cardList));
  648.       }
  649.     });
  650.   };
  651.  
  652.   // 12.2 选择卡券
  653.   document.querySelector('#chooseCard').onclick = function () {
  654.     wx.chooseCard({
  655.       cardSign: '97e9c5e58aab3bdf6fd6150e599d7e5806e5cb91',
  656.       timestamp: 1417504553,
  657.       nonceStr: 'k0hGdSXKZEj3Min5',
  658.       success: function (res) {
  659.         alert('已选择卡券：' + JSON.stringify(res.cardList));
  660.       }
  661.     });
  662.   };
  663.  
  664.   // 12.3 查看卡券
  665.   document.querySelector('#openCard').onclick = function () {
  666.     alert('您没有该公众号的卡券无法打开卡券。');
  667.     wx.openCard({
  668.       cardList: [
  669.       ]
  670.     });
  671.   };
  672.  
  673.   var shareData = {
  674.     title: '微信JS-SDK Demo',
  675.     desc: '微信JS-SDK,帮助第三方为用户提供更优质的移动web服务',
  676.     link: 'http://demo.open.weixin.qq.com/jssdk/',
  677.     imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0'
  678.   };
  679.   wx.onMenuShareAppMessage(shareData);
  680.   wx.onMenuShareTimeline(shareData);
  681. });
  682.  
  683. wx.error(function (res) {
  684.   alert(res.errMsg);
  685. });
  686. </script>
  687. </html>

JSSDK类

  1. <?php
  2. class JSSDK {
  3.   private $appId;
  4.   private $appSecret;
  5.  
  6.   public function __construct($appId, $appSecret) {
  7.     $this->appId = $appId;
  8.     $this->appSecret = $appSecret;
  9.   }
  10.  
  11.   public function getSignPackage() {
  12.     $jsapiTicket = $this->getJsApiTicket();
  13.  
  14.     // 注意 URL 一定要动态获取，不能 hardcode.
  15.     $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
  16.     $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
  17.  
  18.     $timestamp = time();
  19.     $nonceStr = $this->createNonceStr();
  20.  
  21.     // 这里参数的顺序要按照 key 值 ASCII 码升序排序
  22.     $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
  23.  
  24.     $signature = sha1($string);
  25.  
  26.     $signPackage = array(
  27.       "appId"     => $this->appId,
  28.       "nonceStr"  => $nonceStr,
  29.       "timestamp" => $timestamp,
  30.       "url"       => $url,
  31.       "signature" => $signature,
  32.       "rawString" => $string
  33.     );
  34.     return $signPackage;
  35.   }
  36.  
  37.   private function createNonceStr($length = 16) {
  38.     $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  39.     $str = "";
  40.     for ($i = 0; $i < $length; $i++) {
  41.       $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
  42.     }
  43.     return $str;
  44.   }
  45.  
  46.   private function getJsApiTicket() {
  47.     // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例
  48.     $data = json_decode(file_get_contents("jsapi_ticket.json"));
  49.     if ($data->expire_time < time()) {
  50.       $accessToken = $this->getAccessToken();
  51.       // 如果是企业号用以下 URL 获取 ticket
  52.       // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
  53.       $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
  54.       $res = json_decode($this->httpGet($url));
  55.       $ticket = $res->ticket;
  56.       if ($ticket) {
  57.         $data->expire_time = time() + 7000;
  58.         $data->jsapi_ticket = $ticket;
  59.         $fp = fopen("jsapi_ticket.json", "w");
  60.         fwrite($fp, json_encode($data));
  61.         fclose($fp);
  62.       }
  63.     } else {
  64.       $ticket = $data->jsapi_ticket;
  65.     }
  66.  
  67.     return $ticket;
  68.   }
  69.  
  70.   private function getAccessToken() {
  71.     // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
  72.     $data = json_decode(file_get_contents("access_token.json"));
  73.     if ($data->expire_time < time()) {
  74.       // 如果是企业号用以下URL获取access_token
  75.       // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
  76.       $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
  77.       $res = json_decode($this->httpGet($url));
  78.       $access_token = $res->access_token;
  79.       if ($access_token) {
  80.         $data->expire_time = time() + 7000;
  81.         $data->access_token = $access_token;
  82.         $fp = fopen("access_token.json", "w");
  83.         fwrite($fp, json_encode($data));
  84.         fclose($fp);
  85.       }
  86.     } else {
  87.       $access_token = $data->access_token;
  88.     }
  89.     return $access_token;
  90.   }
  91.  
  92.   private function httpGet($url) {
  93.     $curl = curl_init();
  94.     curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
  95.     curl_setopt($curl, CURLOPT_TIMEOUT, 500);
  96.     curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
  97.     curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
  98.     curl_setopt($curl, CURLOPT_URL, $url);
  99.  
  100.     $res = curl_exec($curl);
  101.     curl_close($curl);
  102.  
  103.     return $res;
  104.   }
  105. }

微信公众平台开发 微信JSSDK开发的更多相关文章

  1. 微信公众平台自定义菜单PHP开发

    微信公众平台自定义菜单PHP开发,微信公众平台自定义菜单是如何实现的呢?其实很简单,首先在微信公众平台升级为服务号,获取appid和appsecret,然后根据这2个参数获取access_token, ...

  2. 微信公众平台Php版php开发（转）

    http://www.1990c.com/?p=932 近在做微信公众平台开发,一口气写了二十几个功能,挺有意思的-  今天来分享一下开发经验~微信公众平台提供的接口很简单,先看看消息交互流程:  说 ...

  3. 微信公众平台推出"微信保护"提升微信账号安全 附微信保护开启教程

    前两天小美女的微信公众平台要群发消息时提示需要绑定手机才能操作,当时还以为是动态ip的问题,今天微信公众平台安全中心就说升级了,原来那时已经在公测了.微信公众平台推出"微信保护", ...

  4. 微信公众平台—— 获取微信服务器IP地址

    微信公众平台—— 获取微信服务器IP地址 const ServerIpUrl = 'https://api.weixin.qq.com/cgi-bin/getcallbackip?&acces ...

  5. [c#]asp.net开发微信公众平台(8)微信9大高级接口，自定义菜单

    前7篇把最基础的消息接收和回复全做完了,  也把高级接口的入口和分拆处理写好了空方法,  此篇接着介绍微信的9大高级接口, 并着重讲解其中的自定义菜单. 微信9大接口为: 1.语音识别接口 2.客服接 ...

  6. [c#]asp.net开发微信公众平台(5)微信图文消息

    上篇已经成功响应了关注事件,也实现了文本消息的发送,这篇开始图文消息处理, 微信中最常用的消息类型就是图文消息了,因为它图文并茂,最能表达信息. 图文消息在微信中的接口定义如下: <xml> ...

  7. 微信公众平台：微信JS-SDK Demo

    ylbtech-微信公众平台:微信JS-SDK Demo 1. HTML返回顶部 1.demo.html <!DOCTYPE html> <html> <head> ...

  8. [c#]asp.net开发微信公众平台(3)微信消息封装及反射赋值

    上一篇已经搭建好整体框架,实现了入口的验证,   验证通过后就交给LookMsgType方法处理,LookMsgType方法主要是对微信发来的不同的消息进行分解,不同的类型交给业务逻辑层不同的方法处理 ...

  9. 微信公众平台测试号 “微信登录失败，redirect_uri域名与后台配置不一致，错误代码10003”

    设置"网页授权获取用户基本信息" 点击"修改" 弹出"OAuth2.0网页授权",注意域名不加"https://"或&q ...

  10. 运用Java对微信公众平台二次开发技术——开发者模式接入

    当初我在这碰到了很多问题,市面上以及网络上的资料特别少,所以当初碰了很多壁,所以现在跟大家分享一下,如何用Java,对微信公众平台进行二次开发. 一.开发预备知识: 最基本的JavaSE与JavaWe ...

随机推荐

  1. 压力测试 php-fpm 优化

    webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便. 1.适用系统:Linux 2.编译安装:引用wget http: ...

  2. SparkConf加载与SparkContext创建（源码阅读二）

    紧接着昨天,我们继续开搞了啊.. 1.下面,开始创建BroadcastManager,就是传说中的广播变量管理器.BroadcastManager用于将配置信息和序列化后的RDD.Job以及Shuff ...

  3. oracle基础备份和还原

    #全库备份 buffer inctype=complete file=c:\mminfo.dmp log=c:\mminfo.log #用户备份:用户mminfo下的所有表 buffer owner= ...

  4. JavaScript的学习4

    一.Array对象 ArrayObject.reverse()   将数组进行翻转 ArrayObject.shift()     删除数组中的第一个元素并将其返回 ArrayObject.unshi ...

  5. 基于WebDriver&TestNG 实现自己的Annotation @TakeScreenshotOnFailure

    相信用过Selenium WebDriver 的朋友都应该知道如何使用WebDriver API实现Take Screenshot的功能. 在这篇文章里,我主要来介绍对failed tests实现 t ...

  6. Python基础篇【第8篇】: Socket编程（二）SocketServer

    SocketServer 在上一篇文章中我们学习了利用socket模块创建socket通信服务,但细心学习后就会发现利用socket模块创建的服务无法进行多进程的处理,当需要进行大量请求处理时,请求就 ...

  7. day10-redis操作

    Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...

  8. 导入 RecyclerView 控件 的过程（Android 6.0）

    由于本人不熟悉Android Studio和java的思维方式,开发android studio的同事告诉我不太推荐使用ListView 而google 建议使用RecycleView ,经过了一顿查 ...

  9. .NET生成静态页面并分页

    因为公司的产品用asp开发, 前一段时间用asp写了一个生成静态页面并分页的程序,但缘于对.net的热爱,写了这个.net下的生成静态页面并分页的程序. 主要的原理就是替换模板里的特殊字符. 1.静态 ...

  10. c#扩展出MapReduce方法

    MapReduce方法主体: public static IDictionary<TKey, TResult> MapReduce<TInput, TKey, TValue, TRe ...