微信小程序開發之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共享單車——錢包與充值

第二部分：如何開通一個小商店

一级片大奶子_色又黄又爽18禁免费视频_热久久久久久久_久久久精品一区二区_日韩av不卡在线播放_精品国内自产拍在线观看视频

微信小程序開發之OFO共享單車,微信小程序個人中心頁制作