全栈工程师之路-中级篇之小程序开发-第二章第七节我的中心

今天咱们接着编写我的中心页面。
首先咱们编辑上半部分的内容。
部份内容在以前的课程中已经有涉及了，
因此这里有写部分直接上代码咯。
编写页面的基本元素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_