在聯(lián)調(diào)頁(yè)面之前需要找到聯(lián)調(diào)平臺(tái),所以需要自己先建立一個(gè)測(cè)試公眾號(hào)方便之后的頁(yè)面聯(lián)調(diào);
一、建立測(cè)試號(hào)
1.（有公眾號(hào)后臺(tái)賬號(hào)），在微信公眾平臺(tái)(https://mp.weixin.qq.com/
)登錄，進(jìn)入“ 開發(fā) ”---“ 開發(fā)者工具 ”---“ 公眾平臺(tái)測(cè)試賬號(hào) ”，隨后按照頁(yè)面指示建立自己的測(cè)試公眾號(hào)；
（沒有公眾號(hào)后臺(tái)賬號(hào)），在微信公眾平臺(tái)登錄頁(yè)面進(jìn)入服務(wù)號(hào) “ 開發(fā)文檔 ” --- “ 開始開發(fā) ” --- “ 接口測(cè)試號(hào)申請(qǐng) ” --- “ 進(jìn)入微信公眾帳號(hào)測(cè)試號(hào)申請(qǐng)系統(tǒng) ”，隨后按照頁(yè)面指示建立自己的測(cè)試公眾號(hào)；
2.手機(jī)掃描頁(yè)面上的 “ 測(cè)試號(hào)二維碼 ”并關(guān)注，這樣就有自己的測(cè)試公眾號(hào)，之后頁(yè)面調(diào)試都是在這個(gè)測(cè)試號(hào)上進(jìn)行調(diào)試；
3.（有公眾號(hào)后臺(tái)賬號(hào)），還是在剛開發(fā)者工具頁(yè)面進(jìn)入“ 微信公眾平臺(tái)接口調(diào)試工具 ”；
沒有賬號(hào)可直接進(jìn)入https://mp.weixin.qq.com/debug?token=724775402&lang=zh_CN；
4.將自己剛測(cè)試公眾號(hào)頁(yè)面上的appID和appsecret分別填入appid和secret，點(diǎn)擊 “ 檢查問(wèn)題 ”之后成功了就會(huì)看到access_token，復(fù)制上之后，在 “ 接口類型 ”中選擇 “ 自定義菜單 ” ，“ 接口列表 ”中呈現(xiàn)的是 “ 自定義菜單創(chuàng)建接口 /menu/create ” ,將剛復(fù)制的access_token粘貼在對(duì)應(yīng)的access_token中，body中填入自定義的菜單（如下），點(diǎn)擊 “ 檢查問(wèn)題 ”成功后即可在手機(jī)測(cè)試公眾號(hào)上看到剛定義的按鈕；
舉例子：（按照自己的需求選擇不同的type即可）
{
"button":[
{
"type":"click",
"name":"今日歌曲",
"key":"V1001_TODAY_MUSIC"
},
{
"name":"菜單",
"sub_button":[
{
"type":"view",
"name":"搜索",
"url":"http://www.soso.com/"
},
{
"type":"miniprogram",
"name":"wxa",
"url":"http://mp.weixin.qq.com",
"appid":"wx286b93c14bbf93aa",
"pagepath":"pages/lunar/index"
},
{
"type":"click",
"name":"贊一下我們",
"key":"V1001_GOOD"
}]
}]
}
5.需要注意的是，需要啟動(dòng)一個(gè)頁(yè)面的服務(wù)，如果沒有就自己本地把項(xiàng)目啟動(dòng)后，將項(xiàng)目前邊的域名端口號(hào)復(fù)制粘貼在如下位置確認(rèn)，然后在JS接口安全域名處也同理；
6.接口配置信息模塊中，URL是項(xiàng)目前路徑域名（同上），Token隨意定義；
以上就建立好一個(gè)完整的測(cè)試號(hào)功能了；
二、調(diào)試登錄
1.首先聲明的是登錄必須后臺(tái)配合，前端無(wú)法獨(dú)自完成，重點(diǎn)?。?！
官方文檔上寫的非常清晰，但是讓我頭疼的是他沒有寫清楚哪塊是后臺(tái)配合哪塊是前端完成，所以對(duì)剛接觸的小白來(lái)說(shuō)真是難受的很；
（ 開發(fā)文檔--- “ 微信網(wǎng)頁(yè)開發(fā) ” --- “ 網(wǎng)頁(yè)授權(quán) https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html” ）
1）首先前端需要做的是新建一個(gè)頁(yè)面，本文前端以vue為例；
2）建好頁(yè)面后根據(jù)文檔中提示將對(duì)應(yīng)參數(shù)寫入
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后接的就是1）中頁(yè)面的完整路徑，注意頁(yè)面路徑應(yīng)當(dāng)使用https鏈接來(lái)確保授權(quán)code的安全性；scope有兩個(gè)參數(shù)分別是 ：
“ snsapi_base （不彈出授權(quán)頁(yè)面，直接跳轉(zhuǎn)，只能獲取用戶openid）”，
“ snsapi_userinfo （彈出授權(quán)頁(yè)面，可通過(guò)openid拿到昵稱、性別、所在地。并且， 即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息 ）”
將上面路徑完整好后，最關(guān)鍵的一步到了，在一中提到的自定義菜單中，定了按鈕，那就將本次完整好的路徑作為一個(gè)跳轉(zhuǎn)路徑放入自定義的JSON中，寫法如下：
{
"button":[
{
"type":"view",
"name":"go go go!",
"url":"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" "&redirect_uri=" "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
}
]
}
菜單創(chuàng)建之后，點(diǎn)擊 “go go go!”按鈕，會(huì)自動(dòng)跳轉(zhuǎn)到剛定義的頁(yè)面；
3）在跳轉(zhuǎn)到的這個(gè)vue頁(yè)面首先需要做的邏輯是獲取code，微信跳轉(zhuǎn)過(guò)來(lái)后會(huì)在路徑中自動(dòng)帶有code=""的參數(shù)，前端需要的做的是拿到這個(gè)code并傳給后臺(tái)小哥，此時(shí)后臺(tái)小哥需要提供一個(gè)接口得到code,通過(guò)微信提供的https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code 接口去得到access_token ,
之后用 https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN來(lái)獲取用戶信息，之后就是后臺(tái)來(lái)做登錄的邏輯，如果這個(gè)人沒登錄過(guò)，后臺(tái)就返回沒登錄的邏輯，前端跳到 “ 登錄 ” 頁(yè)面進(jìn)行登錄，若該用戶已登錄，后臺(tái)返回用戶信息，前端跳到應(yīng)跳的頁(yè)面就可以了；
以上就是微信公眾號(hào)第三方h5頁(yè)面完成的登錄邏輯介紹；
三、測(cè)試號(hào)與正式服務(wù)號(hào)的對(duì)照
最后來(lái)說(shuō)說(shuō)測(cè)試號(hào)與正式服務(wù)號(hào)的對(duì)照。
1）在“設(shè)置”---“公眾號(hào)設(shè)置”中，選擇 “功能設(shè)置” ，將里面的 “JS接口安全域名” 和 “ 網(wǎng)頁(yè)授權(quán)域名 ”改成生產(chǎn)服務(wù)的域名即可
2）在“功能”---“自定義菜單”中，將頁(yè)面訪問(wèn)的路徑（二中提到的長(zhǎng)路徑）放入其中即可，
注意如果你項(xiàng)目已經(jīng)布到了一個(gè)生產(chǎn)環(huán)境，那以上提到的域名以及頁(yè)面路徑都是生產(chǎn)環(huán)境的，不再是自己本地啟動(dòng)的服務(wù)或者測(cè)試服務(wù)。
