最近做個移動端的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中呼叫，以避免網路延遲帶來的問題。開發除錯時記得開啟除錯選項，這樣就可以根據彈出的錯誤碼來對照文件排查問題。