微信官方j(luò)ssdk Demo

1.html部分

<!DOCTYPE html>
<!-- saved from url=(0028){sh:$selfUrl} -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title>微信JS-SDK Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  <link rel="stylesheet" href="{sh::RES}/jssdk/css/style.css">
</head>
<body ontouchstart="">
<div class="wxapi_container">
    <div class="wxapi_index_container">
      <ul class="label_box lbox_close wxapi_index_list">
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-basic">基礎(chǔ)接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-share">分享接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-image">圖像接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-voice">音頻接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-smart">智能接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-device">設(shè)備信息接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-location">地理位置接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-webview">界面操作接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-scan">微信掃一掃接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-shopping">微信小店接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-card">微信卡券接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-pay">微信支付接口</a></li>
      </ul>
    </div>
    <div class="lbox_close wxapi_form">
      <h3 id="menu-basic">基礎(chǔ)接口</h3>
      <span class="desc">判斷當(dāng)前客戶端是否支持指定JS接口</span>
      <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>

      <h3 id="menu-share">分享接口</h3>
      <span class="desc">獲取“分享到朋友圈”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口</span>
      <button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>
      <span class="desc">獲取“分享給朋友”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口</span>
      <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
      <span class="desc">獲取“分享到QQ”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口</span>
      <button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>
      <span class="desc">獲取“分享到騰訊微博”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口</span>
      <button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>
      <span class="desc">獲取“分享到QZone”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口</span>
      <button class="btn btn_primary" id="onMenuShareQZone">onMenuShareQZone</button>

      <h3 id="menu-image">圖像接口</h3>
      <span class="desc">拍照或從手機(jī)相冊(cè)中選圖接口</span>
      <button class="btn btn_primary" id="chooseImage">chooseImage</button>
      <span class="desc">預(yù)覽圖片接口</span>
      <button class="btn btn_primary" id="previewImage">previewImage</button>
      <span class="desc">上傳圖片接口</span>
      <button class="btn btn_primary" id="uploadImage">uploadImage</button>
      <span class="desc">下載圖片接口</span>
      <button class="btn btn_primary" id="downloadImage">downloadImage</button>

      <h3 id="menu-voice">音頻接口</h3>
      <span class="desc">開始錄音接口</span>
      <button class="btn btn_primary" id="startRecord">startRecord</button>
      <span class="desc">停止錄音接口</span>
      <button class="btn btn_primary" id="stopRecord">stopRecord</button>
      <span class="desc">播放語音接口</span>
      <button class="btn btn_primary" id="playVoice">playVoice</button>
      <span class="desc">暫停播放接口</span>
      <button class="btn btn_primary" id="pauseVoice">pauseVoice</button>
      <span class="desc">停止播放接口</span>
      <button class="btn btn_primary" id="stopVoice">stopVoice</button>
      <span class="desc">上傳語音接口</span>
      <button class="btn btn_primary" id="uploadVoice">uploadVoice</button>
      <span class="desc">下載語音接口</span>
      <button class="btn btn_primary" id="downloadVoice">downloadVoice</button>

      <h3 id="menu-smart">智能接口</h3>
      <span class="desc">識(shí)別音頻并返回識(shí)別結(jié)果接口</span>
      <button class="btn btn_primary" id="translateVoice">translateVoice</button>

      <h3 id="menu-device">設(shè)備信息接口</h3>
      <span class="desc">獲取網(wǎng)絡(luò)狀態(tài)接口</span>
      <button class="btn btn_primary" id="getNetworkType">getNetworkType</button>

      <h3 id="menu-location">地理位置接口</h3>
      <span class="desc">使用微信內(nèi)置地圖查看位置接口</span>
      <button class="btn btn_primary" id="openLocation">openLocation</button>
      <span class="desc">獲取地理位置接口</span>
      <button class="btn btn_primary" id="getLocation">getLocation</button>

      <h3 id="menu-webview">界面操作接口</h3>
      <span class="desc">隱藏右上角菜單接口</span>
      <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button>
      <span class="desc">顯示右上角菜單接口</span>
      <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button>
      <span class="desc">關(guān)閉當(dāng)前網(wǎng)頁窗口接口</span>
      <button class="btn btn_primary" id="closeWindow">closeWindow</button>
      <span class="desc">批量隱藏功能按鈕接口</span>
      <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button>
      <span class="desc">批量顯示功能按鈕接口</span>
      <button class="btn btn_primary" id="showMenuItems">showMenuItems</button>
      <span class="desc">隱藏所有非基礎(chǔ)按鈕接口</span>
      <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>
      <span class="desc">顯示所有功能按鈕接口</span>
      <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>

      <h3 id="menu-scan">微信掃一掃</h3>
      <span class="desc">調(diào)起微信掃一掃接口</span>
      <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信處理結(jié)果)</button>
      <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回結(jié)果)</button>

      <h3 id="menu-shopping">微信小店接口</h3>
      <span class="desc">跳轉(zhuǎn)微信商品頁接口</span>
      <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>

      <h3 id="menu-card">微信卡券接口</h3>
      <span class="desc">批量添加卡券接口</span>
      <button class="btn btn_primary" id="addCard">addCard</button>
      <span class="desc">調(diào)起適用于門店的卡券列表并獲取用戶選擇列表</span>
      <button class="btn btn_primary" id="chooseCard">chooseCard</button>
      <span class="desc">查看微信卡包中的卡券接口</span>
      <button class="btn btn_primary" id="openCard">openCard</button>

      <h3 id="menu-pay">微信支付接口</h3>
      <span class="desc">發(fā)起一個(gè)微信支付請(qǐng)求</span>
      <button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>
    </div>
  </div>

<script src="{sh::RES}/jssdk/js/jweixin-1.0.0.js"></script>

<!-- 獲取簽名的核心 begin -->
<?php
import("@.ORG.jssdk");
$jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret'));
$signPackage = $jssdk->GetSignPackage();
?>
<!-- 獲取簽名的核心 end -->
<script>
  /*
   * 注意：
   * 1. 所有的JS接口只能在公眾號(hào)綁定的域名下調(diào)用老充，公眾號(hào)開發(fā)者需要先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”秒紧。
   * 2. 如果發(fā)現(xiàn)在 Android 不能分享自定義內(nèi)容缰冤，請(qǐng)到官網(wǎng)下載最新的包覆蓋安裝裆操，Android 自定義分享接口需升級(jí)至 6.0.2.58 版本及以上胸私。
   * 3. 常見問題及完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 開發(fā)中遇到問題詳見文檔“附錄5-常見錯(cuò)誤及解決辦法”解決措伐，如仍未能解決可通過以下渠道反饋：
   * 郵箱地址：weixin-open@qq.com
   * 郵件主題：【微信JS-SDK反饋】具體問題
   * 郵件內(nèi)容說明：用簡明的語言描述問題所在，并交代清楚遇到該問題的場(chǎng)景秩命，可附上截屏圖片尉共，微信團(tuán)隊(duì)會(huì)盡快處理你的反饋。
   */
  wx.config({
      debug: false,
      appId: '<?php echo $signPackage["appId"];?>',
      timestamp: <?php echo $signPackage["timestamp"];?>,
      nonceStr: '<?php echo $signPackage["nonceStr"];?>',
      signature: '<?php echo $signPackage["signature"];?>',
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'translateVoice',
        'startRecord',
        'stopRecord',
        'onVoiceRecordEnd',
        'playVoice',
        'onVoicePlayEnd',
        'pauseVoice',
        'stopVoice',
        'uploadVoice',
        'downloadVoice',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType',
        'openLocation',
        'getLocation',
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',
        'scanQRCode',
        'chooseWXPay',
        'openProductSpecificView',
        'addCard',
        'chooseCard',
        'openCard'
      ]
  });
</script>
<script src="{sh::RES}/jssdk/js/zepto.min.js"></script>
<script src="{sh::RES}/jssdk/js/demo.js"> </script>

<div id="cli_dialog_div"></div></body></html>

2.demo.js

/*
 * 注意：
 * 1. 所有的JS接口只能在公眾號(hào)綁定的域名下調(diào)用弃锐，公眾號(hào)開發(fā)者需要先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”袄友。
 * 2. 如果發(fā)現(xiàn)在 Android 不能分享自定義內(nèi)容，請(qǐng)到官網(wǎng)下載最新的包覆蓋安裝霹菊，Android 自定義分享接口需升級(jí)至 6.0.2.58 版本及以上剧蚣。
 * 3. 完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
 *
 * 如有問題請(qǐng)通過以下渠道反饋：
 * 郵箱地址：weixin-open@qq.com
 * 郵件主題：【微信JS-SDK反饋】具體問題
 * 郵件內(nèi)容說明：用簡明的語言描述問題所在，并交代清楚遇到該問題的場(chǎng)景旋廷，可附上截屏圖片鸠按，微信團(tuán)隊(duì)會(huì)盡快處理你的反饋。
 */
wx.ready(function () {
  // 1 判斷當(dāng)前版本是否支持指定 JS 接口饶碘，支持批量判斷
  document.querySelector('#checkJsApi').onclick = function () {
    wx.checkJsApi({
      jsApiList: [
        'getNetworkType',
        'previewImage'
      ],
      success: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

  // 2. 分享接口
  // 2.1 監(jiān)聽“分享給朋友”目尖，按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
  document.querySelector('#onMenuShareAppMessage').onclick = function () {
    wx.onMenuShareAppMessage({
      title: '互聯(lián)網(wǎng)之子',
      desc: '在長大的過程中扎运，我才慢慢發(fā)現(xiàn)瑟曲，我身邊的所有事饮戳，別人跟我說的所有事，那些所謂本來如此测蹲，注定如此的事莹捡，它們其實(shí)沒有非得如此，事情是可以改變的扣甲。更重要的是篮赢，有些事既然錯(cuò)了，那就該做出改變琉挖。',
      link: 'http://movie.douban.com/subject/25785114/',
      imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
      trigger: function (res) {
        // 不要嘗試在trigger中使用ajax異步請(qǐng)求修改本次分享的內(nèi)容启泣，因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作，這時(shí)候使用ajax的回包會(huì)還沒有返回
        alert('用戶點(diǎn)擊發(fā)送給朋友');
      },
      success: function (res) {
        alert('已分享');
      },
      cancel: function (res) {
        alert('已取消');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    alert('已注冊(cè)獲取“發(fā)送給朋友”狀態(tài)事件');
  };

  // 2.2 監(jiān)聽“分享到朋友圈”按鈕點(diǎn)擊示辈、自定義分享內(nèi)容及分享結(jié)果接口
  document.querySelector('#onMenuShareTimeline').onclick = function () {
    wx.onMenuShareTimeline({
      title: '互聯(lián)網(wǎng)之子',
      link: 'http://movie.douban.com/subject/25785114/',
      imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
      trigger: function (res) {
        // 不要嘗試在trigger中使用ajax異步請(qǐng)求修改本次分享的內(nèi)容寥茫，因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作，這時(shí)候使用ajax的回包會(huì)還沒有返回
        alert('用戶點(diǎn)擊分享到朋友圈');
      },
      success: function (res) {
        alert('已分享');
      },
      cancel: function (res) {
        alert('已取消');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    alert('已注冊(cè)獲取“分享到朋友圈”狀態(tài)事件');
  };

  // 2.3 監(jiān)聽“分享到QQ”按鈕點(diǎn)擊矾麻、自定義分享內(nèi)容及分享結(jié)果接口
  document.querySelector('#onMenuShareQQ').onclick = function () {
    wx.onMenuShareQQ({
      title: '互聯(lián)網(wǎng)之子',
      desc: '在長大的過程中纱耻，我才慢慢發(fā)現(xiàn)，我身邊的所有事险耀，別人跟我說的所有事弄喘，那些所謂本來如此，注定如此的事甩牺，它們其實(shí)沒有非得如此蘑志，事情是可以改變的。更重要的是贬派，有些事既然錯(cuò)了急但，那就該做出改變。',
      link: 'http://movie.douban.com/subject/25785114/',
      imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
      trigger: function (res) {
        alert('用戶點(diǎn)擊分享到QQ');
      },
      complete: function (res) {
        alert(JSON.stringify(res));
      },
      success: function (res) {
        alert('已分享');
      },
      cancel: function (res) {
        alert('已取消');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    alert('已注冊(cè)獲取“分享到 QQ”狀態(tài)事件');
  };
  
  // 2.4 監(jiān)聽“分享到微博”按鈕點(diǎn)擊搞乏、自定義分享內(nèi)容及分享結(jié)果接口
  document.querySelector('#onMenuShareWeibo').onclick = function () {
    wx.onMenuShareWeibo({
      title: '互聯(lián)網(wǎng)之子',
      desc: '在長大的過程中波桩，我才慢慢發(fā)現(xiàn)，我身邊的所有事查描，別人跟我說的所有事突委，那些所謂本來如此，注定如此的事冬三，它們其實(shí)沒有非得如此，事情是可以改變的缘缚。更重要的是勾笆，有些事既然錯(cuò)了，那就該做出改變桥滨。',
      link: 'http://movie.douban.com/subject/25785114/',
      imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
      trigger: function (res) {
        alert('用戶點(diǎn)擊分享到微博');
      },
      complete: function (res) {
        alert(JSON.stringify(res));
      },
      success: function (res) {
        alert('已分享');
      },
      cancel: function (res) {
        alert('已取消');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    alert('已注冊(cè)獲取“分享到微博”狀態(tài)事件');
  };

  // 2.5 監(jiān)聽“分享到QZone”按鈕點(diǎn)擊窝爪、自定義分享內(nèi)容及分享接口
  document.querySelector('#onMenuShareQZone').onclick = function () {
    wx.onMenuShareQZone({
      title: '互聯(lián)網(wǎng)之子',
      desc: '在長大的過程中弛车，我才慢慢發(fā)現(xiàn)，我身邊的所有事蒲每，別人跟我說的所有事纷跛，那些所謂本來如此，注定如此的事邀杏，它們其實(shí)沒有非得如此贫奠，事情是可以改變的。更重要的是望蜡，有些事既然錯(cuò)了唤崭，那就該做出改變。',
      link: 'http://movie.douban.com/subject/25785114/',
      imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
      trigger: function (res) {
        alert('用戶點(diǎn)擊分享到QZone');
      },
      complete: function (res) {
        alert(JSON.stringify(res));
      },
      success: function (res) {
        alert('已分享');
      },
      cancel: function (res) {
        alert('已取消');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    alert('已注冊(cè)獲取“分享到QZone”狀態(tài)事件');
  };

  // 3 智能接口
  var voice = {
    localId: '',
    serverId: ''
  };
  // 3.1 識(shí)別音頻并返回識(shí)別結(jié)果
  document.querySelector('#translateVoice').onclick = function () {
    if (voice.localId == '') {
      alert('請(qǐng)先使用 startRecord 接口錄制一段聲音');
      return;
    }
    wx.translateVoice({
      localId: voice.localId,
      complete: function (res) {
        if (res.hasOwnProperty('translateResult')) {
          alert('識(shí)別結(jié)果：' + res.translateResult);
        } else {
          alert('無法識(shí)別');
        }
      }
    });
  };

  // 4 音頻接口
  // 4.2 開始錄音
  document.querySelector('#startRecord').onclick = function () {
    wx.startRecord({
      cancel: function () {
        alert('用戶拒絕授權(quán)錄音');
      }
    });
  };

  // 4.3 停止錄音
  document.querySelector('#stopRecord').onclick = function () {
    wx.stopRecord({
      success: function (res) {
        voice.localId = res.localId;
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

  // 4.4 監(jiān)聽錄音自動(dòng)停止
  wx.onVoiceRecordEnd({
    complete: function (res) {
      voice.localId = res.localId;
      alert('錄音時(shí)間已超過一分鐘');
    }
  });

  // 4.5 播放音頻
  document.querySelector('#playVoice').onclick = function () {
    if (voice.localId == '') {
      alert('請(qǐng)先使用 startRecord 接口錄制一段聲音');
      return;
    }
    wx.playVoice({
      localId: voice.localId
    });
  };

  // 4.6 暫停播放音頻
  document.querySelector('#pauseVoice').onclick = function () {
    wx.pauseVoice({
      localId: voice.localId
    });
  };

  // 4.7 停止播放音頻
  document.querySelector('#stopVoice').onclick = function () {
    wx.stopVoice({
      localId: voice.localId
    });
  };

  // 4.8 監(jiān)聽錄音播放停止
  wx.onVoicePlayEnd({
    complete: function (res) {
      alert('錄音（' + res.localId + '）播放結(jié)束');
    }
  });

  // 4.8 上傳語音
  document.querySelector('#uploadVoice').onclick = function () {
    if (voice.localId == '') {
      alert('請(qǐng)先使用 startRecord 接口錄制一段聲音');
      return;
    }
    wx.uploadVoice({
      localId: voice.localId,
      success: function (res) {
        alert('上傳語音成功脖律，serverId 為' + res.serverId);
        voice.serverId = res.serverId;
      }
    });
  };

  // 4.9 下載語音
  document.querySelector('#downloadVoice').onclick = function () {
    if (voice.serverId == '') {
      alert('請(qǐng)先使用 uploadVoice 上傳聲音');
      return;
    }
    wx.downloadVoice({
      serverId: voice.serverId,
      success: function (res) {
        alert('下載語音成功谢肾，localId 為' + res.localId);
        voice.localId = res.localId;
      }
    });
  };

  // 5 圖片接口
  // 5.1 拍照、本地選圖
  var images = {
    localId: [],
    serverId: []
  };
  document.querySelector('#chooseImage').onclick = function () {
    wx.chooseImage({
      success: function (res) {
        images.localId = res.localIds;
        alert('已選擇 ' + res.localIds.length + ' 張圖片');
      }
    });
  };

  // 5.2 圖片預(yù)覽
  document.querySelector('#previewImage').onclick = function () {
    wx.previewImage({
      current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
      urls: [
        'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
        'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
        'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
      ]
    });
  };

  // 5.3 上傳圖片
  document.querySelector('#uploadImage').onclick = function () {
    if (images.localId.length == 0) {
      alert('請(qǐng)先使用 chooseImage 接口選擇圖片');
      return;
    }
    var i = 0, length = images.localId.length;
    images.serverId = [];
    function upload() {
      wx.uploadImage({
        localId: images.localId[i],
        success: function (res) {
          i++;
          //alert('已上傳：' + i + '/' + length);
          images.serverId.push(res.serverId);
          if (i < length) {
            upload();
          }
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    }
    upload();
  };

  // 5.4 下載圖片
  document.querySelector('#downloadImage').onclick = function () {
    if (images.serverId.length === 0) {
      alert('請(qǐng)先使用 uploadImage 上傳圖片');
      return;
    }
    var i = 0, length = images.serverId.length;
    images.localId = [];
    function download() {
      wx.downloadImage({
        serverId: images.serverId[i],
        success: function (res) {
          i++;
          alert('已下載：' + i + '/' + length);
          images.localId.push(res.localId);
          if (i < length) {
            download();
          }
        }
      });
    }
    download();
  };

  // 6 設(shè)備信息接口
  // 6.1 獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)
  document.querySelector('#getNetworkType').onclick = function () {
    wx.getNetworkType({
      success: function (res) {
        alert(res.networkType);
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

  // 7 地理位置接口
  // 7.1 查看地理位置
  document.querySelector('#openLocation').onclick = function () {
    wx.openLocation({
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'TIT 創(chuàng)意園',
      address: '廣州市海珠區(qū)新港中路 397 號(hào)',
      scale: 14,
      infoUrl: 'http://weixin.qq.com'
    });
  };

  // 7.2 獲取當(dāng)前地理位置
  document.querySelector('#getLocation').onclick = function () {
    wx.getLocation({
      success: function (res) {
        alert(JSON.stringify(res));
      },
      cancel: function (res) {
        alert('用戶拒絕授權(quán)獲取地理位置');
      }
    });
  };

  // 8 界面操作接口
  // 8.1 隱藏右上角菜單
  document.querySelector('#hideOptionMenu').onclick = function () {
    wx.hideOptionMenu();
  };

  // 8.2 顯示右上角菜單
  document.querySelector('#showOptionMenu').onclick = function () {
    wx.showOptionMenu();
  };

  // 8.3 批量隱藏菜單項(xiàng)
  document.querySelector('#hideMenuItems').onclick = function () {
    wx.hideMenuItems({
      menuList: [
        'menuItem:readMode', // 閱讀模式
        'menuItem:share:timeline', // 分享到朋友圈
        'menuItem:copyUrl' // 復(fù)制鏈接
      ],
      success: function (res) {
        alert('已隱藏“閱讀模式”小泉，“分享到朋友圈”芦疏，“復(fù)制鏈接”等按鈕');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

  // 8.4 批量顯示菜單項(xiàng)
  document.querySelector('#showMenuItems').onclick = function () {
    wx.showMenuItems({
      menuList: [
        'menuItem:readMode', // 閱讀模式
        'menuItem:share:timeline', // 分享到朋友圈
        'menuItem:copyUrl' // 復(fù)制鏈接
      ],
      success: function (res) {
        alert('已顯示“閱讀模式”，“分享到朋友圈”微姊，“復(fù)制鏈接”等按鈕');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

  // 8.5 隱藏所有非基本菜單項(xiàng)
  document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
    wx.hideAllNonBaseMenuItem({
      success: function () {
        alert('已隱藏所有非基本菜單項(xiàng)');
      }
    });
  };

  // 8.6 顯示所有被隱藏的非基本菜單項(xiàng)
  document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
    wx.showAllNonBaseMenuItem({
      success: function () {
        alert('已顯示所有非基本菜單項(xiàng)');
      }
    });
  };

  // 8.7 關(guān)閉當(dāng)前窗口
  document.querySelector('#closeWindow').onclick = function () {
    wx.closeWindow();
  };

  // 9 微信原生接口
  // 9.1.1 掃描二維碼并返回結(jié)果
  document.querySelector('#scanQRCode0').onclick = function () {
    wx.scanQRCode();
  };
  // 9.1.2 掃描二維碼并返回結(jié)果
  document.querySelector('#scanQRCode1').onclick = function () {
    wx.scanQRCode({
      needResult: 1,
      desc: 'scanQRCode desc',
      success: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

  // 10 微信支付接口
  // 10.1 發(fā)起一個(gè)支付請(qǐng)求
  document.querySelector('#chooseWXPay').onclick = function () {
    // 注意：此 Demo 使用 2.7 版本支付接口實(shí)現(xiàn)酸茴，建議使用此接口時(shí)參考微信支付相關(guān)最新文檔。
    wx.chooseWXPay({
      timestamp: 1414723227,
      nonceStr: 'noncestr',
      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',
      signType: 'SHA1', // 注意：新版支付接口使用 MD5 加密
      paySign: 'bd5b1933cda6e9548862944836a9b52e8c9a2b69'
    });
  };

  // 11.3  跳轉(zhuǎn)微信商品頁
  document.querySelector('#openProductSpecificView').onclick = function () {
    wx.openProductSpecificView({
      productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw',
      extInfo: '123'
    });
  };

  // 12 微信卡券接口
  // 12.1 添加卡券
  document.querySelector('#addCard').onclick = function () {
    wx.addCard({
      cardList: [
        {
          cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
          cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"f54dae85e7807cc9525ccc127b4796e021f05b33"}'
        },
        {
          cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
          cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"f54dae85e7807cc9525ccc127b4796e021f05b33"}'
        }
      ],
      success: function (res) {
        alert('已添加卡券：' + JSON.stringify(res.cardList));
      }
    });
  };

  var codes = [];
  // 12.2 選擇卡券
  document.querySelector('#chooseCard').onclick = function () {
    wx.chooseCard({
      cardSign: '8ef8aa071f1d2186cb1355ec132fed04ebba1c3f',
      timestamp: 1437997723,
      nonceStr: 'k0hGdSXKZEj3Min5',
      success: function (res) {
        res.cardList = JSON.parse(res.cardList);
        encrypt_code = res.cardList[0]['encrypt_code'];
        alert('已選擇卡券：' + JSON.stringify(res.cardList));
        decryptCode(encrypt_code, function (code) {
          codes.push(code);
        });
      }
    });
  };

  // 12.3 查看卡券
  document.querySelector('#openCard').onclick = function () {
    if (codes.length < 1) {
      alert('請(qǐng)先使用 chooseCard 接口選擇卡券柒桑。');
      return false;
    }
    var cardList = [];
    for (var i = 0; i < codes.length; i++) {
      cardList.push({
        cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
        code: codes[i]
      });
    }
    wx.openCard({
      cardList: cardList
    });
  };

  var shareData = {
    title: '微信JS-SDK Demo',
    desc: '微信JS-SDK,幫助第三方為用戶提供更優(yōu)質(zhì)的移動(dòng)web服務(wù)',
    link: 'http://demo.open.weixin.qq.com/jssdk/',
    imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0'
  };
  wx.onMenuShareAppMessage(shareData);
  wx.onMenuShareTimeline(shareData);

  function decryptCode(code, callback) {
    $.getJSON('/jssdk/decrypt_code.php?code=' + encodeURI(code), function (res) {
      if (res.errcode == 0) {
        codes.push(res.code);
      }
    });
  }
});

wx.error(function (res) {
  alert(res.errMsg);
});

3.核心類jssdk.class.php

<?php
class JSSDK {
  private $appId;
  private $appSecret;

  public function __construct($appId, $appSecret) {
    $this->appId = $appId;
    $this->appSecret = $appSecret;
  }

  public function getSignPackage() {
    $jsapiTicket = $this->getJsApiTicket();

    // 注意 URL 一定要?jiǎng)討B(tài)獲取弊决，不能 hardcode.
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
    $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

    $timestamp = time();
    $nonceStr = $this->createNonceStr();

    // 這里參數(shù)的順序要按照 key 值 ASCII 碼升序排序
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";

    $signature = sha1($string);

    $signPackage = array(
      "appId"     => $this->appId,
      "nonceStr"  => $nonceStr,
      "timestamp" => $timestamp,
      "url"       => $url,
      "signature" => $signature,
      "rawString" => $string
    );
    return $signPackage; 
  }

  private function createNonceStr($length = 16) {
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    $str = "";
    for ($i = 0; $i < $length; $i++) {
      $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
    }
    return $str;
  }

  private function getJsApiTicket() {
    // jsapi_ticket 應(yīng)該全局存儲(chǔ)與更新，以下代碼以寫入到文件中做示例
    $data = json_decode(file_get_contents("jsapi_ticket.json"));
    if ($data->expire_time < time()) {
      $accessToken = $this->getAccessToken();
      // 如果是企業(yè)號(hào)用以下 URL 獲取 ticket
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
      $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
      $res = json_decode($this->httpGet($url));
      $ticket = $res->ticket;
      if ($ticket) {
        $data->expire_time = time() + 7000;
        $data->jsapi_ticket = $ticket;
        $fp = fopen("jsapi_ticket.json", "w");
        fwrite($fp, json_encode($data));
        fclose($fp);
      }
    } else {
      $ticket = $data->jsapi_ticket;
    }

    return $ticket;
  }

  private function getAccessToken() {
    // access_token 應(yīng)該全局存儲(chǔ)與更新魁淳，以下代碼以寫入到文件中做示例
    $data = json_decode(file_get_contents("access_token.json"));
    if ($data->expire_time < time()) {
      // 如果是企業(yè)號(hào)用以下URL獲取access_token
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
      $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
      $res = json_decode($this->httpGet($url));
      $access_token = $res->access_token;
      if ($access_token) {
        $data->expire_time = time() + 7000;
        $data->access_token = $access_token;
        $fp = fopen("access_token.json", "w");
        fwrite($fp, json_encode($data));
        fclose($fp);
      }
    } else {
      $access_token = $data->access_token;
    }
    return $access_token;
  }

  private function httpGet($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    // 為保證第三方服務(wù)器與微信服務(wù)器之間數(shù)據(jù)傳輸?shù)陌踩云形⑿沤涌诓捎胔ttps方式調(diào)用，必須使用下面2行代碼打開ssl安全校驗(yàn)界逛。
    // 如果在部署過程中代碼在此處驗(yàn)證失敗昆稿，請(qǐng)到 http://curl.haxx.se/ca/cacert.pem 下載新的證書判別文件。
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
    curl_setopt($curl, CURLOPT_URL, $url);

    $res = curl_exec($curl);
    curl_close($curl);

    return $res;
  }
}

一切的一切都是基于appId 和 appSecret息拜，這兩個(gè)參數(shù)可以在配置文件中進(jìn)行配置溉潭。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市少欺，隨后出現(xiàn)的幾起案子喳瓣，更是在濱河造成了極大的恐慌，老刑警劉巖赞别，帶你破解...
    沈念sama閱讀 212,599評(píng)論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件畏陕，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡仿滔，警方通過查閱死者的電腦和手機(jī)惠毁，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,629評(píng)論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門犹芹，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人鞠绰，你說我怎么就攤上這事腰埂。” “怎么了蜈膨？”我有些...
    開封第一講書人閱讀 158,084評(píng)論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵屿笼，是天一觀的道長。 經(jīng)常有香客問我丈挟，道長刁卜，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,708評(píng)論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任曙咽，我火速辦了婚禮蛔趴，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘例朱。我一直安慰自己孝情，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,813評(píng)論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布洒嗤。 她就那樣靜靜地躺著箫荡，像睡著了一般。 火紅的嫁衣襯著肌膚如雪渔隶。 梳的紋絲不亂的頭發(fā)上羔挡，一...
    開封第一講書人閱讀 50,021評(píng)論 1贊 291
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音间唉，去河邊找鬼绞灼。 笑死，一個(gè)胖子當(dāng)著我的面吹牛呈野，可吹牛的內(nèi)容都是我干的低矮。 我是一名探鬼主播，決...
    沈念sama閱讀 39,120評(píng)論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼被冒，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼军掂！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起昨悼，我...
    開封第一講書人閱讀 37,866評(píng)論 0贊 268
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤蝗锥，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后率触，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體玛追，經(jīng)...
    沈念sama閱讀 44,308評(píng)論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,633評(píng)論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年闲延，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了痊剖。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,768評(píng)論 1贊 341
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡垒玲，死狀恐怖陆馁，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情合愈，我是刑警寧澤叮贩，帶...
    沈念sama閱讀 34,461評(píng)論 4贊 333
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站佛析，受9級(jí)特大地震影響益老，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜寸莫，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,094評(píng)論 3贊 317
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一捺萌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧膘茎，春花似錦桃纯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,850評(píng)論 0贊 21
  • 一樁弒父案态坦，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至棒拂，卻和暖如春伞梯，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背帚屉。 一陣腳步聲響...
    開封第一講書人閱讀 32,082評(píng)論 1贊 267
  • 情欲美人皮
    我被黑心中介騙來泰國打工谜诫， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人涮阔。 一個(gè)月前我還...
    沈念sama閱讀 46,571評(píng)論 2贊 362
  • 代替公主和親
    正文 我出身青樓猜绣，卻偏偏與公主長得像，于是被迫代替她去往敵國和親敬特。 傳聞我的和親對(duì)象是個(gè)殘疾皇子掰邢，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,666評(píng)論 2贊 350

推薦閱讀更多精彩內(nèi)容

  • 先來看看微信分享效果： 在沒有集成微信分享js-sdk前是這樣的：沒有摘要，縮略圖任意抓取正文圖片 在集成微信分享...
    思?jí)鬚HP閱讀 7,416評(píng)論 6贊 4
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理伟阔，服務(wù)發(fā)現(xiàn)辣之，斷路器，智...
    卡卡羅2017閱讀 134,637評(píng)論 18贊 139
  • 最近一個(gè)項(xiàng)目原來好好的微信分享突然就不行了皱炉，分享到朋友圈沒有了文章里的縮略圖怀估，而且鏈接地址也變成了項(xiàng)目入口地...
    JonsonHamilton閱讀 3,842評(píng)論 1贊 1
  • 書上說，刻意去找的東西，往往是找不到的多搀。天下萬物的來和去歧蕉，都有Ta的時(shí)間。 上帝很忙康铭，每天要安排那...
    書小樂閱讀 297評(píng)論 0贊 0
  • 按螞蟻班算法从藤，本人未滿十八歲催跪，是青春無敵美少女，是在群里不太發(fā)言的喝水吃瓜群眾夷野，是跑量與全馬成績平平的跑渣这揣。 呃嚎莉，...
    qxydd閱讀 698評(píng)論 3贊 2