微信公衆平臺JSSDK分享接口開發（PHP實現）

最近作個移動端的H5應用，要實現自定義微信分享功能，實現過程當中遇到一些小小的坑，這裏分享一下。

之前微信官方是沒有正式支持微信分享的自定義接口（包括圖片、標題、描述）的，然而有一些大神找到了WeixinJSBridge這個強大的「對象」，一個方法調用就垂手可得地實現了分享功能。

後來微信放出了JSSDK，開始對H5端提供豐富、強大的官方接口支持，WeixinJSBridge也逐漸淡出了開發者的視野。

然而這個JSSDK的調用方法，實現起來卻並非太容易。難點不在於技術上，而是業務流程上。雖然是一個前端的接口，可是爲了安全性，微信要求開發者進行服務端的驗證，而這個驗證居然還要分兩步來進行……如此一來，對於僅僅是想要實現一個「分享到朋友圈」功能的人來講，真是有點叫人吐血。

事實上呢，這個後端的兩步驗證，對於熟悉微信開發流程的人來講，也是很合理的。由於第一步，獲取「AccessToken」，是全部微信業務的起點；而第二步，獲取JSApi的簽名，纔是使用JSSDK對應的需求。若是說項目上原本就針對微信進行了一些開發，這點需求應該是能夠很快解決了。

好了，廢話到此結束，下面說後端接口具體實現步驟。接口的實現是基於PHP語言的，PHP的語法簡單明瞭，相信各位不熟悉這門語言的同窗應該可以理解；代碼已經託管在OSChina上開源共享，能夠下載使用；連接見文章末尾。

第一步，官方文檔是必定要細讀的。而後你的微信公衆號已經經過認證，這點是不用提醒的吧？

第二步，綁定安全域名。公衆號後臺左菜單 -> 設置 -> 公衆號設置 -> 功能設置 -> JS接口安全域名。注意這裏填寫頂級域名的話，對其全部子域名都是有效的。因此爲了有效利用三個名額，最好直接填寫頂級域名。

第三步，寫代碼了。這裏虛擬了一個項目，包括前端和服務端的實現。

代碼：http://git.oschina.net/w2ex/snipets/tree/master/weixinapi
演示：http://snipets.willizm.cn/weixinapi/webapp/

項目目錄結構：

/
/data     數據目錄，用來存放微信端獲取到的AccessToken和Ticket數據
/lib      
/lib/Weixin.class.php 微信接口類庫
/webapp   前端示例
/webapp/index.html
/webapp/main.js
/api.php  服務端接口示例，這裏演示了對jsonp的支持
/config.php  配置文件，包括appId、appSecret、數據目錄，順帶支持SAE環境
/callback.php   微信回調接口，代碼直接拷貝<a href="http://mp.weixin.qq.com/mpres/htmledition/res/wx_sample.20140819.zip" data-mce-href="http://mp.weixin.qq.com/mpres/htmledition/res/wx_sample.20140819.zip">微信文檔中的Demo</a>

重點在於Weixin.class.php中三個方法的實現：getAccessToken、getTicket、createSignature。這三個方法各自有一些注意事項，前面兩個都要求用戶在服務端緩存微信接口返回的數據，所以在每次調用時都要檢查一下是否已通過期；第三個方法則有兩點容易犯低級錯誤：其一，前端傳過來的url是不須要hash部分（就是#及其後面的一段）的，這個前端須要注意；其二，服務端簽名算法中拼接字符串時nonceStr是所有小寫的，應寫成noncestr，再就是要注意拼接的順序不能錯。

前端部分，除了上面說的傳遞url時須要去掉hash外，還需注意，業務邏輯應儘量wx.ready中調用，以免網絡延遲帶來的問題。開發調試時記得開啓調試選項，這樣就能夠根據彈出的錯誤碼來對照文檔排查問題。