一 概述
- 个人详情页对应的页面为:
pages/detail/detail
- 页面搭建
- 页面逻辑
二 页面搭建
2.1 布局文件(detail.wml)
<view class="info">
<!--头像-->
<view>
<view class="fl">头像</view>
<view class="rl">
<image src="{{imgUrl}}" mode="aspectFill" bindtap="changeAvatar"></image>
<image class="arrow" src="/images/arrow.png"></image>
</view>
</view>
<!--昵称-->
<view>
<view class="fl">昵称</view>
<view class="rl">{{username}}<view class="arrow"></view>
</view>
</view>
<!--性别-->
<view>
<view class="fl">性别</view>
<view class="rl">{{gender}}<view class="arrow"></view>
</view>
</view>
<button class="button" bindtap="jump" type="primary">修改资料</button>
</view>
2.2 页面样式文件(detail.wxss)
page{
background: white;
font-size: 32rpx;
}
.info>view{
background: white;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 20rpx;
line-height: 80rpx;
border-bottom: 1px solid gray;
height: 80rpx;
}
.info>view:last-child{
border: none;
}
.fl{
flex: 1;
}
.rl{
flex: 1;
text-align: right;
}
.info image{
width: 50rpx;
height: 50rpx;
margin-top: 20rpx;
}
.info .arrow{
width: 30rpx;
height: 32rpx;
float: right;
margin: 26rpx 0 0 15rpx;
}
2.3 标题内容(detail.json)
{
"usingComponents": {},
"navigationBarTitleText": "个人资料详情页"s
}
三 页面逻辑(detail.js)
Page({
/**
* 页面的初始数据
*/
data: {
gender: '女',
username: '5秒种的记忆',
imgUrl: '/images/avatar.png'
},
//选择头像
changeAvatar: function () {
wx.chooseImage({
count: 1, //最多可以选择9张图片
sizeType: ['original', 'compressed'], //图片尺寸原图,压缩图
sourceType: ['album', 'camera'], //图片来源, 从相册选图,使用相机
success: res => {
//tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
this.setData({
imgUrl: tempFilePaths
})
}
})
},
//跳转到"个人资料修改页"
jump: function () {
wx.navigateTo({
//为了避免用户名中的特殊字符破坏字符串结构,使用encodeURIComponent()编码
url: '/pages/modify/modify?username=' + encodeURIComponent(this.data.username) + '&gender=' + encodeURIComponent(this.data.gender),
})
}
})
四 源码