本文给大家带来的是微信小程序商城简单的个人中心信息页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/user-detail/user-detail.wxml-->
<view class="user">
<view class="list section">
<view class="flex-con">
<span class="icon icon-woman"></span>
<text>头像</text>
<image src="{{userImg}}" wx:if="{{userImg}}"></image>
<image src="../../image/defaultuser.png" wx:else></image>
</view>
<navigator url="../editname/editname" >
<view class="flex-con">
<span class="icon icon-edit"></span>
<text class="dec">用户名</text>
<text class="detail">{{userName}}</text>
<span class="icon icon-right"></span>
</view>
</navigator>
<navigator url="../editphone/editphone" >
<view class="flex-con">
<span class="icon icon-phone2"></span>
<text class="dec">绑定手机号</text>
<text class="detail phone">{{userPhone}}</text>
<span class="icon icon-right"></span>
</view>
</navigator>
</view>
</view>
|
二、wxss样式文件代码如下:
/* pages/user-detail/user-detail.wxss */
.user {
background-color: #fff;
color: #222;
-webkit-tap-highlight-color: transparent;
}
.section {
background: #fff;
padding: 0 20rpx;
}
.list .flex-con {
display: flex;
align-items: center;
flex-direction: row;
padding: 30rpx 0;
border-bottom: 1px solid #e8e8e8;
}
.list .flex-con image{
width: 90rpx;
height: 90rpx;
border-radius: 50%;
}
.list .flex-con .icon {
font-size: 28rpx;
}
.list .flex-con text{
display: block;
flex: 1;
margin: 0 20rpx;
font-size: 28rpx;
}
.list .flex-con .dec{
display: inline-block;
width: 160rpx;
}
.list .flex-con .detail{
text-align: right;
}
.list .flex-con .phone{
color: #e61773;
}
@import "../../css/font.wxss";
|
三、js页面代码如下:
// pages/user-detail/user-detail.js
//获取app实例
var appInstance = getApp();
var polyfill = require('../../utils/polyfill.js');
Page({
data:{
userImg: null,
userName: null,
userPhone: null,
userInfo: {}
},
judge: function(){
if(!appInstance.globalData.userInfo.hasData){
wx.navigateBack({
delta: 1
});
}
},
onLoad:function(options){
this.judge();
this.setData({
userImg: appInstance.globalData.userInfo.avatar,
userName: appInstance.globalData.userInfo.nickname,
userPhone: appInstance.globalData.userInfo.phone,
userInfo: appInstance.globalData.userInfo
});
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
if(!polyfill.object.isObjectValueEqual(appInstance.globalData.userInfo, this.data.userInfo)){
this.setData({
userImg: appInstance.globalData.userInfo.avatar,
userName: appInstance.globalData.userInfo.nickname,
userInfo: appInstance.globalData.userInfo
});
}
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|