最近作個移動端的H5應用,要實現自定義微信分享功能,實現過程當中遇到一些小小的坑,這裏分享一下。php
之前微信官方是沒有正式支持微信分享的自定義接口(包括圖片、標題、描述)的,然而有一些大神找到了WeixinJSBridge這個強大的「對象」,一個方法調用就垂手可得地實現了分享功能。html
後來微信放出了JSSDK,開始對H5端提供豐富、強大的官方接口支持,WeixinJSBridge也逐漸淡出了開發者的視野。前端
然而這個JSSDK的調用方法,實現起來卻並非太容易。難點不在於技術上,而是業務流程上。雖然是一個前端的接口,可是爲了安全性,微信要求開發者進行服務端的驗證,而這個驗證居然還要分兩步來進行……如此一來,對於僅僅是想要實現一個「分享到朋友圈」功能的人來講,真是有點叫人吐血。git
事實上呢,這個後端的兩步驗證,對於熟悉微信開發流程的人來講,也是很合理的。由於第一步,獲取「AccessToken」,是全部微信業務的起點;而第二步,獲取JSApi的簽名,纔是使用JSSDK對應的需求。若是說項目上原本就針對微信進行了一些開發,這點需求應該是能夠很快解決了。web
好了,廢話到此結束,下面說後端接口具體實現步驟。接口的實現是基於PHP語言的,PHP的語法簡單明瞭,相信各位不熟悉這門語言的同窗應該可以理解;代碼已經託管在OSChina上開源共享,能夠下載使用;連接見文章末尾。算法
第一步,官方文檔是必定要細讀的。而後你的微信公衆號已經經過認證,這點是不用提醒的吧?json
第二步,綁定安全域名。公衆號後臺左菜單 -> 設置 -> 公衆號設置 -> 功能設置 -> JS接口安全域名。注意這裏填寫頂級域名的話,對其全部子域名都是有效的。因此爲了有效利用三個名額,最好直接填寫頂級域名。後端
第三步,寫代碼了。這裏虛擬了一個項目,包括前端和服務端的實現。api
代碼: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中調用,以免網絡延遲帶來的問題。開發調試時記得開啓調試選項,這樣就能夠根據彈出的錯誤碼來對照文檔排查問題。