需求描述
用戶通過(guò)掃碼海報(bào)攜帶活動(dòng)二維碼跳轉(zhuǎn)到h5頁(yè)面，并且完成微信授權(quán)，完成授權(quán)的用戶進(jìn)入小程序后不再進(jìn)行授權(quán)操作。這里邊涉及到了兩個(gè)大問(wèn)題：
- 一是怎樣在一個(gè)域名下部署兩個(gè)項(xiàng)目；
- 二是用戶點(diǎn)擊授權(quán)之后跳轉(zhuǎn)當(dāng)前頁(yè)，獲取到code值后，什么時(shí)候向服務(wù)端發(fā)送授權(quán)請(qǐng)求。
問(wèn)題分析
先討論第一個(gè)問(wèn)題?
首先第一個(gè)項(xiàng)目正常打包部署即可，比如主服務(wù)域名為：www.xxx.xxx;
然后，第二個(gè)項(xiàng)目的域名必須是是在主域名的后面拼接上項(xiàng)目路由，如：www.xxx.xxx/h5/；（h5只是路由名稱，可以自定義）
對(duì)于前端來(lái)說(shuō)，需要做以下操作：
1. 增加請(qǐng)求前綴，如圖1
2. 配置路由信息，如圖2
3. 修改模板文件index.html，如圖3
4. 最后通過(guò)nginx將項(xiàng)目部署到服務(wù)器。
圖1：
圖2：
圖3：
注意：如果你是通過(guò)vue開(kāi)發(fā)的h5頁(yè)面那么你只需要配置router文件就行，如果是原生開(kāi)發(fā)的h5那么你就得配置.html入口文件。
就<meta base=/h5/ >做一說(shuō)明：
?base標(biāo)記定義了文檔的基礎(chǔ)URL地址，在文檔中所有的相對(duì)地址形式的URL都是相對(duì)于這里定義的URL而言的。一篇文檔中的<base>標(biāo)記不能多于一個(gè)，必須放于頭部，并且應(yīng)該在任何包含URL地址的語(yǔ)句之前。
?第二個(gè)問(wèn)題，授權(quán)問(wèn)題
在h5頁(yè)面點(diǎn)擊授權(quán)后，重定向到當(dāng)前項(xiàng)目 https://www.xxx.xxx/h5/
const jumpUrl = `https://www.xxx.xxx/h5/`
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb20930d8128f9ba5&redirect_uri=${jumpUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
// location.herf 該url中除了重定向地址，其他的全是官方文檔提供。
// 重定向后的頁(yè)面url地址會(huì)攜帶用戶的code值，例如：`https://www.xxx.xxx/h5/?code=xxxxxxxxxxxxxxxxxxxxxxx` 這種形式
?這樣我們就能拿到用戶code，再向服務(wù)端發(fā)送請(qǐng)求獲取用戶信息，在按照產(chǎn)品需求進(jìn)行相應(yīng)的操作。
以上是整個(gè)授權(quán)的流程，我在實(shí)現(xiàn)授權(quán)的過(guò)程中遇到了這樣一個(gè)問(wèn)題：
頁(yè)面重定向之后是不會(huì)再去執(zhí)行當(dāng)前方法中后續(xù)代碼的，所以不要在window.location.href 這段代碼后立馬去獲取url中的code值以及后續(xù)的請(qǐng)求操作。（原因?yàn)g覽器重定向后會(huì)刷新頁(yè)面，對(duì)于單頁(yè)應(yīng)用而言會(huì)發(fā)生組件卸載和重新渲染）應(yīng)該在頁(yè)面的根組件生命周期鉤子中獲取url中相應(yīng)的值，去進(jìn)行后續(xù)操作。（由于我使用vue開(kāi)發(fā)的h5頁(yè)面，所以只需要在created鉤子中進(jìn)行判斷獲取），如果使用原生開(kāi)發(fā)的話可以在onload函數(shù)中去獲取。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-402834.html
總結(jié)
在開(kāi)發(fā)過(guò)程中往往會(huì)遇到奇奇怪怪的小問(wèn)題，但是解決這些問(wèn)題往往是最基礎(chǔ)最底層的知識(shí)點(diǎn)；因?yàn)楫?dāng)時(shí)卡了很久，做個(gè)小小的總結(jié)來(lái)鞭策自己，希望能幫助到遇到同樣問(wèn)題的小伙伴，閱讀中如果有異議或者不正確的地方歡迎評(píng)論，我會(huì)及時(shí)更新。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-402834.html
到了這里，關(guān)于H5頁(yè)面實(shí)現(xiàn)微信授權(quán)登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
