编写登录/未登录页
1.页面结构(wx:if 是条件语句)
用户未登录就没有头像-->用户未登录就没有钱包按钮--> 2.页面样式
Box-shadow: 0 0 20rpx rgba(0,.2) } .user-info text{ display: block; text-align: center; padding: 30rpx 0; margin-bottom: 30rpx; } .btn-login{ position: absolute; bottom: 60rpx; width: 90%; left: 50%; margin-left: -45%; } .gray{ background-color: #ccc; }3.页面数据逻辑
用户信息 userInfo: { avatarUrl: "", nickName: "未登录" }, bType: "primary", // 按钮类型 actionText: "登录", // 按钮文字提示 lock: false //登录按钮状态,false表示未登录 },// 页面加载 onLoad:function(){ // 设置本页导航标题 wx.setNavigationBarTitle({ title: '个人中心' }) // 获取本地数据-用户信息 wx.getStorage({ key: 'userInfo', // 能获取到则显示用户信息,并保持登录状态,不能就什么也不做 success: (res) => { wx.hideLoading(); this.setData({ userInfo: { avatarUrl: res.data.userInfo.avatarUrl, nickName: res.data.userInfo.nickName }, bType: res.data.bType, actionText: res.data.actionText, lock: true }) } }); },// 登录或退出登录按钮点击事件 bindAction: function(){ this.data.lock = !this.data.lock // 如果没有登录,登录按钮操作 if(this.data.lock){ wx.showLoading({ title: "正在登录" }); wx.login({ success: (res) => { wx.hideLoading(); wx.getUserInfo({ withCredentials: false, success: (res) => { this.setData({ userInfo: { avatarUrl: res.userInfo.avatarUrl, nickName: res.userInfo.nickName }, bType: "warn", actionText: "退出登录" }); // 存储用户信息到本地 wx.setStorage({ key: 'userInfo', data: { userInfo: { avatarUrl: res.userInfo.avatarUrl, nickName: res.userInfo.nickName }, bType: "warn", actionText: "退出登录" }, success: function(res){ console.log("存储成功") } }) } }) } }) // 如果已经登录,退出登录按钮操作 }else{ wx.showModal({ title: "确认退出?", content: "退出后将不能使用ofo", success: (res) => { if(res.confirm){ console.log("确定") // 退出登录则移除本地用户信息 wx.removeStorageSync('userInfo') this.setData({ userInfo: { avatarUrl: "", nickName: "未登录" }, bType: "primary", actionText: "登录" }) }else { console.log("cancel") this.setData({ lock: true }) } } }) } },// 跳转至钱包 movetoWallet: function(){ wx.navigateTo({ url: '../wallet/index' }) } })原文链接:https://www.f2er.com/weapp/422941.html