微信公衆號網頁開發——受權登陸，js安全域名，jssdk使用

微信的普及，好多項目開始運行在微信環境中，微信公衆號算是一個很常見的平臺，主要介紹微信公衆號內部，網頁開發的一些知識點和值得關注的點；　　

沒有基礎的能夠先看下微信官方文檔的基礎介紹；

1、首先說說，咱們本身開發的h5網頁，配置在公衆號平臺內，怎麼獲取微信用戶信息；

 一、很重要的一步，js安全域名配置配置，看下微信官方的介紹吧，以下圖：

 

簡單理解就是，前端h5項目運行的服務器域名，注意是域名，不是IP！

固然這個域名配置由微信公衆號管理者進行配置，只要確認前端項目運行服務器域名給他們配就行；

須要注意的有兩點，

1）端口必須是80端口，也就是不能這樣:http://xxx.xxx:8080/xxx.html，不能帶端口號！切記切記，否則你就別玩這個公衆號網頁開發了（微信就是這麼牛逼，這是他們規定的）；

2）看到上面的圖片，說有一個txt文件要放置在提供的域名目錄下，能夠是根目錄，也能夠指定目錄下面，配置好以後，直接瀏覽器地址欄訪問這個路徑，能打開就成功了，此處還有一個坑：

    若是把這個txt文件放置在根目錄，你的h5訪問路徑就不能帶路徑，也就是放置在根路徑下面，http://xxx,xxx/index.html是沒有問題的，若是h5項目是http://xxx.xxx/mp/index.html，這是行不通；

    同理，若是你把這個txt文件放置在某個文件下，如：http://xxx.xxx/mp，放在mp文件夾下，那你的h5也要放在這個路徑下面，http://xxx.xxx/mp/index.html；否則確定有問題；

至於什麼問題，若是你後面要調用微信的jssdk，在wx,config時會一直提示你，config err: invalid url domain；啥意思？域名不合法啊！

這個問題搞定好了以後，後面會很是順利，一般直接讓運維或者後端大佬們，直接放根目錄就行，也別搞什麼其餘端口，就80端口；

2、受權登陸

受權登陸第一步就是獲取微信返回的code值，只有拿到這個code值，才能後續的獲取微信用戶信息，那怎麼拿到微信返回的code值？很簡單，文檔有實例，咱們要作的只是改改參數就行：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect //若提示「該連接沒法訪問」，請檢查參數是否填寫錯誤，是否擁有scope參數對應的受權做用域權限。

上面標紅的幾個參數值，是須要替換成本身須要的值，

APPID=>公衆號的惟一標識，申請公衆號已經分配好的；

REDIRECT_URL=>在成功拿到code值，你須要跳轉到你項目的路徑地址，好比login.html之類的；

SCOPE=>有兩個固定值：snsapi_base，snsapi_userinfo ，二者任選其一，兩個值區別，看文檔天然明白；

STATE=>這個參數是自定義，什麼值都行，你配置什麼值，到時候跳轉回來後，原樣給你帶回來，須要注意的是有格式要求（重定向後會帶上state參數，開發者能夠填寫a-zA-Z0-9的參數值，最多128字節）；

拿到code後，微信會自動跳轉會你配置的連接地址並攜帶code,state參數——redirect_uri/?code=CODE&state=STATE，這種格式的，直接在url中取參數就行；

這一步搞定以後，後面就是各類調微信接口，傳對應接口須要的參數就行；

3、調用jssdk

這一步的前置條件就是第1點的，js安全域名要配置經過，否則你不可能調用sdk成功的，相信我沒錯的；

那如何調用jssdk呢？很簡單，也有文檔說明=>JSSDK調用說明

1）先在你須要調用的sdk的頁面，引入js文件；http://res2.wx.qq.com/open/js/jweixin-1.4.0.js 或者http://res.wx.qq.com/open/js/jweixin-1.4.0.js；

2）完善配置信息，通常先後端分離項目，都是前端調用後端接口，把這一堆參數返給前端，而後前端在js裏面直接給對應參數賦值就行，（由於signature簽名參數，一般要後端來生成，生成簽名須要獲取一個受權參數jsapi_ticket，這個須要後端請求微信接口，才能拿到，詳情見文檔的簽名規則）

wx.config({
  debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
  appId: '', // 必填，公衆號的惟一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，須要使用的JS接口列表
});

上面wx.config配置好以後，工做基本完成，剩下的就是根據本身項目需求調用特定的sdk，好比自定義分享，優惠券。。。。按照文檔走就OK，挺簡單；

總結：js安全域名配置很重要，很是重要！