微信小程序開發(fā)登錄驗(yàn)證實(shí)現(xiàn)教程
微信小程序開發(fā)過程中,我們會(huì)需要一個(gè)小程序的登錄授權(quán)界面,一般是獲取用戶授權(quán),以下就為大家介紹微信小程序開發(fā)登錄驗(yàn)證實(shí)現(xiàn)教程
需求描述:
對(duì)于部分頁(yè)面添加登錄驗(yàn)證,用戶未登錄的情況下,進(jìn)入頁(yè)面,頁(yè)面自動(dòng)轉(zhuǎn)向登錄頁(yè)面。登錄驗(yàn)證成功后,回調(diào)到登錄發(fā)起頁(yè)面。
實(shí)現(xiàn)思路:
創(chuàng)建全局變量用于存儲(chǔ)當(dāng)前登錄用戶對(duì)象(userInfo)、全局方法用于驗(yàn)證登錄有效性(checkLoginInfo())、全局方法用于獲取當(dāng)前頁(yè)面的全路徑(getCurrentUrl())。
針對(duì)需要添加登錄限制的頁(yè)面page.onLoad事件,調(diào)用checkLoginInfo()方法,判斷當(dāng)前登錄狀態(tài)。如未登錄,頁(yè)面轉(zhuǎn)向登錄頁(yè)面。
登錄驗(yàn)證通過后,將登錄信息存儲(chǔ)到全局變量userInfo,跳轉(zhuǎn)回登錄發(fā)起頁(yè)面。
關(guān)鍵代碼及注意事項(xiàng):
app.js
data:{
userInfo:null,//用戶登錄存儲(chǔ)對(duì)象
loginUrl:../login/login,
},
checkLoginInfo:function(url){//驗(yàn)證登錄狀態(tài)
if(this.data.userInfo==null){
return url;
}else{
return ;
}
},
getCurrentUrl:function(){//獲取當(dāng)前頁(yè)面全路徑
var url=getCurrentPages()[getCurrentPages().length-1].__route__;
url=url.replace(eapdomain/src/pages,..);//替換路徑全路徑。修改該路徑為相對(duì)路徑
return url;
}
注意:在getCurrentUrl方法中,最后返回url時(shí),又調(diào)用了replace方法。因?yàn)閣x.redirectTo的url參數(shù)要求為相對(duì)路徑。所以在這里轉(zhuǎn)換了一下。
login.js
var app=getApp();
Page({
data:{
backUrl:null,
loginName:null,
passWord:null
},
onLoad:function(options){
this.setData({
backUrl:null
});
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來的參數(shù)
//console.log(options.backUrl);
this.setData({
backUrl:options.backUrl
});
},
inputClick:function(event){
//動(dòng)態(tài) 對(duì) paga.data 進(jìn)行賦值
//id與 數(shù)據(jù)項(xiàng) 一一對(duì)應(yīng)
var objId=event.currentTarget.id;
var paraObj={};
paraObj[objId]=event.detail.value;
this.setData(paraObj);
//console.log(event.currentTarget.id);
//console.log(this.data);
},
onReady:function(){
// 頁(yè)面渲染完成
},
onShow:function(){
// 頁(yè)面顯示
},
onHide:function(){
// 頁(yè)面隱藏
},
onUnload:function(){
// 頁(yè)面關(guān)閉
},
loginClick:function(){
var loginName=this.data.loginName;
var passWord=this.data.passWord;
if(loginName!=null&&passWord!=null){
var backUrl=this.data.backUrl;
// wx.redirectTo({
// url:\'eapdomain/src/pages/pageCreate/pageCreate\'
// })
app.data.userInfo={
loginName:loginName,
passWord:passWord
};
wx.redirectTo({
url: backUrl
});
// wx.redirectTo({
// //目的頁(yè)面地址
// url: \'pages/logs/index\',
// success: function(res){},
// })
}else{
this.setData({
loginName:null,
passWord:null
});
}
}
})
這里inputClick事件。根據(jù)前臺(tái)控件id為page.data數(shù)據(jù)進(jìn)行賦值。
以上就是這篇微信小程序開發(fā)登錄驗(yàn)證實(shí)現(xiàn)教程,更多關(guān)于微信小程序開發(fā),請(qǐng)關(guān)注本網(wǎng)站,謝謝~
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。更多小程序請(qǐng)查看:小程序商店