微信公眾號開發之JS-SDK

一、微信公眾號后台的設置

1.設置IP白名單

• 作用：為了提高公眾平台開發者接口調用的安全性，避免一旦開發者ID和密碼泄露后給帳號造成損失。我們對調用“獲取access_token”接口（下文有詳細介紹）增加IP白名單校驗：只有將IP地址設置為公眾號的IP白名單，才能成功調用該接口。
• 流程：開發--------基本配置--------公眾號開發信息--------IP白名單

 2.設置開發者密碼（AppSecret）

• 作用：后期獲取access_token（下文有介紹）需要作為參數
• 流程：開發--------基本配置--------公眾號開發信息--------開發者密碼（AppSecret）
• 注意點：平台查看不了，如果忘記就只能重新設置，所以最好要自己保存起來。
• 

 

二、后端的書寫

1.概念：

　　（1）jsapi_ticket：是公眾號用於調用微信JS接口的臨時票據。要通過access_token來獲取。有效期7200秒，調用次數有限，最好緩存在服務器。

　　（2）access_token：是公眾號的全局唯一接口調用憑據，公眾號調用各接口時都需使用access_token。（我很重要，除非你不需要使用微信接口~~）長度：至少512個字符；有效期：7200秒 （注意點：需要定時刷新，重復獲取將導致上次獲取的access_token失效。為保證平滑過渡，5分鍾內，新舊access_token都可以使用）

　　（3）signature：JS-SDK權限驗證的簽名，前端調取微信接口需使用。

2.思路：

　　先獲取access_token，再獲取jsapi_ticket，再生成signature

3.過程：

　　（1）獲取access_token：

　　　　　　https請求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

  　　　　　 參數：  appid  和  secret

		function get_access_token(){
			$url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$this->appId.'&secret='.$this->appSecret.'';
			$result = json_decode(file_get_contents($url),true);
			if(!isset($result['access_token'])){
				return '';
			}
			return $result['access_token'];
		}

　　（2）獲取jsapi_ticket：

　　　　　　https請求方式: GET https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

  　　　　　 參數： access_token

		function get_jsapi_ticket(){
			$this->access_token = $this->get_access_token();
			$url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$this->access_token.'&type=jsapi';
			$result = json_decode(file_get_contents($url),true);
			if(!isset($result['ticket'])){
				return '';
			}
			return $result['ticket'];
		}

　　（3）先排序，后簽名：

　　　　　　ASCII 碼排序：jsapi_ticket=JSAPI_TICKET&noncestr=NONCESTR&timestamp=TIMESTAMP&url=URL

　　　　　　簽名：sha1(String)

　　　　　　參數：jsapi_ticket、noncestr（隨機字符串）、timestamp（時間戳） 和 url（需要調用接口的前端頁面的路徑）

		function get_signature($ticket,$noncestr,$timestamp,$url){
			$url = explode('#',$url);
			$str = 'jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'&timestamp='.$timestamp.'&url='.$url[0];
			return sha1($str);
		}

　　（4）要緩存access_token，定期進行刷新

 

三、前端的書寫

1.引入JS文件

　　在需要調用JS接口的地方添加：<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.注入配置信息

　　通過config接口注入權限驗證配置

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

前幾個參數由后端傳過來，最后一個的配置查  JS接口列表

3.通過ready接口處理成功驗證和自定義接口

wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
  wx.updateAppMessageShareData({ 
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
    imgUrl: '', // 分享圖標
    success: function () {
      // 設置成功
    }
  })
........

}); 

　這里調用的各種接口，需要在上面的配置信息中的　jsApiList  進行配置，並不是所有的公眾號都能調用所有的接口的。比如我現在使用的公眾號是個人公眾號，很多接口都沒有權限，分享什么的都不行。

 

四、源碼

點擊下載

 

五、參考資料

　　1.微信開放文檔