今天準備詳細講解h5頁面嵌入微信公眾號中 然後獲取使用者的openid

一：微信授權域名

 1.首先去登入微信開發者平臺 公眾號設定-》功能設定 “網頁授權域名”去設定 （請注意，①：這裡填寫的是域名（是一個字串），而不是URL，因此請勿加 http:// 等協議頭 ②：配置www.qq.com 域名 那http://www.qq.com/land.html或者　　http://www.qq.com/login.html都可以進行授權）

2.將開發者ID appId記錄下來 並將下面MP_開頭的檔案下載下來 放在域名的根目錄下面。

二：獲取code

1.window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

引數具體參見以上 。

三.使用者同意授權後

　使用者授權後會跳到你redirect_uri設定的url 後面加上  redirect_uri/?code=CODE&state=STATE 這裡要擷取url帶的code並準備調下一個介面

四：獲取openid

　　因為我的scope設定的是snsapi_base 我只要拿到openid就好了 ，所以到這一步就截止了

　　這一步微信提供了https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

引數具體參見以上

　　但是會有一個跨越問題，所以這一步的介面需要後臺去調，前端把引數傳給後臺 ，後臺返回資料就可以解決跨越問題

注意：之前我在寫的時候 把這兩個介面呼叫全部放在一個頁面 然後會導致微信不停的授權 其實是錯的。然後我就把第一個介面呼叫放在一個loading頁面 設定redirect_uri是真正需要openid的頁面，也就是loading只是用來跳轉用的，當然loading頁面也是在之前設定的域名下面。

　　還有一個問題 就是微信的pc瀏覽器是不解析es6語法 只能識別es5語法 

　　以上內容具體參見微信開發者文件  https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842