在聯(lián)調(diào)頁面之前需要找到聯(lián)調(diào)平臺,所以需要自己先建立一個測試公眾號方便之后的頁面聯(lián)調(diào);
一、建立測試號
1.（有公眾號后臺賬號）匈棘，在微信公眾平臺(https://mp.weixin.qq.com/
)登錄际长，進(jìn)入“ 開發(fā) ”---“ 開發(fā)者工具 ”---“ 公眾平臺測試賬號 ”耸采，隨后按照頁面指示建立自己的測試公眾號；
（沒有公眾號后臺賬號）工育，在微信公眾平臺登錄頁面進(jìn)入服務(wù)號 “ 開發(fā)文檔 ” --- “ 開始開發(fā) ” --- “ 接口測試號申請 ” --- “ 進(jìn)入微信公眾帳號測試號申請系統(tǒng) ”虾宇，隨后按照頁面指示建立自己的測試公眾號；
2.手機(jī)掃描頁面上的 “ 測試號二維碼 ”并關(guān)注如绸，這樣就有自己的測試公眾號嘱朽，之后頁面調(diào)試都是在這個測試號上進(jìn)行調(diào)試旭贬；
3.（有公眾號后臺賬號），還是在剛開發(fā)者工具頁面進(jìn)入“ 微信公眾平臺接口調(diào)試工具 ”搪泳；
沒有賬號可直接進(jìn)入https://mp.weixin.qq.com/debug?token=724775402&lang=zh_CN稀轨；
4.將自己剛測試公眾號頁面上的appID和appsecret分別填入appid和secret，點(diǎn)擊 “ 檢查問題 ”之后成功了就會看到access_token岸军，復(fù)制上之后奋刽，在 “ 接口類型 ”中選擇 “ 自定義菜單 ” ，“ 接口列表 ”中呈現(xiàn)的是 “ 自定義菜單創(chuàng)建接口 /menu/create ” ,將剛復(fù)制的access_token粘貼在對應(yīng)的access_token中凛膏，body中填入自定義的菜單（如下）杨名，點(diǎn)擊 “ 檢查問題 ”成功后即可在手機(jī)測試公眾號上看到剛定義的按鈕；
舉例子：（按照自己的需求選擇不同的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.需要注意的是猖毫，需要啟動一個頁面的服務(wù)，如果沒有就自己本地把項(xiàng)目啟動后须喂，將項(xiàng)目前邊的域名端口號復(fù)制粘貼在如下位置確認(rèn)吁断，然后在JS接口安全域名處也同理；
6.接口配置信息模塊中坞生，URL是項(xiàng)目前路徑域名（同上）仔役，Token隨意定義；
以上就建立好一個完整的測試號功能了是己；
二又兵、調(diào)試登錄
1.首先聲明的是登錄必須后臺配合，前端無法獨(dú)自完成卒废，重點(diǎn)Ｅ娉！摔认！
官方文檔上寫的非常清晰逆皮，但是讓我頭疼的是他沒有寫清楚哪塊是后臺配合哪塊是前端完成，所以對剛接觸的小白來說真是難受的很参袱；
（ 開發(fā)文檔--- “ 微信網(wǎng)頁開發(fā) ” --- “ 網(wǎng)頁授權(quán) https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html” ）
1）首先前端需要做的是新建一個頁面电谣，本文前端以vue為例；
2）建好頁面后根據(jù)文檔中提示將對應(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īng)當(dāng)使用https鏈接來確保授權(quán)code的安全性；scope有兩個參數(shù)分別是 ：
“ snsapi_base （不彈出授權(quán)頁面环壤，直接跳轉(zhuǎn)晒来，只能獲取用戶openid）”，
“ snsapi_userinfo （彈出授權(quán)頁面镐捧，可通過openid拿到昵稱潜索、性別臭增、所在地。并且竹习， 即使在未關(guān)注的情況下誊抛，只要用戶授權(quán)，也能獲取其信息 ）”
將上面路徑完整好后整陌，最關(guān)鍵的一步到了拗窃，在一中提到的自定義菜單中，定了按鈕泌辫，那就將本次完整好的路徑作為一個跳轉(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!”按鈕震放，會自動跳轉(zhuǎn)到剛定義的頁面宾毒；
3）在跳轉(zhuǎn)到的這個vue頁面首先需要做的邏輯是獲取code，微信跳轉(zhuǎn)過來后會在路徑中自動帶有code=""的參數(shù)殿遂，前端需要的做的是拿到這個code并傳給后臺小哥诈铛，此時后臺小哥需要提供一個接口得到code,通過微信提供的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來獲取用戶信息，之后就是后臺來做登錄的邏輯墨礁，如果這個人沒登錄過幢竹，后臺就返回沒登錄的邏輯，前端跳到 “ 登錄 ” 頁面進(jìn)行登錄恩静，若該用戶已登錄焕毫，后臺返回用戶信息，前端跳到應(yīng)跳的頁面就可以了驶乾；
以上就是微信公眾號第三方h5頁面完成的登錄邏輯介紹邑飒；
三、測試號與正式服務(wù)號的對照
最后來說說測試號與正式服務(wù)號的對照轻掩。
1）在“設(shè)置”---“公眾號設(shè)置”中幸乒，選擇 “功能設(shè)置” ，將里面的 “JS接口安全域名” 和 “ 網(wǎng)頁授權(quán)域名 ”改成生產(chǎn)服務(wù)的域名即可
2）在“功能”---“自定義菜單”中唇牧，將頁面訪問的路徑（二中提到的長路徑）放入其中即可罕扎，
注意如果你項(xiàng)目已經(jīng)布到了一個生產(chǎn)環(huán)境，那以上提到的域名以及頁面路徑都是生產(chǎn)環(huán)境的丐重，不再是自己本地啟動的服務(wù)或者測試服務(wù)腔召。
