微信小程序开发之OFO共享单车,微信小程序个人中心页制作

2017-12-20

导读：上一节我们实现了单车报障页，这一节我们来实现个人中心页面： Screenshot_2017-05-07-10-15-09-971_com.tencent.mm.png (36.15 KB, 下载次数: 7) 下载附件保存到相册 2017-6-5 14:37 上传 Screenshot_2017-05-0...

上一节我们实现了单车报障页，这一节我们来实现个人中心页面：
老套路，先进行页面分析

个人中心页有两种状态，即未登录和已登录，所以要求不同数据驱动产生的不同页面
点击登录/退出登录按钮需要响应合理逻辑，并改变按钮样式
只有登录状态下才会显示我的钱包按钮

页面结构

<view class="container">
<view class="user-info">
<block wx:if="{{userInfo.avatarUrl != ''}}">
<image src="{{userInfo.avatarUrl}}"></image>
</block>
<text>{{userInfo.nickName}}</text>
</view>
<block wx:if="{{userInfo.avatarUrl != ''}}">
<view class="my-wallet tapbar" bindtap="movetoWallet">
<text>我的钱包</text>
<text>></text>
</view>
</block>
<button bindtap="bindAction" class="btn-login" hover-class="gray" type="{{bType}}" >{{actionText}}</button>
</view>

复制代码

指令wx:if="boolean"：
当boolean为true，被它（block）包裹的元素将会显示，否则不现实，这样可以处理在未登录状态下不显示头像和钱包按钮

页面样式

/* pages/my/index.wxss */
.user-info{
background-color: #fff;
padding-top: 60rpx;
}
.user-info image{
display: block;
width: 180rpx;
height: 180rpx;
border-radius: 50%;
margin: 0 auto 40rpx;
box-shadow: 0 0 20rpx rgba(0,0,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;
}

复制代码

页面数据逻辑（未登录状态下的数据模板初始值定义在data对象里）

// pages/my/index.js
Page({
data:{
// 用户信息
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'
})
}
})

复制代码

使用wx.login({})API来进行登录，使用wx.getUserInfo({})API来获取用户信息
我们将用户信息使用wx.setStorage({})API和wx.getStorage({})这两个API来设置和获取本地存储，用于模拟维护用户登录状态。真实情况下需要使用session

其他章节
微信小程序开发之OFO共享单车——扫码
微信小程序开发之OFO共享单车——单车报障页
微信小程序开发之OFO共享单车——个人中心页
微信小程序开发之OFO共享单车——钱包与充值

第二部分：如何开通一个小商店