隨著微信小程序的普及，越來(lái)越多的人開(kāi)始關(guān)注微信小程序的開(kāi)發(fā)。在這個(gè)過(guò)程中，登錄模塊是不可或缺的，而Uniapp也成為了一個(gè)流行的微信小程序開(kāi)發(fā)框架。那么，Uniapp微信小程序登錄怎么做呢？下面讓我們?cè)敿?xì)了解一下。
一、微信開(kāi)發(fā)者平臺(tái)配置
在進(jìn)行微信小程序登錄之前，我們需要先在微信開(kāi)發(fā)者平臺(tái)進(jìn)行相關(guān)配置。首先，在“開(kāi)發(fā)”->“開(kāi)發(fā)設(shè)置”->“開(kāi)發(fā)者工具”中，將“服務(wù)端口”開(kāi)啟，并填入自己的IP地址。
其次，在“開(kāi)發(fā)”->“開(kāi)發(fā)設(shè)置”->“小程序后臺(tái)配置”中，將小程序“request合法域名”添加上。
然后，我們需要獲取小程序的AppID和AppSecret，進(jìn)入“設(shè)置”->“開(kāi)發(fā)者工具”->“開(kāi)發(fā)設(shè)置”中查看即可。
二、Uniapp配置
在MicroMessenger-uni這個(gè)條件編譯中，我們需要先引入wx-auth.js文件，該文件可以自己編寫(xiě)或從網(wǎng)絡(luò)上下載。
在App.vue的onLaunch中，將微信小程序的AppID、AppSecret、后臺(tái)獲取Openid的地址等配置好。
下一步，在調(diào)用登錄接口時(shí)，我們需要在wx-auth.js中編寫(xiě)獲取code的方法：
getLoginCode()?{
??????return?new?Promise((resolve,?reject)?=>?{
????????uni.login({
??????????success:?(res)?=>?{
????????????if?(res.code)?{
??????????????resolve(res.code)
????????????}?else?{
??????????????reject(res)
????????????}
??????????},
??????????fail:?(err)?=>?{
????????????reject(err)
??????????}
????????})
??????})
????}然后，在wx-auth.js中編寫(xiě)獲取Openid的方法：
getOpenId(appid,?secret,?code)?{
??????return?new?Promise((resolve,?reject)?=>?{
????????uni.request({
??????????url:?'https://api.weixin.qq.com/sns/jscode2session?appid='?+?appid?+?'&secret='?+?secret?+?'&js_code='?+?code?+?'&grant_type=authorization_code',
??????????success:?(res)?=>?{
????????????resolve(res)
??????????},
??????????fail:?(err)?=>?{
????????????reject(err)
??????????}
????????})
??????})
????}在項(xiàng)目中的登錄頁(yè)中，我們可以編寫(xiě)登錄的方法：
async?login()?{
??????let?code?=?await?this.getLoginCode()
??????let?res?=?await?this.getOpenId(this.appid,?this.secret,?code)
??????console.log(res)
??????//?在這里可以將Openid和其他用戶信息存入后臺(tái)，實(shí)現(xiàn)登錄功能
???}三、微信小程序端實(shí)現(xiàn)
在微信小程序端，我們需要在登錄按鈕中調(diào)用wx.login方法獲取code，然后將code傳到后臺(tái)，從后臺(tái)獲取Openid和其他用戶信息，實(shí)現(xiàn)登錄功能。
下面是微信小程序調(diào)用wx.login方法的示例：
wx.login({
??????success(res)?{
????????if?(res.code)?{
??????????//將code傳到后臺(tái)獲取Openid
????????}?else?{
??????????console.log('登錄失敗！'?+?res.errMsg)
????????}
??????},
??????fail(err)?{
????????console.log('登錄失敗！'?+?err.errMsg)
??????}
????})四、總結(jié)
通過(guò)以上步驟，我們可以實(shí)現(xiàn)Uniapp微信小程序的登錄功能。需要注意的是，微信小程序登錄需要與后端API接口聯(lián)調(diào)，并從后端獲取返回信息，實(shí)現(xiàn)真正的登錄過(guò)程。同時(shí)，登錄過(guò)程中需要保護(hù)用戶的隱私信息，如Openid等，避免泄露和濫用。
