以前寫過一篇《微信公眾平臺開發(fā)的一點收獲》芥驳，這一篇說說微信公眾平臺網(wǎng)頁開發(fā)的知識茬高。微信公眾平臺應(yīng)該是國內(nèi)最大的開放平臺，對于技術(shù)開發(fā)人員來說怎栽，不管有沒有自己的公眾號，應(yīng)該也要有一定的了解脚祟，其實只要有一個域名和虛擬主機强饮，就基本上能夠嘗試著去開發(fā)。
回顧上篇文章的知識點
（1）上篇文章的內(nèi)容可以理解為公眾號消息開發(fā)邮丰，這里的消息可以是公眾號文章或者是消息會話剪廉，用戶為了有權(quán)使用公眾號的功能，必須關(guān)注對應(yīng)的公眾號妈经。因為用戶關(guān)注公眾號了，所以開發(fā)者可以間接認(rèn)為有權(quán)利獲取用戶的基本信息骤星，都直接能夠拿到用戶的 OpenID（在相關(guān)接口中）爆哑。
（2）access_token 概念，公眾號開發(fā)者為了有權(quán)調(diào)用公眾號 API队贱，必須先經(jīng)過微信的授權(quán)潭袱，這個授權(quán)碼就是 access_token（開發(fā)者 access_token），這個 access_token 是和開發(fā)者綁定的（而非同用戶綁定）屯换。
什么是公眾號網(wǎng)頁開發(fā)呢与学？
公眾號消息開發(fā)是用戶必須加入這個公眾號嘉抓，然后開發(fā)者利用公眾號平臺提供的一些 API （功能）和用戶來交互抑片。除了公眾號文章這里沒有網(wǎng)頁的概念（文章雖然是網(wǎng)頁，但開發(fā)者沒有任何能力控制）敞斋。
現(xiàn)在考慮這樣一種場景，一個開發(fā)者要提供一個電商服務(wù)挫鸽，有他自己的業(yè)務(wù)邏輯（比如頁面）鸥跟，通過公眾號消息開發(fā)是提供不了這樣的服務(wù)，為了解決這個問題医咨，開發(fā)者可以做一個網(wǎng)頁，然后在公眾號菜單中引入這個網(wǎng)頁干茉，這樣用戶點擊菜單打開網(wǎng)頁就能使用電商服務(wù)很泊。
還有一種場景，某個服務(wù)商提供了一個調(diào)查問卷服務(wù)（以網(wǎng)頁的形式）戳鹅，然后你的微信好友通過消息發(fā)送給你昏兆，你打開鏈接就能使用這個服務(wù)了（不一定是在公眾號中打開）。
再舉個場景爬虱，微信有很多第三方服務(wù)，比如大眾點評死讹，相當(dāng)于也是打開一個網(wǎng)頁曲梗。
為了有效的提供這樣場景的服務(wù)逛腿，微信公眾號官方提供了網(wǎng)頁開發(fā)這個概念仅颇，主要包括三部分:
（1）在微信中打開服務(wù)碘举，這時候微信首先相當(dāng)于一個瀏覽器引颈，有瀏覽器就有 Javascript 操作，為了安全性微信這個“瀏覽器”肯定要做一些限制蝙场；為了提供微信的一些本地功能（比如調(diào)用相機），微信也提供了一些 JS-SDK罚拟，這樣開發(fā)者就能調(diào)用這個 SDK 提供微信的一些功能完箩。
（2）既然是開放平臺，所有的服務(wù)都嵌入在微信中弊知，為了讓開發(fā)者提供的服務(wù)更具有一致性（就是外觀）秩彤，微信也提供了 UI 庫，有了 UI 庫漫雷，開發(fā)者開發(fā)的網(wǎng)頁就能更好的適配，實際上這個功能有點雞肋食呻，很少有用這個庫的澎现，都是為了讓自己的網(wǎng)頁更個性化。
（3）假如是在微信中嵌入一個網(wǎng)站的網(wǎng)頁干旧，由于這個網(wǎng)頁和公眾號沒有任何關(guān)系妹蔽，那么這個網(wǎng)頁怎么知道是那個微信用戶（OpenID）打開了這個網(wǎng)頁呢挠将？公眾號通過授權(quán)的方式讓開發(fā)者能夠獲取用戶的信息编整，這個授權(quán)就是標(biāo)準(zhǔn)的 oAuth 協(xié)議，通俗的說就是開發(fā)者假如需要獲取用戶信息内贮，首先要取得用戶的同意汞斧，這樣公眾號才能讓你獲取信息。仔細(xì)想下為什么消息公眾號開發(fā)能夠直接獲取用戶信息粘勒？
概括的說，網(wǎng)頁開發(fā)包括事富，網(wǎng)頁授權(quán)埃撵、JS-SDK、UI 庫饺谬。
網(wǎng)頁授權(quán)
由于自己申請的公眾號沒有微信認(rèn)證（就是沒交錢）谣拣，所以網(wǎng)頁授權(quán)這個服務(wù)用不了，不過個人使用過微博開放平臺的授權(quán)森缠，原理差不多贵涵，所以簡單的描述下。
（1）要使用網(wǎng)頁授權(quán)宾茂，在后臺配置下回調(diào)域名就可以，不同于微博開放平臺欧聘，不用提供回調(diào) URL 端盆，只要域名就可以费封。
（2）scope蒋伦，有兩種授權(quán)方式，第一種就是假如一個微信用戶已經(jīng)加入公眾號（相當(dāng)于半授權(quán)了）衣盾，那么這種授權(quán)方式叫靜默授權(quán)（snsapi_base）爷抓，就是說用戶看不到官方的授權(quán)頁面阻塑，會直接進入開發(fā)者提供的網(wǎng)頁中，這種授權(quán)方式只能拿到 OpenID（通過其他接口再獲取信息）渤昌。
另外一種授權(quán)方式可以稱之為完整授權(quán)（snsapi_userinfo）走搁，就是手用戶能看到完整的授權(quán)頁面，經(jīng)過用戶確認(rèn)后再進入開發(fā)者提供的網(wǎng)頁中忌栅，這種授權(quán)方式能夠直接拿到用戶信息（省去一次接口調(diào)用）曲稼。
（3）授權(quán)流程
假如開發(fā)者明白 oAuth 協(xié)議，這個流程就非常簡單了瑞驱。
- 首先開發(fā)者通過 authorize 接口（傳遞回調(diào)地址和 appid ）獲取授權(quán)地址窄坦。
- 用戶打開授權(quán)地址并授權(quán)后，微信會回調(diào)開發(fā)者的回調(diào)地址鸭津，并返回 code 值曙博。
- 開發(fā)者傳遞 code 調(diào)用 access_token 接口獲取用戶 access_token 和 OpenID 值，這個值的有效期一般是 7200 秒父泳。
- 為了避免用戶頻繁授權(quán)，開發(fā)者可以用即將過期的 access_token 刷新 access_token（refresh_token接口）蒸眠。
- 通過傳遞用戶 access_token 和 OpenID 調(diào)用 userinfo 接口獲取用戶信息。
這里的用戶 access_token 和開發(fā)者 access_token 不是一回事霜运，分別代表用戶授權(quán)和公眾號授權(quán)蒋腮。
PHP-SDK 中通過簡單的幾個函數(shù)調(diào)用就能實現(xiàn)授權(quán)。
JS-SDK
在 PC 網(wǎng)頁開發(fā)中焦除，通過 Javascript 能夠調(diào)用瀏覽器的功能作彤；同理微信其實就是一個瀏覽器，為了調(diào)用瀏覽器（微信）的功能创葡，微信提供了一個 JS-SDK 包绢慢，這樣就能調(diào)用相應(yīng)的功能了。
使用很簡單呐芥，首先引入對應(yīng)的 js 文件即可思瘟。然后在動態(tài)網(wǎng)頁中配置 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 最關(guān)鍵的包括二部分：
（1）jsapi_ticket ，使用 jsapi_ticket 也是需要微信公眾號平臺授權(quán)的够话，否則任何人都能使用了光绕。
jsapi_ticket 是調(diào)用相應(yīng)接口生成的（傳遞 access_token 參數(shù)），這個 access_token 是消息公眾號開發(fā)者的 access_token（不是用戶的）欣尼，思考下為啥 JS-SDK 不直接使用 access_token 而要使用 jsapi_ticket ？
（2）獲取到 jsapi_ticket 后愕鼓，會對時間戳、隨機數(shù)册倒、jsapi_ticket磺送、當(dāng)前 URL 簽名后生成 wx.config，假如微信驗證簽名通過后崇呵，代表能夠使用對應(yīng)的 JS-SDK馅袁。
PHP-SDK 中通過簡單的幾個函數(shù)調(diào)用就能生成簽名，非常方便。
UI 庫
UI 庫其實非常簡單兄纺，就理解為一個小型的 bootstrap 庫就可以了。在微信上也很少看到開發(fā)者用這個庫的钦奋。思考了下原因疙赠，在 PC 網(wǎng)頁和公眾號上為了保持樣式一致性，開發(fā)者會用統(tǒng)一的 UI 庫厌衔，但是微信沒有 PC 網(wǎng)頁捍岳。
最后說下，沒有經(jīng)過微信認(rèn)證的開發(fā)權(quán)限越來越小了页徐，舉個例子银萍，假如沒有經(jīng)過微信認(rèn)證，微信公眾號菜單上無法配置網(wǎng)頁的 URL搀绣。
最后，開發(fā)簡書 RSS 應(yīng)用的時候豌熄，使用了部分公眾號 UI 和 JavaScript 庫锣险，大家可以點擊訪問 或添加公眾號（yudadanwx）了解
