配置並學習微信JS-SDK（1）

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

微信JS-SDK demo http://demo.open.weixin.qq.com/jssdk/#menu-device

微信JS-SDK 說明文檔：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

demo地址 http://www.qq210.com/shoutu/android

1. 配置公眾號：微信后台-公眾號設置-功能設置-JS接口安全域名
2. 引入JS文件：

   <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

3. 配置js接口接入的配置（根據附錄1獲取簽名）：

   wx.config({
             debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。上線需設置false
             appId: 'wx693f4c6207512348b33', // 必填，公眾號的唯一標識 微信后台-開發者中心
             timestamp: , // 必填，生成簽名的時間戳
             nonceStr: '', // 必填，生成簽名的隨機串
             signature: '',// 必填，簽名，見附錄1
             jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
         });

   1. access_token ,需要后台緩存jsapi_ticket,有效期7200秒
   2. 根據access_token獲取jsapi_ticket ,需要后台緩存jsapi_ticket,有效期7200秒
   3. 根據sha1(jsapi_ticket+url+timestamp+自定義隨機串)求出配置中的signature

      $this->load->driver( 'cache' );
      
              //獲取access_token,jsapi_ticket緩存
              $access_token = $this->cache->kvdb->get( 'access_token' );
              $jsapi_ticket = $this->cache->kvdb->get( 'jsapi_ticket' );
              log_message('error', "獲取access_token={$access_token},jsapi_ticket={$access_token}緩存");
      
              //如果不存在access_token緩存
              if ( ! $access_token AND ! $jsapi_ticket ) {
                  log_message('error', '如果不存在access_token緩存');
      
                  $this->load->library('MyFetchurl');
      
                  //1.獲取access_token
                  $access_token_json = $this->myfetchurl->https_get( "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".APPID."&secret=".APPSECRET );
      
                  //把 json_decode() 后的對象當作數組使用，需要加第二個參數才是數組返回
                  $access_token_decode = json_decode( $access_token_json, true );
      
                  $access_token = isset( $access_token_decode['access_token'] ) ? $access_token_decode['access_token'] : '';
                  log_message('error', "獲取access_token={$access_token}");
      
                  //設置access_token緩存
                  $result = $this->cache->kvdb->save( 'access_token', $access_token, EXPIRE_TIME );
                  log_message('error', "設置access_token緩存$result");
      
                  //2.獲取jsapi_ticket
                  $jsapi_ticket_json = $this->myfetchurl->https_get( "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi" );
                  $jsapi_ticket_decode = json_decode( $jsapi_ticket_json, true );
                  $jsapi_ticket = isset( $jsapi_ticket_decode['ticket'] ) ? $jsapi_ticket_decode['ticket'] : '';        
                  log_message('error', "獲取jsapi_ticket=$jsapi_ticket");
      
                  //設置jsapi_ticket緩存
                  $result = $this->cache->kvdb->save( 'jsapi_ticket', $jsapi_ticket, EXPIRE_TIME );    
                  log_message('error', "設置jsapi_ticket緩存=$jsapi_ticket");
      
      

               //3.簽名算法 

       

              // 3.1.構造拼接串

              $view_data['timestamp'] = $timestamp = time();

              $view_data['noncestr'] = $noncestr = md5($timestamp);

              $url = base_url();

              $string = "jsapi_ticket={$jsapi_ticket}&noncestr={$noncestr}&timestamp={$timestamp}&url={$url}";

              log_message('error', "構造拼接串string=$string");

       

              // 3.2.sha1拼接串

              $view_data['signature'] = sha1($string);

              $this->load->view('index.html', $view_data);

   4.   總結下上面求取簽名問題
      1. sae上的curl不支持https，換成SaeFetchurl去獲取:封裝成方法sae_fetchurl（$url, $post_data）
      2. json_decode的結果是對象，折騰很久：傳人第二個參數true就可以返回數組形式
      3. SAE版的CI緩存類數據緩存獲取用get() 而不是demo里面的get_metadata()，這個是獲取包括緩存時間數據
   5. 訂閱號的可以調用的js接口以及最后配置文件如下

      wx.config({
                debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
                appId: 'wx693f4c620712348b', // 必填，公眾號的唯一標識
                timestamp: '<?=$timestamp?>', // 必填，生成簽名的時間戳
                nonceStr: '<?=$noncestr?>', // 必填，生成簽名的隨機串
                signature: '<?=$signature?>',// 必填，簽名，見附錄1
                jsApiList: [// 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
                  'checkJsApi',
                  'hideMenuItems',
                  'showMenuItems',
                  'hideAllNonBaseMenuItem',
                  'showAllNonBaseMenuItem',
                  'translateVoice',
                  'startRecord',
                  'stopRecord',
                  'onRecordEnd',
                  'playVoice',
                  'pauseVoice',
                  'stopVoice',
                  'uploadVoice',
                  'downloadVoice',
                  'chooseImage',
                  'previewImage',
                  'uploadImage',
                  'downloadImage',
                  'getNetworkType',
                  'openLocation',
                  'getLocation',
                  'hideOptionMenu',
                  'showOptionMenu',
                  'closeWindow',
                  'scanQRCode'
                ] 
            });

4. 測試是否驗證成功

   // 微信
   wx.error(function(res){
     console.log('驗證失敗');
   });
   
   wx.ready(function(){
     document.querySelector('#checkJsApi').onclick = function() {
       wx.checkJsApi({
         jsApiList:[
           'getNetworkType',
           'previewImage'
         ],
         success:function(res){
           alert(JSON.string)
         }
       });
     }
   
     // 6 設備信息接口
     // 6.1 獲取當前網絡狀態
     document.querySelector('#getNetworkType').onclick = function () {
       wx.getNetworkType({
         success: function (res) {
           alert(res.networkType);
         },
         fail: function (res) {
           alert(JSON.stringify(res));
         }
       });
     };
   });

在微信瀏覽器測試，調用結果功能成功！

測試demo http://www.qq210.com/shoutu/android

因為漏了copy簽名算法上來，補充上 如藍色部分 謝謝陸先生的提示