微信JS-SDK 示例

1、html部分

  1.  <!DOCTYPE html>
  2.  <!-- saved from url=(0028){sh:$selfUrl} -->
  3.  <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  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="{sh::RES}/jssdk/css/style.css">
  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="{sh:$selfUrl}#menu-basic">基础接口</a></li>
  14.          <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-share">分享接口</a></li>
  15.          <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-image">图像接口</a></li>
  16.          <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-voice">音频接口</a></li>
  17.          <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-smart">智能接口</a></li>
  18.          <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-device">设备信息接口</a></li>
  19.          <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-location">地理位置接口</a></li>
  20.          <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-webview">界面操作接口</a></li>
  21.          <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-scan">微信扫一扫接口</a></li>
  22.          <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-shopping">微信小店接口</a></li>
  23.          <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-card">微信卡券接口</a></li>
  24.          <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#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.        <span class="desc">获取“分享到QZone”按钮点击状态及自定义分享内容接口</span>
  42.        <button class="btn btn_primary" id="onMenuShareQZone">onMenuShareQZone</button>
  43.  
  44.        <h3 id="menu-image">图像接口</h3>
  45.        <span class="desc">拍照或从手机相册中选图接口</span>
  46.        <button class="btn btn_primary" id="chooseImage">chooseImage</button>
  47.        <span class="desc">预览图片接口</span>
  48.        <button class="btn btn_primary" id="previewImage">previewImage</button>
  49.        <span class="desc">上传图片接口</span>
  50.        <button class="btn btn_primary" id="uploadImage">uploadImage</button>
  51.        <span class="desc">下载图片接口</span>
  52.        <button class="btn btn_primary" id="downloadImage">downloadImage</button>
  53.  
  54.        <h3 id="menu-voice">音频接口</h3>
  55.        <span class="desc">开始录音接口</span>
  56.        <button class="btn btn_primary" id="startRecord">startRecord</button>
  57.        <span class="desc">停止录音接口</span>
  58.        <button class="btn btn_primary" id="stopRecord">stopRecord</button>
  59.        <span class="desc">播放语音接口</span>
  60.        <button class="btn btn_primary" id="playVoice">playVoice</button>
  61.        <span class="desc">暂停播放接口</span>
  62.        <button class="btn btn_primary" id="pauseVoice">pauseVoice</button>
  63.        <span class="desc">停止播放接口</span>
  64.        <button class="btn btn_primary" id="stopVoice">stopVoice</button>
  65.        <span class="desc">上传语音接口</span>
  66.        <button class="btn btn_primary" id="uploadVoice">uploadVoice</button>
  67.        <span class="desc">下载语音接口</span>
  68.        <button class="btn btn_primary" id="downloadVoice">downloadVoice</button>
  69.  
  70.        <h3 id="menu-smart">智能接口</h3>
  71.        <span class="desc">识别音频并返回识别结果接口</span>
  72.        <button class="btn btn_primary" id="translateVoice">translateVoice</button>
  73.  
  74.        <h3 id="menu-device">设备信息接口</h3>
  75.        <span class="desc">获取网络状态接口</span>
  76.        <button class="btn btn_primary" id="getNetworkType">getNetworkType</button>
  77.  
  78.        <h3 id="menu-location">地理位置接口</h3>
  79.        <span class="desc">使用微信内置地图查看位置接口</span>
  80.        <button class="btn btn_primary" id="openLocation">openLocation</button>
  81.        <span class="desc">获取地理位置接口</span>
  82.        <button class="btn btn_primary" id="getLocation">getLocation</button>
  83.  
  84.        <h3 id="menu-webview">界面操作接口</h3>
  85.        <span class="desc">隐藏右上角菜单接口</span>
  86.        <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button>
  87.        <span class="desc">显示右上角菜单接口</span>
  88.        <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button>
  89.        <span class="desc">关闭当前网页窗口接口</span>
  90.        <button class="btn btn_primary" id="closeWindow">closeWindow</button>
  91.        <span class="desc">批量隐藏功能按钮接口</span>
  92.        <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button>
  93.        <span class="desc">批量显示功能按钮接口</span>
  94.        <button class="btn btn_primary" id="showMenuItems">showMenuItems</button>
  95.        <span class="desc">隐藏所有非基础按钮接口</span>
  96.        <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>
  97.        <span class="desc">显示所有功能按钮接口</span>
  98.        <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>
  99.  
  100.        <h3 id="menu-scan">微信扫一扫</h3>
  101.        <span class="desc">调起微信扫一扫接口</span>
  102.        <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>
  103.        <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回结果)</button>
  104.  
  105.        <h3 id="menu-shopping">微信小店接口</h3>
  106.        <span class="desc">跳转微信商品页接口</span>
  107.        <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>
  108.  
  109.        <h3 id="menu-card">微信卡券接口</h3>
  110.        <span class="desc">批量添加卡券接口</span>
  111.        <button class="btn btn_primary" id="addCard">addCard</button>
  112.        <span class="desc">调起适用于门店的卡券列表并获取用户选择列表</span>
  113.        <button class="btn btn_primary" id="chooseCard">chooseCard</button>
  114.        <span class="desc">查看微信卡包中的卡券接口</span>
  115.        <button class="btn btn_primary" id="openCard">openCard</button>
  116.  
  117.        <h3 id="menu-pay">微信支付接口</h3>
  118.        <span class="desc">发起一个微信支付请求</span>
  119.        <button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>
  120.      </div>
  121.    </div>
  122.  
  123.  <script src="{sh::RES}/jssdk/js/jweixin-1.0.0.js"></script>
  124.  
  125.  <!-- 获取签名的核心 begin -->
  126.  <?php
  127.  import("@.ORG.jssdk");
  128.  $jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret'));
  129.  $signPackage = $jssdk->GetSignPackage();
  130.  ?>
  131.  <!-- 获取签名的核心 end -->
  132.  <script>
  133.    /*
  134.     * 注意：
  135.     * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
  136.     * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
  137.     * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
  138.     *
  139.     * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
  140.     * 邮箱地址：weixin-open@qq.com
  141.     * 邮件主题：【微信JS-SDK反馈】具体问题
  142.     * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
  143.     */
  144.    wx.config({
  145.        debug: false,
  146.        appId: '<?php echo $signPackage["appId"];?>',
  147.        timestamp: <?php echo $signPackage["timestamp"];?>,
  148.        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
  149.        signature: '<?php echo $signPackage["signature"];?>',
  150.        jsApiList: [
  151.          'checkJsApi',
  152.          'onMenuShareTimeline',
  153.          'onMenuShareAppMessage',
  154.          'onMenuShareQQ',
  155.          'onMenuShareWeibo',
  156.          'onMenuShareQZone',
  157.          'hideMenuItems',
  158.          'showMenuItems',
  159.          'hideAllNonBaseMenuItem',
  160.          'showAllNonBaseMenuItem',
  161.          'translateVoice',
  162.          'startRecord',
  163.          'stopRecord',
  164.          'onVoiceRecordEnd',
  165.          'playVoice',
  166.          'onVoicePlayEnd',
  167.          'pauseVoice',
  168.          'stopVoice',
  169.          'uploadVoice',
  170.          'downloadVoice',
  171.          'chooseImage',
  172.          'previewImage',
  173.          'uploadImage',
  174.          'downloadImage',
  175.          'getNetworkType',
  176.          'openLocation',
  177.          'getLocation',
  178.          'hideOptionMenu',
  179.          'showOptionMenu',
  180.          'closeWindow',
  181.          'scanQRCode',
  182.          'chooseWXPay',
  183.          'openProductSpecificView',
  184.          'addCard',
  185.          'chooseCard',
  186.          'openCard'
  187.        ]
  188.    });
  189.  </script>
  190.  <script src="{sh::RES}/jssdk/js/zepto.min.js"></script>
  191.  <script src="{sh::RES}/jssdk/js/demo.js"> </script>
  192.  
  193.  <div id="cli_dialog_div"></div></body></html>

2、js部分

  1.  /*
  2.   * 注意：
  3.   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
  4.   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
  5.   * 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
  6.   *
  7.   * 如有问题请通过以下渠道反馈：
  8.   * 邮箱地址：weixin-open@qq.com
  9.   * 邮件主题：【微信JS-SDK反馈】具体问题
  10.   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
  11.   */
  12.  wx.ready(function () {
  13.    // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
  14.    document.querySelector('#checkJsApi').onclick = function () {
  15.      wx.checkJsApi({
  16.        jsApiList: [
  17.          'getNetworkType',
  18.          'previewImage'
  19.        ],
  20.        success: function (res) {
  21.          alert(JSON.stringify(res));
  22.        }
  23.      });
  24.    };
  25.  
  26.    // 2. 分享接口
  27.    // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
  28.    document.querySelector('#onMenuShareAppMessage').onclick = function () {
  29.      wx.onMenuShareAppMessage({
  30.        title: '互联网之子',
  31.        desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
  32.        link: 'http://movie.douban.com/subject/25785114/',
  33.        imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
  34.        trigger: function (res) {
  35.          // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
  36.          alert('用户点击发送给朋友');
  37.        },
  38.        success: function (res) {
  39.          alert('已分享');
  40.        },
  41.        cancel: function (res) {
  42.          alert('已取消');
  43.        },
  44.        fail: function (res) {
  45.          alert(JSON.stringify(res));
  46.        }
  47.      });
  48.      alert('已注册获取“发送给朋友”状态事件');
  49.    };
  50.  
  51.    // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
  52.    document.querySelector('#onMenuShareTimeline').onclick = function () {
  53.      wx.onMenuShareTimeline({
  54.        title: '互联网之子',
  55.        link: 'http://movie.douban.com/subject/25785114/',
  56.        imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
  57.        trigger: function (res) {
  58.          // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
  59.          alert('用户点击分享到朋友圈');
  60.        },
  61.        success: function (res) {
  62.          alert('已分享');
  63.        },
  64.        cancel: function (res) {
  65.          alert('已取消');
  66.        },
  67.        fail: function (res) {
  68.          alert(JSON.stringify(res));
  69.        }
  70.      });
  71.      alert('已注册获取“分享到朋友圈”状态事件');
  72.    };
  73.  
  74.    // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
  75.    document.querySelector('#onMenuShareQQ').onclick = function () {
  76.      wx.onMenuShareQQ({
  77.        title: '互联网之子',
  78.        desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
  79.        link: 'http://movie.douban.com/subject/25785114/',
  80.        imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
  81.        trigger: function (res) {
  82.          alert('用户点击分享到QQ');
  83.        },
  84.        complete: function (res) {
  85.          alert(JSON.stringify(res));
  86.        },
  87.        success: function (res) {
  88.          alert('已分享');
  89.        },
  90.        cancel: function (res) {
  91.          alert('已取消');
  92.        },
  93.        fail: function (res) {
  94.          alert(JSON.stringify(res));
  95.        }
  96.      });
  97.      alert('已注册获取“分享到 QQ”状态事件');
  98.    };
  99.  
  100.    // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
  101.    document.querySelector('#onMenuShareWeibo').onclick = function () {
  102.      wx.onMenuShareWeibo({
  103.        title: '互联网之子',
  104.        desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
  105.        link: 'http://movie.douban.com/subject/25785114/',
  106.        imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
  107.        trigger: function (res) {
  108.          alert('用户点击分享到微博');
  109.        },
  110.        complete: function (res) {
  111.          alert(JSON.stringify(res));
  112.        },
  113.        success: function (res) {
  114.          alert('已分享');
  115.        },
  116.        cancel: function (res) {
  117.          alert('已取消');
  118.        },
  119.        fail: function (res) {
  120.          alert(JSON.stringify(res));
  121.        }
  122.      });
  123.      alert('已注册获取“分享到微博”状态事件');
  124.    };
  125.  
  126.    // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
  127.    document.querySelector('#onMenuShareQZone').onclick = function () {
  128.      wx.onMenuShareQZone({
  129.        title: '互联网之子',
  130.        desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
  131.        link: 'http://movie.douban.com/subject/25785114/',
  132.        imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
  133.        trigger: function (res) {
  134.          alert('用户点击分享到QZone');
  135.        },
  136.        complete: function (res) {
  137.          alert(JSON.stringify(res));
  138.        },
  139.        success: function (res) {
  140.          alert('已分享');
  141.        },
  142.        cancel: function (res) {
  143.          alert('已取消');
  144.        },
  145.        fail: function (res) {
  146.          alert(JSON.stringify(res));
  147.        }
  148.      });
  149.      alert('已注册获取“分享到QZone”状态事件');
  150.    };
  151.  
  152.    // 3 智能接口
  153.    var voice = {
  154.      localId: '',
  155.      serverId: ''
  156.    };
  157.    // 3.1 识别音频并返回识别结果
  158.    document.querySelector('#translateVoice').onclick = function () {
  159.      if (voice.localId == '') {
  160.        alert('请先使用 startRecord 接口录制一段声音');
  161.        return;
  162.      }
  163.      wx.translateVoice({
  164.        localId: voice.localId,
  165.        complete: function (res) {
  166.          if (res.hasOwnProperty('translateResult')) {
  167.            alert('识别结果：' + res.translateResult);
  168.          } else {
  169.            alert('无法识别');
  170.          }
  171.        }
  172.      });
  173.    };
  174.  
  175.    // 4 音频接口
  176.    // 4.2 开始录音
  177.    document.querySelector('#startRecord').onclick = function () {
  178.      wx.startRecord({
  179.        cancel: function () {
  180.          alert('用户拒绝授权录音');
  181.        }
  182.      });
  183.    };
  184.  
  185.    // 4.3 停止录音
  186.    document.querySelector('#stopRecord').onclick = function () {
  187.      wx.stopRecord({
  188.        success: function (res) {
  189.          voice.localId = res.localId;
  190.        },
  191.        fail: function (res) {
  192.          alert(JSON.stringify(res));
  193.        }
  194.      });
  195.    };
  196.  
  197.    // 4.4 监听录音自动停止
  198.    wx.onVoiceRecordEnd({
  199.      complete: function (res) {
  200.        voice.localId = res.localId;
  201.        alert('录音时间已超过一分钟');
  202.      }
  203.    });
  204.  
  205.    // 4.5 播放音频
  206.    document.querySelector('#playVoice').onclick = function () {
  207.      if (voice.localId == '') {
  208.        alert('请先使用 startRecord 接口录制一段声音');
  209.        return;
  210.      }
  211.      wx.playVoice({
  212.        localId: voice.localId
  213.      });
  214.    };
  215.  
  216.    // 4.6 暂停播放音频
  217.    document.querySelector('#pauseVoice').onclick = function () {
  218.      wx.pauseVoice({
  219.        localId: voice.localId
  220.      });
  221.    };
  222.  
  223.    // 4.7 停止播放音频
  224.    document.querySelector('#stopVoice').onclick = function () {
  225.      wx.stopVoice({
  226.        localId: voice.localId
  227.      });
  228.    };
  229.  
  230.    // 4.8 监听录音播放停止
  231.    wx.onVoicePlayEnd({
  232.      complete: function (res) {
  233.        alert('录音（' + res.localId + '）播放结束');
  234.      }
  235.    });
  236.  
  237.    // 4.8 上传语音
  238.    document.querySelector('#uploadVoice').onclick = function () {
  239.      if (voice.localId == '') {
  240.        alert('请先使用 startRecord 接口录制一段声音');
  241.        return;
  242.      }
  243.      wx.uploadVoice({
  244.        localId: voice.localId,
  245.        success: function (res) {
  246.          alert('上传语音成功，serverId 为' + res.serverId);
  247.          voice.serverId = res.serverId;
  248.        }
  249.      });
  250.    };
  251.  
  252.    // 4.9 下载语音
  253.    document.querySelector('#downloadVoice').onclick = function () {
  254.      if (voice.serverId == '') {
  255.        alert('请先使用 uploadVoice 上传声音');
  256.        return;
  257.      }
  258.      wx.downloadVoice({
  259.        serverId: voice.serverId,
  260.        success: function (res) {
  261.          alert('下载语音成功，localId 为' + res.localId);
  262.          voice.localId = res.localId;
  263.        }
  264.      });
  265.    };
  266.  
  267.    // 5 图片接口
  268.    // 5.1 拍照、本地选图
  269.    var images = {
  270.      localId: [],
  271.      serverId: []
  272.    };
  273.    document.querySelector('#chooseImage').onclick = function () {
  274.      wx.chooseImage({
  275.        success: function (res) {
  276.          images.localId = res.localIds;
  277.          alert('已选择 ' + res.localIds.length + ' 张图片');
  278.        }
  279.      });
  280.    };
  281.  
  282.    // 5.2 图片预览
  283.    document.querySelector('#previewImage').onclick = function () {
  284.      wx.previewImage({
  285.        current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
  286.        urls: [
  287.          'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
  288.          'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
  289.          'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
  290.        ]
  291.      });
  292.    };
  293.  
  294.    // 5.3 上传图片
  295.    document.querySelector('#uploadImage').onclick = function () {
  296.      if (images.localId.length == 0) {
  297.        alert('请先使用 chooseImage 接口选择图片');
  298.        return;
  299.      }
  300.      var i = 0, length = images.localId.length;
  301.      images.serverId = [];
  302.      function upload() {
  303.        wx.uploadImage({
  304.          localId: images.localId[i],
  305.          success: function (res) {
  306.            i++;
  307.            //alert('已上传：' + i + '/' + length);
  308.            images.serverId.push(res.serverId);
  309.            if (i < length) {
  310.              upload();
  311.            }
  312.          },
  313.          fail: function (res) {
  314.            alert(JSON.stringify(res));
  315.          }
  316.        });
  317.      }
  318.      upload();
  319.    };
  320.  
  321.    // 5.4 下载图片
  322.    document.querySelector('#downloadImage').onclick = function () {
  323.      if (images.serverId.length === 0) {
  324.        alert('请先使用 uploadImage 上传图片');
  325.        return;
  326.      }
  327.      var i = 0, length = images.serverId.length;
  328.      images.localId = [];
  329.      function download() {
  330.        wx.downloadImage({
  331.          serverId: images.serverId[i],
  332.          success: function (res) {
  333.            i++;
  334.            alert('已下载：' + i + '/' + length);
  335.            images.localId.push(res.localId);
  336.            if (i < length) {
  337.              download();
  338.            }
  339.          }
  340.        });
  341.      }
  342.      download();
  343.    };
  344.  
  345.    // 6 设备信息接口
  346.    // 6.1 获取当前网络状态
  347.    document.querySelector('#getNetworkType').onclick = function () {
  348.      wx.getNetworkType({
  349.        success: function (res) {
  350.          alert(res.networkType);
  351.        },
  352.        fail: function (res) {
  353.          alert(JSON.stringify(res));
  354.        }
  355.      });
  356.    };
  357.  
  358.    // 7 地理位置接口
  359.    // 7.1 查看地理位置
  360.    document.querySelector('#openLocation').onclick = function () {
  361.      wx.openLocation({
  362.        latitude: 23.099994,
  363.        longitude: 113.324520,
  364.        name: 'TIT 创意园',
  365.        address: '广州市海珠区新港中路 397 号',
  366.        scale: 14,
  367.        infoUrl: 'http://weixin.qq.com'
  368.      });
  369.    };
  370.  
  371.    // 7.2 获取当前地理位置
  372.    document.querySelector('#getLocation').onclick = function () {
  373.      wx.getLocation({
  374.        success: function (res) {
  375.          alert(JSON.stringify(res));
  376.        },
  377.        cancel: function (res) {
  378.          alert('用户拒绝授权获取地理位置');
  379.        }
  380.      });
  381.    };
  382.  
  383.    // 8 界面操作接口
  384.    // 8.1 隐藏右上角菜单
  385.    document.querySelector('#hideOptionMenu').onclick = function () {
  386.      wx.hideOptionMenu();
  387.    };
  388.  
  389.    // 8.2 显示右上角菜单
  390.    document.querySelector('#showOptionMenu').onclick = function () {
  391.      wx.showOptionMenu();
  392.    };
  393.  
  394.    // 8.3 批量隐藏菜单项
  395.    document.querySelector('#hideMenuItems').onclick = function () {
  396.      wx.hideMenuItems({
  397.        menuList: [
  398.          'menuItem:readMode', // 阅读模式
  399.          'menuItem:share:timeline', // 分享到朋友圈
  400.          'menuItem:copyUrl' // 复制链接
  401.        ],
  402.        success: function (res) {
  403.          alert('已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
  404.        },
  405.        fail: function (res) {
  406.          alert(JSON.stringify(res));
  407.        }
  408.      });
  409.    };
  410.  
  411.    // 8.4 批量显示菜单项
  412.    document.querySelector('#showMenuItems').onclick = function () {
  413.      wx.showMenuItems({
  414.        menuList: [
  415.          'menuItem:readMode', // 阅读模式
  416.          'menuItem:share:timeline', // 分享到朋友圈
  417.          'menuItem:copyUrl' // 复制链接
  418.        ],
  419.        success: function (res) {
  420.          alert('已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
  421.        },
  422.        fail: function (res) {
  423.          alert(JSON.stringify(res));
  424.        }
  425.      });
  426.    };
  427.  
  428.    // 8.5 隐藏所有非基本菜单项
  429.    document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
  430.      wx.hideAllNonBaseMenuItem({
  431.        success: function () {
  432.          alert('已隐藏所有非基本菜单项');
  433.        }
  434.      });
  435.    };
  436.  
  437.    // 8.6 显示所有被隐藏的非基本菜单项
  438.    document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
  439.      wx.showAllNonBaseMenuItem({
  440.        success: function () {
  441.          alert('已显示所有非基本菜单项');
  442.        }
  443.      });
  444.    };
  445.  
  446.    // 8.7 关闭当前窗口
  447.    document.querySelector('#closeWindow').onclick = function () {
  448.      wx.closeWindow();
  449.    };
  450.  
  451.    // 9 微信原生接口
  452.    // 9.1.1 扫描二维码并返回结果
  453.    document.querySelector('#scanQRCode0').onclick = function () {
  454.      wx.scanQRCode();
  455.    };
  456.    // 9.1.2 扫描二维码并返回结果
  457.    document.querySelector('#scanQRCode1').onclick = function () {
  458.      wx.scanQRCode({
  459.        needResult: 1,
  460.        desc: 'scanQRCode desc',
  461.        success: function (res) {
  462.          alert(JSON.stringify(res));
  463.        }
  464.      });
  465.    };
  466.  
  467.    // 10 微信支付接口
  468.    // 10.1 发起一个支付请求
  469.    document.querySelector('#chooseWXPay').onclick = function () {
  470.      // 注意：此 Demo 使用 2.7 版本支付接口实现，建议使用此接口时参考微信支付相关最新文档。
  471.      wx.chooseWXPay({
  472.        timestamp: 1414723227,
  473.        nonceStr: 'noncestr',
  474.        package: 'addition=action_id%3dgaby1234%26limit_pay%3d&bank_type=WX&body=innertest&fee_type=1&input_charset=GBK&notify_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',
  475.        signType: 'SHA1', // 注意：新版支付接口使用 MD5 加密
  476.        paySign: 'bd5b1933cda6e9548862944836a9b52e8c9a2b69'
  477.      });
  478.    };
  479.  
  480.    // 11.3  跳转微信商品页
  481.    document.querySelector('#openProductSpecificView').onclick = function () {
  482.      wx.openProductSpecificView({
  483.        productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw',
  484.        extInfo: '123'
  485.      });
  486.    };
  487.  
  488.    // 12 微信卡券接口
  489.    // 12.1 添加卡券
  490.    document.querySelector('#addCard').onclick = function () {
  491.      wx.addCard({
  492.        cardList: [
  493.          {
  494.            cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
  495.            cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"f54dae85e7807cc9525ccc127b4796e021f05b33"}'
  496.          },
  497.          {
  498.            cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
  499.            cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"f54dae85e7807cc9525ccc127b4796e021f05b33"}'
  500.          }
  501.        ],
  502.        success: function (res) {
  503.          alert('已添加卡券：' + JSON.stringify(res.cardList));
  504.        }
  505.      });
  506.    };
  507.  
  508.    var codes = [];
  509.    // 12.2 选择卡券
  510.    document.querySelector('#chooseCard').onclick = function () {
  511.      wx.chooseCard({
  512.        cardSign: '8ef8aa071f1d2186cb1355ec132fed04ebba1c3f',
  513.        timestamp: 1437997723,
  514.        nonceStr: 'k0hGdSXKZEj3Min5',
  515.        success: function (res) {
  516.          res.cardList = JSON.parse(res.cardList);
  517.          encrypt_code = res.cardList[0]['encrypt_code'];
  518.          alert('已选择卡券：' + JSON.stringify(res.cardList));
  519.          decryptCode(encrypt_code, function (code) {
  520.            codes.push(code);
  521.          });
  522.        }
  523.      });
  524.    };
  525.  
  526.    // 12.3 查看卡券
  527.    document.querySelector('#openCard').onclick = function () {
  528.      if (codes.length < 1) {
  529.        alert('请先使用 chooseCard 接口选择卡券。');
  530.        return false;
  531.      }
  532.      var cardList = [];
  533.      for (var i = 0; i < codes.length; i++) {
  534.        cardList.push({
  535.          cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
  536.          code: codes[i]
  537.        });
  538.      }
  539.      wx.openCard({
  540.        cardList: cardList
  541.      });
  542.    };
  543.  
  544.    var shareData = {
  545.      title: '微信JS-SDK Demo',
  546.      desc: '微信JS-SDK,帮助第三方为用户提供更优质的移动web服务',
  547.      link: 'http://demo.open.weixin.qq.com/jssdk/',
  548.      imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0'
  549.    };
  550.    wx.onMenuShareAppMessage(shareData);
  551.    wx.onMenuShareTimeline(shareData);
  552.  
  553.    function decryptCode(code, callback) {
  554.      $.getJSON('/jssdk/decrypt_code.php?code=' + encodeURI(code), function (res) {
  555.        if (res.errcode == 0) {
  556.          codes.push(res.code);
  557.        }
  558.      });
  559.    }
  560.  });
  561.  
  562.  wx.error(function (res) {
  563.    alert(res.errMsg);
  564.  });

3、后台部分

  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&timestamp=$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.      // 为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。
  97.      // 如果在部署过程中代码在此处验证失败，请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
  98.      curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
  99.      curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
  100.      curl_setopt($curl, CURLOPT_URL, $url);
  101.  
  102.      $res = curl_exec($curl);
  103.      curl_close($curl);
  104.  
  105.      return $res;
  106.    }
  107.  }

注意：

1、示例代码只是讲解整体流程，关于路径部分可自行调整

2、由于app_secret比较保密，建议保存在服务端，由后台发起

微信JS-SDK 示例的更多相关文章

  1. 实战微信JS SDK开发：贺卡制作与播放（1)

    前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...

  2. 微信JS SDK接入的几点注意事项

    微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.备注:登录后可在“开发者中心”查看对 ...

  3. 微信js sdk上传多张图片

    微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="111111111111 ...

  4. 微信JS SDK使用权限签名算法

    jsapi_ticket 生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据.正常情况下,jsapi_ticket的有效期为7200秒, ...

  5. 调用微信js sdk

    场景:需要调用微信获取当前位置的借口. 途径:查看微信 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 .后 ...

  6. 微信JS SDK配置授权，实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...

  7. 微信js SDK接口

    微信JS-SDK说明文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 一.微信登录功能 在进行微信OAut ...

  8. 【转】微信Android SDK示例代码及运行方法

    原文网址:http://blog.csdn.net/icyfox_bupt/article/details/23742217 最近在研究微信SDK,无奈网上好使的教程太少,对于程序员来说最好的东西,一 ...

  9. 微信js sdk分享开发摘记java版

    绑定域名和引入js的就不说了 废话不说直接上代码 public void share(HttpServletRequest request) throws Exception { StringBuff ...

  10. 微信JS SDK PHP Demo

    一.JSSDK类定义 <?php class JSSDK { private $appId; private $appSecret; public function __construct($a ...

随机推荐

  1. HDU-1498-50years,50colors(最大匹配， 枚举)

    链接:https://vjudge.net/problem/HDU-1498#author=634579757 题意: 撞气球游戏,一个n*n的矩阵中,有不同颜色的气球,气球的颜色最多50种(从1到5 ...

  2. Codeforces 384E-线段树+dfs序

    如果这题只传到儿子不继续向下就是裸的dfs序+线段树,继续往下传的还改变正负号,我们可以根据它的层数来确定正负号 #include<bits/stdc++.h> #define inf 0 ...

  3. hdu1166-敌兵布阵-分块

    把区间分成√n份降低复杂度. #include<bits/stdc++.h> #define inf 0x3f3f3f3f ; ; using namespace std; int t,n ...

  4. 安装redis服务器

    安装redis服务器 Windows环境下安装: 第一步:下载压缩包(地址:https://github.com/MicrosoftArchive/redis/releases) 第二步:解压并打开 ...

  5. Python中输出字体的颜色设置

    1.实现过程 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关.控制字符颜色的转义序列是以ESC开头,即用\033来完成 2.书写过程 开头部分: \033[显示方式;前 ...

  6. NET Core实现OAuth2.0的ResourceOwnerPassword和ClientCredentials模式

    NET Core实现OAuth2.0的ResourceOwnerPassword和ClientCredentials模式 前言 开发授权服务框架一般使用OAuth2.0授权框架,而开发Webapi的授 ...

  7. Batch梯度下降

    1.之前讲到随机梯度下降法(SGD),如果每次将batch个样本输入给模型,并更新一次,那么就成了batch梯度下降了. 2.batch梯度下降显然能够提高算法效率,同时相对于一个样本,batch个样 ...

  8. 关闭mysql validate-password插件

    mysql5.7 的validate-password对密码策略有限制,比如长度大小写,太麻烦,我习惯开发环境下为root,所以在开发环境关闭这个插件的话只需在/etc/my.cnf中添加valida ...

  9. 使用Robot类模拟鼠标、键盘事件

    Robot类用于模拟鼠标.键盘事件,生成本机系统输入事件.Robot 的主要用于自动化.自运行的程序和其他需要自动控制鼠标和键盘的程序 相当于实际操作的效果,不仅仅只是生成对应的鼠标.键盘事件.比如R ...

  10. 简单的Servlet结合Jsp实现请求和响应以及对doGet和doPost的浅析

    1.新建jsp,创建表单 <body> <form action="/MyfirstWeb/login"> username:<input type= ...