相關(guān)學(xué)習(xí)推薦：微信公眾號(hào)開(kāi)發(fā)教程

??微信已經(jīng)成為了我們生活中不可缺少的一個(gè)app，借助微信這個(gè)平臺(tái)，微信公眾號(hào)也成為了一種主流的線上線下的互動(dòng)營(yíng)銷(xiāo)方式。公眾號(hào)的開(kāi)發(fā)也成為前端er 不可或缺的技能之一。

??公眾號(hào)主要分為訂閱號(hào)和服務(wù)號(hào)兩種，前者以推送消息，為媒體和個(gè)人提供交流溝通為主，后者可以通過(guò)微信授權(quán)的形式，在微信內(nèi)為用戶(hù)提供服務(wù)，為企業(yè) 提供業(yè)務(wù)服務(wù)和強(qiáng)大的用戶(hù)管理能力。前者基本不涉及到前端，所以后者就是我們今天主要介紹的。

注冊(cè)賬號(hào)

這一步是最開(kāi)始的一步，先要去申請(qǐng)一個(gè)服務(wù)號(hào)，這一步就不多說(shuō)，可以直接到官網(wǎng)去申請(qǐng)一個(gè)賬號(hào)，這中間會(huì)有 一些審核的過(guò)程，這里就不具體說(shuō)。在這個(gè)等待的過(guò)程中，如果你想馬上動(dòng)手開(kāi)發(fā)，可以去微信公眾號(hào)測(cè)試平臺(tái) 去申請(qǐng)一個(gè)測(cè)試號(hào)。當(dāng)然你如果只想體驗(yàn)一下，也是可以去申請(qǐng)一下測(cè)試賬號(hào)體驗(yàn)一下的。

配置環(huán)境

在開(kāi)發(fā)之前，我們要先做好準(zhǔn)備的工作，包括微信公眾號(hào)的配置和本地開(kāi)發(fā)環(huán)境的配置,因?yàn)椴环奖闶褂霉镜馁~戶(hù)，下面所有圖片示例來(lái)自微信測(cè)試公眾號(hào)。 測(cè)試號(hào)均在一個(gè)頁(yè)面內(nèi)很容易就找到，所以就不多說(shuō)，說(shuō)一下正式的配置

公眾號(hào)配置

1、在微信公眾號(hào)請(qǐng)求用戶(hù)網(wǎng)頁(yè)授權(quán)之前，開(kāi)發(fā)者需要先到公眾平臺(tái)官網(wǎng)中的“開(kāi)發(fā) – 接口權(quán)限 – 網(wǎng)頁(yè)服務(wù) – 網(wǎng)頁(yè)帳號(hào) – 網(wǎng)頁(yè)授權(quán)獲取用戶(hù)基本信息”的配置選項(xiàng)中，修改授權(quán)回調(diào)域名。請(qǐng)注意，這里填寫(xiě)的是域名（是一個(gè)字符串），而不是URL，因此請(qǐng)勿加 http:// 等協(xié)議頭；
2、授權(quán)回調(diào)域名配置規(guī)范為全域名，比如需要網(wǎng)頁(yè)授權(quán)的域名為：www.qq.com，配置以后此域名下面的頁(yè)面http://www.qq.com… 、 www.qq.com/login.html 都可以進(jìn)行OAuth2.0鑒權(quán)。但pay.qq.com 、 music.qq.com 、 qq.com 無(wú)法進(jìn)行OAuth2.0鑒權(quán)；
3、如果公眾號(hào)登錄授權(quán)給了第三方開(kāi)發(fā)者來(lái)進(jìn)行管理，則不必做任何設(shè)置，由第三方代替公眾號(hào)實(shí)現(xiàn)網(wǎng)頁(yè)授權(quán)即可 如果你需要用到j(luò)sapi 的一些功能如微信支付，分享等則需要配置JS接口安全域名。

登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”。

本地環(huán)境配置

在測(cè)試公眾號(hào)中IP和 域名地址都可以授權(quán)成功，但是在正式的公眾號(hào)中，想要實(shí)現(xiàn)本地測(cè)試，則需要外網(wǎng)能訪問(wèn)本地內(nèi)網(wǎng)，即需要實(shí)現(xiàn)內(nèi)網(wǎng)穿透，即我們可以將內(nèi)網(wǎng)的服務(wù)器映射到外網(wǎng)給別人訪問(wèn)。也有很多 的工具如

1. natapp
2. 花生殼
3. utools 本人用的就是utools，一個(gè)工具集，所以下文以u(píng)tools 為例子
   

   

   

   點(diǎn)擊下載安裝，然后點(diǎn)擊配置你本地的服務(wù)和外網(wǎng)就可以開(kāi)始使用，這樣就是直接只用外網(wǎng)地址訪問(wèn)。

微信公眾號(hào)調(diào)試環(huán)境

回調(diào)授權(quán)需要微信的環(huán)境，所以我們無(wú)法在我們最喜愛(ài)的 chrome中進(jìn)行調(diào)試，無(wú)疑為我們的找出可惡的bug們?cè)黾恿穗y度。所以我們需要一個(gè)微信開(kāi)發(fā)的神器，微信開(kāi)發(fā)這工具 在做這一步的時(shí)候需要注意綁定為該公眾號(hào)的開(kāi)發(fā)者

開(kāi)發(fā)配置

1.業(yè)務(wù)開(kāi)發(fā)

寫(xiě)我們的業(yè)務(wù)代碼。這一點(diǎn)和普通的頁(yè)面沒(méi)有太大的區(qū)別所以就不具體說(shuō)

2.授權(quán)

微信網(wǎng)頁(yè)授權(quán)的話(huà)，主要分為兩種

1、以snsapi_base為scope發(fā)起的網(wǎng)頁(yè)授權(quán)，是用來(lái)獲取進(jìn)入頁(yè)面的用戶(hù)的openid的，并且是靜默授權(quán)并自動(dòng)跳轉(zhuǎn)到回調(diào)頁(yè)的。用戶(hù)感知的就是直接進(jìn)入了回調(diào)頁(yè)（往往是業(yè)務(wù)頁(yè)面）
2、以snsapi_userinfo為scope發(fā)起的網(wǎng)頁(yè)授權(quán)，是用來(lái)獲取用戶(hù)的基本信息的。但這種授權(quán)需要用戶(hù)手動(dòng)同意，并且由于用戶(hù)同意過(guò)，所以無(wú)須關(guān)注，就可在授權(quán)后獲取該用戶(hù)的基本信息。
3、用戶(hù)管理類(lèi)接口中的“獲取用戶(hù)基本信息接口”，是在用戶(hù)和公眾號(hào)產(chǎn)生消息交互或關(guān)注后事件推送后，才能根據(jù)用戶(hù)OpenID來(lái)獲取用戶(hù)基本信息。這個(gè)接口，包括其他微信接口，都是需要該用戶(hù)（即openid）關(guān)注了公眾號(hào)后，才能調(diào)用成功的。

除了使用snsapi_base能夠靜默授權(quán)以外，還有一些也能夠做到靜默授權(quán)

對(duì)于已關(guān)注公眾號(hào)的用戶(hù)，如果用戶(hù)從公眾號(hào)的會(huì)話(huà)或者自定義菜單進(jìn)入本公眾號(hào)的網(wǎng)頁(yè)授權(quán)頁(yè)，即使是scope為snsapi_userinfo，也是靜默授權(quán)，用戶(hù)無(wú)感知。

步驟

具體而言，網(wǎng)頁(yè)授權(quán)流程分為四步：

1、引導(dǎo)用戶(hù)進(jìn)入授權(quán)頁(yè)面同意授權(quán)，獲取code

2、通過(guò)code換取網(wǎng)頁(yè)授權(quán)access_token（與基礎(chǔ)支持中的access_token不同）

3、如果需要，開(kāi)發(fā)者可以刷新網(wǎng)頁(yè)授權(quán)access_token，避免過(guò)期

4、通過(guò)網(wǎng)頁(yè)授權(quán)access_token和openid獲取用戶(hù)基本信息（支持UnionID機(jī)制）

前端需要做什么

1、引導(dǎo)用戶(hù)進(jìn)入授權(quán)頁(yè)面同意授權(quán)，獲取codehttps://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect這就是授權(quán)頁(yè)面的鏈接，把a(bǔ)ppId，redirect_uri，scope 換成自己所需要的，scope 就是上文所說(shuō)到的兩種不同的授權(quán)。
!!!需要注意的是由于state 是因?yàn)槭褂昧薍ash路由，有#，而前端部分框架默認(rèn)hash路由，會(huì)產(chǎn)生沖突，所以需要encode處理
如果用戶(hù)同意授權(quán)，頁(yè)面將跳轉(zhuǎn)至 redirect_uri/?code=CODE&state=STATE。 下圖為scope等于snsapi_userinfo時(shí)的授權(quán)頁(yè)面：

這時(shí)候只需要將我們的code 傳給后臺(tái)，后面的幾步不就不需要前端做了。

JSSDK使用步驟

有的時(shí)候我們也需要用到SSDK，所以需要進(jìn)行配置

綁定域名

也就是上文的JS接口安全域名設(shè)置，

引入JS文件

在需要調(diào)用JS接口的頁(yè)面引入如下JS文件，（支持https）：res.wx.qq.com/open/js/jwe…

如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問(wèn)時(shí)，可改訪問(wèn)：res2.wx.qq.com/open/js/jwe… （支持https）。

通過(guò)config接口注入權(quán)限驗(yàn)證配置

wx.config({  debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。   appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)   timestamp: , // 必填，生成簽名的時(shí)間戳   nonceStr: '', // 必填，生成簽名的隨機(jī)串   signature: '',// 必填，簽名   jsApiList: [] // 必填，需要使用的JS接口列表});復(fù)制代碼

jsApiList 寫(xiě)入你需要的功能，可以看官方的JS接口列表,appId, timestamp ,nonceStr, signature則需要你的后端伙伴返回給你。

需要注意的是：

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶(hù)端不支持pushState的H5新特性，所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗，此問(wèn)題會(huì)在Android6.2中修復(fù)）。

相關(guān)學(xué)習(xí)推薦：js視頻教程

調(diào)取微信接口

然后在ready調(diào)取微信的接口就可以了。下面以檢測(cè)js接口為例。

wx.ready(function(){  // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶(hù)端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶(hù)觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。   wx.checkJsApi({    jsApiList: ['chooseImage'], // 需要檢測(cè)的JS接口列表     success: function(res) {    // 以鍵值對(duì)的形式返回，可用的api值true，不可用為false     // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}     }   }); });復(fù)制代碼

其實(shí)只要前端授權(quán)好了，后面的jssdk 將會(huì)很簡(jiǎn)單。

相關(guān)學(xué)習(xí)推薦：微信小程序開(kāi)發(fā)