以前寫過一篇《微信公眾平臺開發的一點收穫》，這一篇說說微信公眾平臺網頁開發的知識。微信公眾平臺應該是國內最大的開放平臺，對於技術開發人員來說，不管有沒有自己的公眾號，應該也要有一定的瞭解，其實只要有一個域名和虛擬主機，就基本上能夠嘗試著去開發。

回顧上篇文章的知識點

（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。