今天我們接着編寫個人中心頁面。
首先我們編輯上半部分的內容。
部分內容在之前的課程中已經有涉及了，
所以這裏有寫部分直接上代碼咯。
編寫頁面的基本元素user.wxml
<view class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
在user.js中加入獲取用戶信息的代碼
app.getUserInfo(function (userInfo) {
that.setData({
userInfo: userInfo
})
})
這裏需要注意的是需要在文件前面使用getapp獲取app對象。
在Page的data屬性中定義userInfo
var app = getApp()
Page({
data: {
userInfo: {}
},
});
最後在user.wxss中定義頁面的樣式（找一張自己喜歡的圖片，放到images中，命名爲userbg.jpg）
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
background-image: url("../../images/userbg.jpg");
background-repeat: no-repeat;
background-size:100% auto;
height: 400rpx;
}
.userinfo-avatar {
width: 140rpx;
height: 140rpx;
margin: 20rpx;
border-radius: 50%;
margin-top: 75rpx;
}
.userinfo-nickname {
color: #fff;
}
運行效果如下：
下半部分的想看和已看列表和首頁的電影列表一樣，
由於我們不能申請豆瓣的接口權限，所以我們直接使用即將上映和熱映的數據。
直接將index中的內容引用進來。
這裏我們可以對之前的代碼做一次簡單的整理，將index.js中的getMovieList和movieDataFactory方法放到util.js中。
修改如下：
util.js
index.js
然後在user.js中也使用這些方法。（注意在user.wxss中要@import “../public/tpl/movielist.wxss”; ）
個人中心運行效果如下：
源代碼：百度雲 鏈接：http://pan.baidu.com/s/1qYod6nM 密碼：72yg
這節課的內容就到這裏結束了。
感謝您的閱讀。
我是莽夫，希望你開心。
如果你覺得本文對你有幫助，請掃描文末二維碼，支持博主原創。
希望大家關注我的個人公衆號ionic_
