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