相關學習推薦：微信公眾號開發(fā)教程

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

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

注冊賬號

這一步是最開始的一步，先要去申請一個服務號，這一步就不多說，可以直接到官網(wǎng)去申請一個賬號，這中間會有 一些審核的過程，這里就不具體說。在這個等待的過程中，如果你想馬上動手開發(fā)，可以去微信公眾號測試平臺 去申請一個測試號。當然你如果只想體驗一下，也是可以去申請一下測試賬號體驗一下的。

配置環(huán)境

在開發(fā)之前，我們要先做好準備的工作，包括微信公眾號的配置和本地開發(fā)環(huán)境的配置,因為不方便使用公司的賬戶，下面所有圖片示例來自微信測試公眾號。 測試號均在一個頁面內很容易就找到，所以就不多說，說一下正式的配置

公眾號配置

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

登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

本地環(huán)境配置

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

1. natapp
2. 花生殼
3. utools 本人用的就是utools，一個工具集，所以下文以utools 為例子
   

   

   

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

微信公眾號調試環(huán)境

回調授權需要微信的環(huán)境，所以我們無法在我們最喜愛的 chrome中進行調試，無疑為我們的找出可惡的bug們增加了難度。所以我們需要一個微信開發(fā)的神器，微信開發(fā)這工具 在做這一步的時候需要注意綁定為該公眾號的開發(fā)者

開發(fā)配置

1.業(yè)務開發(fā)

寫我們的業(yè)務代碼。這一點和普通的頁面沒有太大的區(qū)別所以就不具體說

2.授權

微信網(wǎng)頁授權的話，主要分為兩種

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

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

對于已關注公眾號的用戶，如果用戶從公眾號的會話或者自定義菜單進入本公眾號的網(wǎng)頁授權頁，即使是scope為snsapi_userinfo，也是靜默授權，用戶無感知。

步驟

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

1、引導用戶進入授權頁面同意授權，獲取code

2、通過code換取網(wǎng)頁授權access_token（與基礎支持中的access_token不同）

3、如果需要，開發(fā)者可以刷新網(wǎng)頁授權access_token，避免過期

4、通過網(wǎng)頁授權access_token和openid獲取用戶基本信息（支持UnionID機制）

前端需要做什么

1、引導用戶進入授權頁面同意授權，獲取codehttps://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect這就是授權頁面的鏈接，把appId，redirect_uri，scope 換成自己所需要的，scope 就是上文所說到的兩種不同的授權。
!!!需要注意的是由于state 是因為使用了Hash路由，有#，而前端部分框架默認hash路由，會產生沖突，所以需要encode處理
如果用戶同意授權，頁面將跳轉至 redirect_uri/?code=CODE&state=STATE。 下圖為scope等于snsapi_userinfo時的授權頁面：

這時候只需要將我們的code 傳給后臺，后面的幾步不就不需要前端做了。

JSSDK使用步驟

有的時候我們也需要用到SSDK，所以需要進行配置

綁定域名

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

引入JS文件

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

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

通過config接口注入權限驗證配置

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

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

需要注意的是：

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

相關學習推薦：js視頻教程

調取微信接口

然后在ready調取微信的接口就可以了。下面以檢測js接口為例。

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

其實只要前端授權好了，后面的jssdk 將會很簡單。

相關學習推薦：微信小程序開發(fā)