微信登录组件
需要已登录状态才能继续操作这个具体应用场景我相信产品经理们能够给你一个详情解答
本组件实现方式是:
// 未登录状态
//获取用户信息
handleUserInfo: function (e) {
if (e.detail.errMsg ===
"getUserInfo:ok") {
wx.showLoading({
title: '登录中...',
mask: true,
});
// 这里是一个登录的相关操作的封装,引入的外部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'
});
}
},
//已登录状态
handleTap: function () {
this.triggerEvent('onLoginSuccess', {
payload: this.data.payload
})
}
<view class='container' bindtap="handleTap" wx:if="{{isLogin}}">
<slot></slot>
</view>
<view class='container' wx:else>
<button
class='auth'
open-type="getUserInfo"
bindgetuserinfo="handleUserInfo"
>
授权登录
</button>
<slot></slot>
</view>
.container{
position: relative;
}
.auth{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1000;
font-size: 0;
line-height: 0;
}
{
"usingComponents": {
"login-view": "../../component/login-view/login-view"
}
}
<login-view hasLogin='{{hasLogin}}' payload='sendInData<AnyType>' bind:onLoginSuccess="jumpToLogsPage">
<view class='login'>已登录状态才能跳转</view>
</login-view>
onShow: function () {
this.setData({
hasLogin: wx.getStorageSync('isLogin')
})
},
/**
* 点击事件原来需要做的操作
* 登录成功后自动继续做这个操作
*/
jumpToLogsPage: function(data) {
console.log("data:", data)
wx.navigateTo({
url: '../logs/logs'
})
}
login-view.gif