今天准備詳細講解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
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