資訊專(zhuān)欄INFORMATION COLUMN
摘要：最近做個(gè)移動(dòng)端的應(yīng)用，要實(shí)現(xiàn)自定義微信分享功能，實(shí)現(xiàn)過(guò)程中遇到一些小小的坑，這里分享一下。后來(lái)微信放出了，開(kāi)始對(duì)端提供豐富強(qiáng)大的官方接口支持，也逐漸淡出了開(kāi)發(fā)者的視野。
最近做個(gè)移動(dòng)端的H5應(yīng)用，要實(shí)現(xiàn)自定義微信分享功能，實(shí)現(xiàn)過(guò)程中遇到一些小小的坑，這里分享一下。
以前微信官方是沒(méi)有正式支持微信分享的自定義接口（包括圖片、標(biāo)題、描述）的，然而有一些大神找到了WeixinJSBridge這個(gè)強(qiáng)大的“對(duì)象”，一個(gè)方法調(diào)用就輕而易舉地實(shí)現(xiàn)了分享功能。
后來(lái)微信放出了JSSDK，開(kāi)始對(duì)H5端提供豐富、強(qiáng)大的官方接口支持，WeixinJSBridge也逐漸淡出了開(kāi)發(fā)者的視野。
然而這個(gè)JSSDK的調(diào)用方法，實(shí)現(xiàn)起來(lái)卻并不是太容易。難點(diǎn)不在于技術(shù)上，而是業(yè)務(wù)流程上。雖然是一個(gè)前端的接口，但是為了安全性，微信要求開(kāi)發(fā)者進(jìn)行服務(wù)端的驗(yàn)證，而這個(gè)驗(yàn)證竟然還要分兩步來(lái)進(jìn)行……如此一來(lái)，對(duì)于僅僅是想要實(shí)現(xiàn)一個(gè)“分享到朋友圈”功能的人來(lái)說(shuō)，真是有點(diǎn)叫人吐血。
事實(shí)上呢，這個(gè)后端的兩步驗(yàn)證，對(duì)于熟悉微信開(kāi)發(fā)流程的人來(lái)說(shuō)，也是很合理的。因?yàn)榈谝徊剑@取“AccessToken”，是所有微信業(yè)務(wù)的起點(diǎn)；而第二步，獲取JSApi的簽名，才是使用JSSDK對(duì)應(yīng)的需求。如果說(shuō)項(xiàng)目上本來(lái)就針對(duì)微信進(jìn)行了一些開(kāi)發(fā)，這點(diǎn)需求應(yīng)該是可以很快解決了。
好了，廢話(huà)到此結(jié)束，下面說(shuō)后端接口具體實(shí)現(xiàn)步驟。接口的實(shí)現(xiàn)是基于PHP語(yǔ)言的，PHP的語(yǔ)法簡(jiǎn)單明了，相信各位不熟悉這門(mén)語(yǔ)言的同學(xué)應(yīng)該能夠理解；代碼已經(jīng)托管在OSChina上開(kāi)源共享，可以下載使用；鏈接見(jiàn)文章末尾。
第一步，官方文檔是一定要細(xì)讀的。然后你的微信公眾號(hào)已經(jīng)通過(guò)認(rèn)證，這點(diǎn)是不用提醒的吧？
第二步，綁定安全域名。公眾號(hào)后臺(tái)左菜單 -> 設(shè)置 -> 公眾號(hào)設(shè)置 -> 功能設(shè)置 -> JS接口安全域名。注意這里填寫(xiě)頂級(jí)域名的話(huà)，對(duì)其所有子域名都是有效的。所以為了有效利用三個(gè)名額，最好直接填寫(xiě)頂級(jí)域名。
第三步，寫(xiě)代碼了。這里虛擬了一個(gè)項(xiàng)目，包括前端和服務(wù)端的實(shí)現(xiàn)。
代碼：http://git.oschina.net/w2ex/snipets/tree/master/weixinapi
演示：http://snipets.willizm.cn/weixinapi/webapp/
項(xiàng)目目錄結(jié)構(gòu)：
/ /data 數(shù)據(jù)目錄，用來(lái)存放微信端獲取到的AccessToken和Ticket數(shù)據(jù) /lib /lib/Weixin.class.php 微信接口類(lèi)庫(kù) /webapp 前端示例 /webapp/index.html /webapp/main.js /api.php 服務(wù)端接口示例，這里演示了對(duì)jsonp的支持 /config.php 配置文件，包括appId、appSecret、數(shù)據(jù)目錄，順帶支持SAE環(huán)境 /callback.php 微信回調(diào)接口，代碼直接拷貝微信文檔中的Demo
重點(diǎn)在于Weixin.class.php中三個(gè)方法的實(shí)現(xiàn)：getAccessToken、getTicket、createSignature。這三個(gè)方法各自有一些注意事項(xiàng)，前面兩個(gè)都要求用戶(hù)在服務(wù)端緩存微信接口返回的數(shù)據(jù)，因此在每次調(diào)用時(shí)都要檢查一下是否已經(jīng)過(guò)期；第三個(gè)方法則有兩點(diǎn)容易犯低級(jí)錯(cuò)誤：其一，前端傳過(guò)來(lái)的url是不需要hash部分（就是#及其后面的一段）的，這個(gè)前端需要注意；其二，服務(wù)端簽名算法中拼接字符串時(shí)nonceStr是全部小寫(xiě)的，應(yīng)寫(xiě)成noncestr，再就是要注意拼接的順序不能錯(cuò)。
前端部分，除了上面說(shuō)的傳遞url時(shí)需要去掉hash外，還需注意，業(yè)務(wù)邏輯應(yīng)盡可能wx.ready中調(diào)用，以避免網(wǎng)絡(luò)延遲帶來(lái)的問(wèn)題。開(kāi)發(fā)調(diào)試時(shí)記得開(kāi)啟調(diào)試選項(xiàng)，這樣就可以根據(jù)彈出的錯(cuò)誤碼來(lái)對(duì)照文檔排查問(wèn)題。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/86205.html
摘要：最近做個(gè)移動(dòng)端的應(yīng)用，要實(shí)現(xiàn)自定義微信分享功能，實(shí)現(xiàn)過(guò)程中遇到一些小小的坑，這里分享一下。后來(lái)微信放出了，開(kāi)始對(duì)端提供豐富強(qiáng)大的官方接口支持，也逐漸淡出了開(kāi)發(fā)者的視野。 最近做個(gè)移動(dòng)端的H5應(yīng)用，要實(shí)現(xiàn)自定義微信分享功能，實(shí)現(xiàn)過(guò)程中遇到一些小小的坑，這里分享一下。 以前微信官方是沒(méi)有正式支持微信分享的自定義接口（包括圖片、標(biāo)題、描述）的，然而有一些大神找到了WeixinJSBridge...
摘要：備注登錄后可在開(kāi)發(fā)者中心查看對(duì)應(yīng)的接口權(quán)限。下載官網(wǎng)提供的示例代碼，參照中的代碼一步一步來(lái)實(shí)現(xiàn)。否則分享后的頁(yè)面會(huì)簽名失敗返回的與分享的是否一致 首先完成官方文檔前兩步（很好理解就不具體說(shuō)了）：步驟一：綁定域名先登錄微信公眾平臺(tái)進(jìn)入公眾號(hào)設(shè)置的功能設(shè)置里填寫(xiě)JS接口安全域名。備注：登錄后可在開(kāi)發(fā)者中心查看對(duì)應(yīng)的接口權(quán)限。步驟二：引入JS文件在需要調(diào)用JS接口的頁(yè)面引入如下JS文件，（支...
摘要：點(diǎn)擊右上角的分享到朋友圈按鈕，會(huì)看到如圖所示的。圖測(cè)試用例分享界面圖分享到朋友圈圖分享到朋友圈成功提示微信公眾平臺(tái)網(wǎng)頁(yè)開(kāi)發(fā)實(shí)戰(zhàn)混合開(kāi)發(fā)解密歡迎一起交流本書(shū) 對(duì)微信的JSSDK進(jìn)行封裝一下，創(chuàng)建一份類(lèi)似的文件結(jié)構(gòu)，增加index.html與shareApi.js文件，結(jié)構(gòu)如圖3.3所示。showImg(https://segmentfault.com/img/bVPdlg?w=145&h...
閱讀 2544·2021-11-24 10:20
閱讀 2392·2021-09-10 10:51
閱讀 3381·2021-09-06 15:02
閱讀 3114·2019-08-30 15:55
閱讀 2841·2019-08-29 18:34
閱讀 3080·2019-08-29 12:14
閱讀 1218·2019-08-26 13:53
閱讀 2931·2019-08-26 13:43
