開發(fā)準(zhǔn)備

1、微信開發(fā)者文檔
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
2、公眾號(hào)權(quán)限 長(zhǎng)期的 權(quán)限高一點(diǎn)

3、一個(gè)準(zhǔn)備好的html頁面

1、閱讀微信開發(fā)者文檔

微信開發(fā)者文檔 點(diǎn)開就是最有用的頁面
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

2、添加一個(gè)自定義菜單

選擇跳轉(zhuǎn)到網(wǎng)頁

自定義菜單訪問鏈接

頁面地址鏈接 固定寫法
自定義菜單頁面地址：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=（你的appid）&redirect_uri=（http----------index.html）&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect

官方示例：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&
redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&
response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

1、redirect_uri 是授權(quán)后重定向的回調(diào)鏈接地址， 需要使用 urlEncode 對(duì)鏈接進(jìn)行處理（ 很重要）使用在線工具處理一下地址。

redirect_uri 此處需要域名授權(quán)的地址，可查看本章的 域名授權(quán)

---

2、appid 在公眾號(hào)基本配置里

---

3、scop = snsapi_base （不彈出授權(quán)頁面，直接跳轉(zhuǎn)，只能獲取用戶openid） snsapi_userinfo （彈出授權(quán)頁面，可通過openid拿到昵稱、性別、所在地。并且， 即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息 ）

無法開啟自定義菜單 ( 坑1 )

在列表基本配置中，取消開啟服務(wù)器配置即可

3、 前端獲取微信傳入的code

            const url = window.location.search
			console.log('截取code-------')
            console.log(url)
            const code = url.substring(6, url.indexOf("&"))
            console.log('傳入code-------')
            console.log(code);

4、微信開發(fā)者工具測(cè)試

完成以上步驟后可使用 微信開發(fā)者工具 進(jìn)行測(cè)試
官方步驟：
1 第一步：用戶同意授權(quán)，獲取code
2 第二步：通過code換取網(wǎng)頁授權(quán)access_token
3 第三步：刷新access_token（如果需要）
4 第四步：拉取用戶信息(需scope為 snsapi_userinfo)

// code 只能使用一次，不使用五分鐘會(huì)失效哦~
1、紅框處放入 自定義菜單綁定的鏈接，調(diào)用成功后會(huì)返回如圖的code
2、通常前端獲取code 傳入后臺(tái)，后臺(tái)通過微信的查詢接口 查詢用戶的openid等等
*** // 因?yàn)檫@一步 傳參中有 重要信息放在后臺(tái)處理更安全一點(diǎn)***

5、域名授權(quán) 很重要 ！

// 微信公眾號(hào)測(cè)試賬號(hào)-redirect_uri域名與后臺(tái)配置不一致，錯(cuò)誤代碼:10003
按照提示下載微信給的txt文檔放到域名目錄下，否則會(huì)保存不成功

6、前端獲取openid GET 請(qǐng)求！ （ 不推薦?。。。?/h3>

		function function_name() {
			const appId = '' //  公眾號(hào)基本信息中的 公眾號(hào)appid
			const secret = '' // 重要信息  公眾號(hào)基本信息中的 開發(fā)者密碼(AppSecret)
			const searchCode='’ // 上一步獲取的微信傳入的code
			$.ajax({
				url: `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${secret}&code=${searchCode}&grant_type=authorization_code`,
				type: "GET",
				success: function(result) { 
					console.log('微信接口調(diào)用成功-----------')
					const data = JSON.parse(result);  
					console.log(data)
					getData(data.openid) // 調(diào)用業(yè)務(wù)查詢接口
				},
				error: function(data) {
					console.log(data);
				}
			});

		}

調(diào)用成功返回參數(shù)

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

真機(jī)測(cè)試

點(diǎn)擊自定義菜單，跳轉(zhuǎn)后成功連接后臺(tái)，訪問業(yè)務(wù)內(nèi)容。

完結(jié)—