H5調用微信JSSDK開發總結

最近需要開發一個小項目,他的一個需求爲:能夠在微信中分享(轉發好友以及朋友圈),而且要求圖片和標題摘要等內容自定義。本着試一試的態度,我用手機訪問自己搭建在服務器上的IP地址,打開後映入眼簾的是這樣的(這是由於我沒有設置JS安全域名造成的):

分享給好友是這樣的:

鞥???這也太難看了吧,我的摘要呢?我的小圖片呢?

於是我去問度娘,聽他們都在說一個叫做JSSDK的東西,在微信中要分享鏈接是需要微信公衆號的權限的,而且只有認證過的公衆號和訂閱號纔有分享的權限:接口權限說明

 

接下來看文檔:去查看微信公衆號開發文檔

選擇左邊的”微信網頁開發“ -> ”JS-SDK開發“:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

發現這個東西是真的挺繞的,想要實現這個一個小功能是真的複雜,下面將過程總結如下: 

1 公衆號設置

想要擀成這麼一件事情,首先你得有一個微信公衆號(由於需要實現分享功能,我使用的公衆號必須是認證過的公衆號),然後進入微信公衆平臺:進入”開發“->”基本配置“得到開發者ID,開發者密碼,並且設置IP白名單(就是你服務器的IP地址)。

然後進入到”設置" -> “公衆號設置” -> “功能設置"設置JS接口安全域名:就是解析到你的服務器IP的那個域名。

2 利用開發者ID和開發者密碼進行後面的事情

這一塊的詳細邏輯可以看官方文檔,我已經把整個的邏輯理了一下,如下圖所示:

其中深綠色的數據就是在通過config接口主入權限驗證所需要的配置信息,接口如下圖所示。需要說明的一點是,上圖中的所有內容應該是在你的服務器中完成的,最終服務器只給你返回一個類似json格式的數據,數據項就是深綠色的字段,然後在前端的js代碼中讀取即可。

以上只講了一些理論,但是理清思路之後會容易很多。

 

3 一些其他事情 

在開發這個小項目的過程中我遇到了無數的坑,接下來推薦幾個小工具:

3.1 微信測試公衆號

可以通過微信提供的測試公衆號進行測試,測試公衆號具有所有的權限,具體使用看這裏:微信測試號申請

3.2 微信公衆平臺接口調試工具

可以對上面的那個流程圖中的接口進行調試:微信公衆平臺接口調試工具

3.3 公衆號調用接口返回碼對照

所有的返回碼說明

3.4 JS-SDK官方demo

DEMO頁面: http://demo.open.weixin.qq.com/jssdk 

示例代碼:

http://demo.open.weixin.qq.com/jssdk/sample.zip

備註:鏈接中包含php、java、nodejs以及python的示例代碼供第三方參考,第三方切記要對獲取的accesstoken以及jsapi_ticket進行緩存以確保不會觸發頻率限制。

3.5 一定多看官方文檔!

有問題就去查百度並不是一個好習慣,往上的答案五花八門,越查頭越大。最好的辦法是看官方文檔。

3.6 推薦的教程

微信H5自定義分享接口,jssdk分享到朋友圈demo

ubuntu下安裝配置apache2與php (由於我對php比較熟,所以用的php版本的代碼,apache+php)

php7.2調用curl_init()報錯解決方案

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章