微信登錄組件
- 此組件是項(xiàng)目中用到的，項(xiàng)目結(jié)束了，分享給大家，希望能對大家有所幫助
- 這里只討論怎樣解決需要已登錄狀態(tài)才能繼續(xù)操作锦爵，具體登錄邏輯不做討論
- 源碼已經(jīng)上傳GitHub --> zy-login-view 求Star
需要已登錄狀態(tài)才能繼續(xù)操作這個(gè)具體應(yīng)用場景我相信產(chǎn)品經(jīng)理們能夠給你一個(gè)詳情解答
這里我們具體分析一下：
- 我們點(diǎn)擊一個(gè)視圖View（其實(shí)很少是Button，而登錄卻需要Button）進(jìn)行某項(xiàng)操作
- --> 已登錄 --> 執(zhí)行該操作
- --> 未登錄 --> 登錄 --> 自動繼續(xù)該操作
當(dāng)然其中登錄還有以下情況：
- 登錄時(shí) --> 發(fā)現(xiàn)沒有注冊（很多項(xiàng)目是以綁定手機(jī)號與否認(rèn)定是否注冊喳魏，雖然有違微信小程序的快捷與方便的初衷棉浸，但是確實(shí)存在）--> 跳轉(zhuǎn)注冊頁面 --> 注冊成功 --> 返回此頁面(一般走了注冊流程的返回源頁面就行了)
本組件實(shí)現(xiàn)方式是：
- 判斷是否登錄
- 已登錄 --> 將原來的視圖插入本組件的<slot></slot>中 --> triggerEvent
- 未登錄 --> 寫一個(gè)透明button覆蓋原來視圖 --> login(判斷權(quán)限怀薛，登錄刺彩，注冊，處理數(shù)據(jù)等等。创倔。嗡害。可以封裝一個(gè)login.js文件專門處理這些東西) --> 登錄成功 --> triggerEvent
js主要代碼
// 未登錄狀態(tài)
//獲取用戶信息
handleUserInfo: function (e) {
if (e.detail.errMsg ===
"getUserInfo:ok") {
wx.showLoading({
title: '登錄中...',
mask: true,
});
// 這里是一個(gè)登錄的相關(guān)操作的封裝畦攘，引入的外部js文件
// login().then(() => {
// this.triggerEvent('onLoginSuccess', {
// payload: this.data.payload
// })
// })
//模擬登錄
setTimeout(() => {
wx.setStorageSync('isLogin', true);
wx.hideLoading();
this.triggerEvent('onLoginSuccess', {
payload: this.data.payload
})
}, 2000)
} else {
wx.showToast({
title: "登錄失敗霸妹，請稍后重試",
icon: 'none'
});
}
},
//已登錄狀態(tài)
handleTap: function () {
this.triggerEvent('onLoginSuccess', {
payload: this.data.payload
})
}
wml主要代碼
<view class='container' bindtap="handleTap" wx:if="{{isLogin}}">
<slot></slot>
</view>
<view class='container' wx:else>
<button
class='auth'
open-type="getUserInfo"
bindgetuserinfo="handleUserInfo"
>
授權(quán)登錄
</button>
<slot></slot>
</view>
使用方法：
- .json文件引入
{
"usingComponents": {
"login-view": "../../component/login-view/login-view"
}
}
- .wxml使用
<login-view hasLogin='{{hasLogin}}' payload='sendInData<AnyType>' bind:onLoginSuccess="jumpToLogsPage">
<view class='login'>已登錄狀態(tài)才能跳轉(zhuǎn)</view>
</login-view>
- .js文件中，就當(dāng)此判斷不存在知押，比如此例中正常使用,data就是傳入登錄組件的參數(shù)叹螟，可以穿任意類型，原樣返回台盯。需要在onShow中更新登錄狀態(tài)
onShow: function () {
this.setData({
hasLogin: wx.getStorageSync('isLogin')
})
},
/**
* 點(diǎn)擊事件原來需要做的操作
* 登錄成功后自動繼續(xù)做這個(gè)操作
*/
jumpToLogsPage: function(data) {
console.log("data:", data)
wx.navigateTo({
url: '../logs/logs'
})
}
下面是具體實(shí)例：
- 第一次未登錄罢绽，點(diǎn)擊登錄成功后自動跳轉(zhuǎn)（如果是新用戶，則先彈窗授權(quán)）
-
第二次點(diǎn)擊時(shí)已經(jīng)登錄了静盅，所以直接跳轉(zhuǎn)
login-view.gif
需要完整源碼請上GitHub --> zy-login-view 獲取
賞我一個(gè)贊吧~~~
