全棧工程師之路-中級篇之小程序開發-第二章第七節我的中心

今天咱們接着編寫我的中心頁面。
首先咱們編輯上半部分的內容。
部份內容在以前的課程中已經有涉及了，
因此這裏有寫部分直接上代碼咯。
編寫頁面的基本元素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_