安卓开发个⼈信息页⾯代码_「⼩程序JAVA实战」⼩程序我的
个⼈信息页⾯开发(41)...
已经完成了登录和注册页⾯已经开发完毕,当⽤户注册和登录完毕后,让⽤户登录到我们的个⼈信息页⾯,就是我的页⾯。源码:github/limingios/wxProgram.git 中No.15
我的页⾯的功能
当其他⼈查看我的信息,可以看到关注我,粉丝数量,关注数量,获赞数量。
当⽤户⾃⼰点击我的信息,可以看到上传视频,注销登录,粉丝数量,关注数量,获赞数量。
页⾯的设计
mine⽂件内加⼊基本的⼩程序需要的元素
mine.wxml
<view>
<view class='container'>
<image src="{{faceUrl}}" class="face"></image>
<label class='nickname'>{{nickname}}</label>
<button size='mini' class='primary' bindtap='uploadVideo'> 上传作品</button>
<button size='mini' type='' class='logout' bindtap='logout'>注销</button>
<button size='mini' type='' class='follow' data-followType='0' bindtap='followMe'>已关注</button>
<button size='mini' type='primary' class='follow' data-followType='1' bindtap='followMe'>关注我</button>
<view class='container-row'>
<label class='info-items'>{{fansCounts}} 粉丝</label>
<label class='info-items'>{{followCounts}} 关注</label>
<label class='info-items'>{{receiveLikeCounts}} 获赞</label>
</view>
</view>
</view>
<view class="line"></view>
mine.js
// pages/mine/mine.js
Page({
/**
* 页⾯的初始数据
*/
data: {
faceUrl: "../../resource/images/noneface.png", nickname: "昵称",
fansCounts: 0,
followCounts: 0,
receiveLikeCounts: 0,
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () {
},
/
**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function () {
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function () {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function () {
},
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage: function () {
}
})
mine.wxss
page {
font-size: 14px;
}
.container {
background-color: whitesmoke; display: flex;
flex-direction: column;
align-items: center;
}
.container-row {
display: flex;
flex-direction: row;
margin-bottom: 10px;
margin-top: 10px;
}
.info-items {
margin-left: 30px;
}
.face {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
margin-top: 20px;
}
.nickname {
margin-top: 5px;
font-weight: bold;
font-size: 18px;
}
.logout {
margin-top: 3px;
float: right;
}
.follow {
margin-top: 3px;
安卓程序开发用什么软件}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论