相關(guān)學(xué)習(xí)推薦：#微信公眾號開發(fā)教學(xué)

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

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

註冊帳號

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

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

公眾號配置

2、授權(quán)回調(diào)域名配置規(guī)範(fàn)為全域名，例如需要網(wǎng)頁授權(quán)的網(wǎng)域?yàn)椋簑ww.qq.com，設(shè)定以後此網(wǎng)域下面的頁面http://www.qq.com… 、 www.qq.com/login.html 都可以進(jìn)行OAuth2.0鑑權(quán)。但pay.qq.com 、 music.qq.com 、 qq.com 無法進(jìn)行OAuth2.0鑑權(quán)；

3、如果公眾號登入授權(quán)給了第三方開發(fā)者來進(jìn)行管理，則不必做任何設(shè)置，由第三方取代公眾號實(shí)現(xiàn)網(wǎng)頁授權(quán)即可 如果你需要用到j(luò)sapi 的一些功能如微信支付，分享等則需要設(shè)定JS介面安全網(wǎng)域。

登入微信公眾平臺進(jìn)入「公眾號設(shè)定」的「功能設(shè)定」裡填寫「JS介面安全網(wǎng)域」 。
2. 本地環(huán)境配置
3. 在測試公眾號中IP和網(wǎng)域地址都可以授權(quán)成功，但是在正式的公眾號中，想要實(shí)現(xiàn)本地測試，則需要外網(wǎng)能存取本地內(nèi)網(wǎng)，即需要實(shí)現(xiàn)內(nèi)網(wǎng)穿透，也就是我們可以將內(nèi)部網(wǎng)路的伺服器對應(yīng)到外網(wǎng)給別人存取。也有很多 的工具如

   

   花生殼

   utools 本人用的就是utools，一個工具集，所以下文以utools 為例子

點(diǎn)擊下載安裝，然後點(diǎn)選設(shè)定你本地的服務(wù)和外網(wǎng)就可以開始使用，這樣就是直接只用外網(wǎng)位址存取。

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

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

綁定為該公眾號的開發(fā)者

開發(fā)配置

1.業(yè)務(wù)開發(fā)######寫我們的業(yè)務(wù)代碼。這一點(diǎn)和普通的頁面沒有太大的差別所以就不具體說######2.授權(quán)######微信網(wǎng)頁授權(quán)的話，主要分為兩種###

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

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

對於已關(guān)注公眾號的用戶，如果使用者從公眾號的會話或自訂選單進(jìn)入本公眾號的網(wǎng)頁授權(quán)頁，即使是scope為snsapi_userinfo，也是靜默授權(quán)，使用者無感知。

步驟

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

1、引導(dǎo)使用者進(jìn)入授權(quán)頁面同意授權(quán)，取得code

#2、透過code換取網(wǎng)頁授權(quán)access_token（與基本支援中的access_token不同）

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

4、透過網(wǎng)頁授權(quán)access_token和openid取得使用者基本資訊（支援UnionID機(jī)制）

前端需要做什麼

1、引導(dǎo)使用者進(jìn)入授權(quán)頁面同意授權(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)頁面的鏈接，把a(bǔ)ppId，redirect_uri，scope 換來上文所說到的兩種不同的授權(quán)。
!!!需要注意的是由於state 是因?yàn)槭褂昧薍ash路由，有#，而前端部分框架預(yù)設(shè)hash路由，會產(chǎn)生衝突，所以需要encode處理
如果用戶同意授權(quán)，頁面將跳到redirect_uri/?code=CODE&state=STATE。 下圖為scope等於snsapi_userinfo時的授權(quán)頁面：

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

JSSDK使用步驟

有的時候我們也需要用到SSDK，所以需要進(jìn)行設(shè)定

綁定網(wǎng)域名稱

#也就是上文的JS介面安全網(wǎng)域設(shè)置，

引入JS文件

在需要呼叫JS介面的頁面引入如下JS文件，（支援https）：res.wx.qq.com/open/js/jwe …

如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源無法存取時，可改存?。簉es2.wx.qq.com/open/js/jwe…（支援https）。

透過config介面注入權(quán)限驗(yàn)證設(shè)定

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

jsApiList 寫入你需要的功能，可以看官方的JS介面清單,appId, timestamp ,nonceStr, signature則需要你的後端夥伴回傳給你。

要注意的是：

所有需要使用JS-SDK的頁面必須先註入配置訊息，否則將無法呼叫（同一個url只需呼叫一次，對於變化url的SPA的web app可在每次url變化時進(jìn)行呼叫,目前Android微信客戶端不支援pushState的H5新特性，所以使用pushState來實(shí)現(xiàn)web app的頁面會導(dǎo)致簽章失敗，此問題會在Android6.2中修復(fù)）。

相關(guān)學(xué)習(xí)推薦：js影片教學(xué)

調(diào)取微信介面

然後在ready調(diào)取微信的介面就可以了。下面以檢測js介面為例。

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

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

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

#

以上是公眾號的入門的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！