微信公眾平臺開發網頁開發
以前寫過一篇《微信公眾平臺開發的一點收穫》,這一篇說說微信公眾平臺網頁開發的知識。微信公眾平臺應該是國內最大的開放平臺,對於技術開發人員來說,不管有沒有自己的公眾號,應該也要有一定的瞭解,其實只要有一個域名和虛擬主機,就基本上能夠嘗試著去開發。
回顧上篇文章的知識點
(1)上篇文章的內容可以理解為公眾號訊息開發,這裡的訊息可以是公眾號文章或者是訊息會話,使用者為了有權使用公眾號的功能,必須關注對應的公眾號。因為使用者關注公眾號了,所以開發者可以間接認為有權利獲取使用者的基本資訊,都直接能夠拿到使用者的 OpenID(在相關介面中)。
(2)access_token 概念,公眾號開發者為了有權呼叫公眾號 API,必須先經過微信的授權,這個授權碼就是 access_token(開發者 access_token),這個 access_token 是和開發者繫結的(而非同使用者繫結)。
什麼是公眾號網頁開發呢?
公眾號訊息開發是使用者必須加入這個公眾號,然後開發者利用公眾號平臺提供的一些 API (功能)和使用者來互動。除了公眾號文章這裡沒有網頁的概念(文章雖然是網頁,但開發者沒有任何能力控制)。
現在考慮這樣一種場景,一個開發者要提供一個電商服務,有他自己的業務邏輯(比如頁面),通過公眾號訊息開發是提供不了這樣的服務,為了解決這個問題,開發者可以做一個網頁,然後在公眾號選單中引入這個網頁,這樣使用者點選選單開啟網頁就能使用電商服務。
還有一種場景,某個服務商提供了一個調查問卷服務(以網頁的形式),然後你的微信好友通過訊息傳送給你,你開啟連結就能使用這個服務了(不一定是在公眾號中開啟)。
再舉個場景,微信有很多第三方服務,比如大眾點評,相當於也是開啟一個網頁。
為了有效的提供這樣場景的服務,微信公眾號官方提供了網頁開發這個概念,主要包括三部分:
(1)在微信中開啟服務,這時候微信首先相當於一個瀏覽器,有瀏覽器就有 Javascript 操作,為了安全性微信這個“瀏覽器”肯定要做一些限制;為了提供微信的一些本地功能(比如呼叫相機),微信也提供了一些 JS-SDK,這樣開發者就能呼叫這個 SDK 提供微信的一些功能。
(2)既然是開放平臺,所有的服務都嵌入在微信中,為了讓開發者提供的服務更具有一致性(就是外觀),微信也提供了 UI 庫,有了 UI 庫,開發者開發的網頁就能更好的適配,實際上這個功能有點雞肋,很少有用這個庫的,都是為了讓自己的網頁更個性化。
(3)假如是在微信中嵌入一個網站的網頁,由於這個網頁和公眾號沒有任何關係,那麼這個網頁怎麼知道是那個微信使用者(OpenID)打開了這個網頁呢?公眾號通過授權的方式讓開發者能夠獲取使用者的資訊,這個授權就是標準的 oAuth 協議,通俗的說就是開發者假如需要獲取使用者資訊,首先要取得使用者的同意,這樣公眾號才能讓你獲取資訊。仔細想下為什麼訊息公眾號開發能夠直接獲取使用者資訊?
概括的說,網頁開發包括,網頁授權、JS-SDK、UI 庫。
網頁授權
由於自己申請的公眾號沒有微信認證(就是沒交錢),所以網頁授權這個服務用不了,不過個人使用過微博開放平臺的授權,原理差不多,所以簡單的描述下。
(1)要使用網頁授權,在後臺配置下回調域名就可以,不同於微博開放平臺,不用提供回撥 URL ,只要域名就可以。
(2)scope,有兩種授權方式,第一種就是假如一個微信使用者已經加入公眾號(相當於半授權了),那麼這種授權方式叫靜默授權(snsapi_base),就是說使用者看不到官方的授權頁面,會直接進入開發者提供的網頁中,這種授權方式只能拿到 OpenID(通過其他介面再獲取資訊)。
另外一種授權方式可以稱之為完整授權(snsapi_userinfo),就是手使用者能看到完整的授權頁面,經過使用者確認後再進入開發者提供的網頁中,這種授權方式能夠直接拿到使用者資訊(省去一次介面呼叫)。
(3)授權流程
假如開發者明白 oAuth 協議,這個流程就非常簡單了。
- 首先開發者通過 authorize 介面(傳遞迴調地址和 appid )獲取授權地址。
- 使用者開啟授權地址並授權後,微信會回撥開發者的回撥地址,並返回 code 值。
- 開發者傳遞 code 呼叫 access_token 介面獲取使用者 access_token 和 OpenID 值,這個值的有效期一般是 7200 秒。
- 為了避免使用者頻繁授權,開發者可以用即將過期的 access_token 重新整理 access_token(refresh_token介面)。
- 通過傳遞使用者 access_token 和 OpenID 呼叫 userinfo 介面獲取使用者資訊。
這裡的使用者 access_token 和開發者 access_token 不是一回事,分別代表使用者授權和公眾號授權。
PHP-SDK 中通過簡單的幾個函式呼叫就能實現授權。
JS-SDK
在 PC 網頁開發中,通過 Javascript 能夠呼叫瀏覽器的功能;同理微信其實就是一個瀏覽器,為了呼叫瀏覽器(微信)的功能,微信提供了一個 JS-SDK 包,這樣就能呼叫相應的功能了。
使用很簡單,首先引入對應的 js 檔案即可。然後在動態網頁中配置 config 資訊即可
<script>
wx.config({
debug: true,
appId: 'wx3505a38e6f83b187',
timestamp: 1490782160,
nonceStr: 'ogZFeZaYLMhCQiez',
signature: 'c1bd73bc505840a4db142873306bf10f243444ff',
jsApiList: [
]
});
wx.ready(function () {
document.querySelector('#checkJsApi').onclick = function () {
wx.checkJsApi({
jsApiList: [
'getNetworkType',
'previewImage'
],
success: function (res) {
//alert(JSON.stringify(res));
}
});
};
</script>
使用 JS-SDK 最關鍵的包括二部分:
(1)jsapi_ticket ,使用 jsapi_ticket 也是需要微信公眾號平臺授權的,否則任何人都能使用了。
jsapi_ticket 是呼叫相應介面生成的(傳遞 access_token 引數),這個 access_token 是訊息公眾號開發者的 access_token(不是使用者的),思考下為啥 JS-SDK 不直接使用 access_token 而要使用 jsapi_ticket ?
(2)獲取到 jsapi_ticket 後,會對時間戳、隨機數、jsapi_ticket、當前 URL 簽名後生成 wx.config,假如微信驗證簽名通過後,代表能夠使用對應的 JS-SDK。
PHP-SDK 中通過簡單的幾個函式呼叫就能生成簽名,非常方便。
UI 庫
UI 庫其實非常簡單,就理解為一個小型的 bootstrap 庫就可以了。在微信上也很少看到開發者用這個庫的。思考了下原因,在 PC 網頁和公眾號上為了保持樣式一致性,開發者會用統一的 UI 庫,但是微信沒有 PC 網頁。
最後說下,沒有經過微信認證的開發許可權越來越小了,舉個例子,假如沒有經過微信認證,微信公眾號選單上無法配置網頁的 URL。