微信小程序開發(fā)之OFO共享單車,微信小程序個(gè)人中心頁(yè)制作

2017-12-20

導(dǎo)讀：上一節(jié)我們實(shí)現(xiàn)了單車報(bào)障頁(yè)，這一節(jié)我們來(lái)實(shí)現(xiàn)個(gè)人中心頁(yè)面： Screenshot_2017-05-07-10-15-09-971_com.tencent.mm.png (36.15 KB, 下載次數(shù): 7) 下載附件保存到相冊(cè) 2017-6-5 14:37 上傳 Screenshot_2017-05-0...

上一節(jié)我們實(shí)現(xiàn)了單車報(bào)障頁(yè)，這一節(jié)我們來(lái)實(shí)現(xiàn)個(gè)人中心頁(yè)面：
老套路，先進(jìn)行頁(yè)面分析

個(gè)人中心頁(yè)有兩種狀態(tài)，即未登錄和已登錄，所以要求不同數(shù)據(jù)驅(qū)動(dòng)產(chǎn)生的不同頁(yè)面
點(diǎn)擊登錄/退出登錄按鈕需要響應(yīng)合理邏輯，并改變按鈕樣式
只有登錄狀態(tài)下才會(huì)顯示我的錢包按鈕

頁(yè)面結(jié)構(gòu)

<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>

復(fù)制代碼

指令wx:if="boolean"：
當(dāng)boolean為true，被它（block）包裹的元素將會(huì)顯示，否則不現(xiàn)實(shí)，這樣可以處理在未登錄狀態(tài)下不顯示頭像和錢包按鈕

頁(yè)面樣式

/* 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;
}

復(fù)制代碼

頁(yè)面數(shù)據(jù)邏輯（未登錄狀態(tài)下的數(shù)據(jù)模板初始值定義在data對(duì)象里）

// pages/my/index.js
Page({
data:{
// 用戶信息
userInfo: {
avatarUrl: "",
nickName: "未登錄"
},
bType: "primary", // 按鈕類型
actionText: "登錄", // 按鈕文字提示
lock: false //登錄按鈕狀態(tài)，false表示未登錄
},
// 頁(yè)面加載
onLoad:function(){
// 設(shè)置本頁(yè)導(dǎo)航標(biāo)題
wx.setNavigationBarTitle({
title: '個(gè)人中心'
})
// 獲取本地?cái)?shù)據(jù)-用戶信息
wx.getStorage({
key: 'userInfo',
// 能獲取到則顯示用戶信息，并保持登錄狀態(tài)，不能就什么也不做
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
})
}
});
},
// 登錄或退出登錄按鈕點(diǎn)擊事件
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: "退出登錄"
});
// 存儲(chǔ)用戶信息到本地
wx.setStorage({
key: 'userInfo',
data: {
userInfo: {
avatarUrl: res.userInfo.avatarUrl,
nickName: res.userInfo.nickName
},
bType: "warn",
actionText: "退出登錄"
},
success: function(res){
console.log("存儲(chǔ)成功")
}
})
}
})
}
})
// 如果已經(jīng)登錄，退出登錄按鈕操作
}else{
wx.showModal({
title: "確認(rèn)退出?",
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
})
}
}
})
}
},
// 跳轉(zhuǎn)至錢包
movetoWallet: function(){
wx.navigateTo({
url: '../wallet/index'
})
}
})

復(fù)制代碼

使用wx.login({})API來(lái)進(jìn)行登錄，使用wx.getUserInfo({})API來(lái)獲取用戶信息
我們將用戶信息使用wx.setStorage({})API和wx.getStorage({})這兩個(gè)API來(lái)設(shè)置和獲取本地存儲(chǔ)，用于模擬維護(hù)用戶登錄狀態(tài)。真實(shí)情況下需要使用session

其他章節(jié)
微信小程序開發(fā)之OFO共享單車——掃碼
微信小程序開發(fā)之OFO共享單車——單車報(bào)障頁(yè)
微信小程序開發(fā)之OFO共享單車——個(gè)人中心頁(yè)
微信小程序開發(fā)之OFO共享單車——錢包與充值

第二部分：如何開通一個(gè)小商店