多页面实现-个人中心

“个人中心”：展示个人资料、订单物流查询、选择收货地址、客服联系方式首页：展示个人的基本信息及简单的自我介绍。

***实现步骤：

1. 全局页面配置

1.1 创建空白项目
1.2 准备素材图片：复制/images
1.3 在全局页面 app.json 实现代码，包括页面配置 tabBar***
{
“pages”: [
“pages/index/index”,
“pages/person/person”,
“pages/detail/detail”,
“pages/modify/modify”,
“pages/order/order”,
“pages/address/address”
],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#f7982a”,
“navigationBarTitleText”: “个人中心”,
“navigationBarTextStyle”: “white”
},
“tabBar”: {
“color”: “#333”,
“selectedColor”: “#f7982a”,
“backgroundColor”: “#f6f6f6”,
“borderStyle”: “white”,
“list”: [
{
“pagePath”: “pages/index/index”,
“text”: “首页”,
“iconPath”: “images/home.png”,
“selectedIconPath”: “images/home_select.png”
},
{
“pagePath”: “pages/person/person”,
“text”: “个人中心”,
“iconPath”: “images/me.png”,
“selectedIconPath”: “images/me_select.png”
}
]
}
}

2. 主页/pages/index/index 实现代码

2.1 index.js代码
// pages/index/index.js
Page({
changeImage: function(e) {
// 第1种方式：只能跳转到tabBar页面
wx.switchTab({
url: ‘/pages/person/person’
})
// 第2种方式：可以跳转到tabBar或者非tabBar页面
// wx.reLaunch({
// url: ‘/pages/person/person’
// })
}
})

2.2 index.json 代码
{}
2.3 index.wxml代码

欢迎来到我的个人页

昵称：5秒钟的记忆
星座：天秤座
兴趣：看书、旅游
QQ：243233****
电话：152****1605

2.4 index.wxss代码
/* pages/index/index.wxss */

.nav {
display: flex;
align-items: center;
flex-direction: column;
}

.welcome {
font-size: 50rpx;
color: #f7982a; margin: 40rpx 0;
}

.nav > image {
width: 300rpx;
height: 300rpx;
border-radius: 50%;
}

.content {
font-size: 32rpx;
width: 400rpx;
margin: 50rpx auto;
}

.content > view {
text-align: left;
padding: 10rpx 0;
color: #f7982a;
}

3. 主页/pages/person/ person 实现代码

3.1 person.js代码
// pages/person/person.js
Page({
info: function() {
// 保留当前页面，点击页面左上角箭头，返回上一个页面
wx.navigateTo({
url: ‘/pages/detail/detail’,
})
},
order: function(e) {
// 跳转到订单查询页面
// wx.redirectTo({
// url: ‘/pages/order/order’,
// })
wx.navigateTo({
url: ‘/pages/order/order’,
})
},
address: function() {
wx.navigateTo({
url: ‘/pages/address/address’, })
},
contact: function (e) {
// 调用拨打电话API
wx.makePhoneCall({
phoneNumber: ‘400-321’ // 该电话号码为模拟数据
})
}
})

3.2 person.json 代码

3.3 person.wxml代码

待付款已退款全部订单个人资料订单物流查询选择收获地址客服联系方式

3.4 person.wxss代码
/* pages/person/person.wxss */

page {
background-color: #f4f4f4;
font-size: 32rpx;
}

.avatar {
width: 100%;
background-color: #f7982a;
height: 400rpx;
/* 水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
}

.avatar > image {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
border: 10rpx solid rgba(0, 0, 0, 0.1);
}

.content {
background-color: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 65rpx 0;
}

.content > view {
flex: 1;
text-align: center;
}

.content > view > image {
width: 64rpx;
height: 50rpx; }

.menu {
padding: 20rpx;
background-color: #fff;
margin-top: 20rpx;
box-sizing: border-box;
}

.menu > view {
padding: 20rpx;
line-height: 60rpx;
border-bottom: 1px solid #efefef;
height: 60rpx;
}

.menu > view:last-child {
border: none;
}

.arrow {
width: 30rpx;
height: 32rpx;
float: right;
margin-top: 16rpx;
}

4. 主页/pages/detail/ detail实现代码

4.1 detail.js代码
// pages/detail/detail.js
Page({

data: {
gender: ‘女’,
username: ‘xiaoyuer’,
imgUrl: “/images/avatar.jpg”
},

changeAvatar: function() {
wx.chooseImage({
count: 1,
sizeType: [‘original’, ‘compressed’],
sourceType: [‘album’, ‘camera’], success: res => {
// tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
this.setData({
imgUrl: tempFilePaths
})
}
})
},

jump: function(e) {
// 跳转到“个人资料修改页”
wx.navigateTo({
// 为了避免用户名中的特殊字符破坏字符串结构，使用encodeURIComponent()编码
url: ‘/pages/modify/modify?username=’ + encodeURIComponent(this.data.username) +
‘&gender=’ + encodeURIComponent(this.data.gender)
})
}
})

4.2 detail.json 代码
{
“navigationBarTitleText”: “个人资料详情页”
}

4.3 detail.wxml代码

头像昵称 {{username}} 性别 {{gender}} 修改资料

4.4 detail.wxss代码
/* pages/detail/detail.wxss */

page {
background-color: #f4f4f4;
font-size: 32rpx;
}

.info > view {
background-color: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 20rpx;
line-height: 80rpx;
border-bottom: 1px solid #efefef;
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;
}

主页/pages/modify/ modify 实现代码
5.1 modify.js代码
// pages/modify/modify.js
Page({
data: {
username: ‘’,
gender: ‘男’
},
onLoad: function(options) {
this.setData({
// 收到数据后使用decodeURIComponent()解码
username: decodeURIComponent(options.username),
gender: decodeURIComponent(options.gender)
})
},
formSubmit: function(e) {
// 表单返回的所有数据
var formData = e.detail.value
// 获取上一个页面的对象
var pages = getCurrentPages()
var prevPage = pages[pages.length - 2]
// 调用上一个页面的 setData() 方法，把数据存到上一个页面中去
prevPage.setData({
username: formData.username,
gender: formData.gender
})
// 返回到上一个页面
wx.navigateBack()
}
})

5.2 modify.json 代码

5.3 modify.wxml代码

姓名：性别：男女保存

5.4 modify.wxss代码

6. 主页/pages/order/ order实现代码

6.1 order .js代码
// pages/order/order.js
Page({
data: {
no: null, // 运单号
company: [‘sf’, ‘sto’, ‘yt’, ‘yd’, ‘tt’], // 传递给快递查询接口的值
com: [‘顺丰’, ‘申通’, ‘圆通’, ‘韵达’, ‘天天’], // 用于显示在页面中的快递名称
index: 0, // 用户选择的快递公司的数组索引
expressInfo: null, // 查询到的物流信息
},
search: function() {
wx.showLoading({
title: ‘加载中’,
})
// 在 https://www.juhe.cn/docs/api/id/43 注册后可申请数据，将获得的接口填入url
// key值在个人中心-我的数据，可获取AppKey
var key = ‘’
wx.request({
url: ‘http://v.juhe.cn/exp/index?key=’ + key + ‘&com=’ +
this.data.company[this.data.index] + ‘&no=’ + this.data.no, method: ‘GET’,
header: {
‘content-type’: ‘application/json’ // 默认值
},
success: res => {
console.log(res.data);
this.setData({
expressInfo: res.data
})
wx.hideLoading()
}
})
},
// 获取运单号的值
noInput: function(e) {
this.setData({
no: e.detail.value
})
},
// 获取快递公司的索引
companyInput: function(e) {
this.setData({
index: e.detail.value
})
}
})

6.2 order .json 代码
{
“navigationBarTitleText”: “物流信息”
}

6.3 order.wxml代码

欢迎进入快递查询系统

请选择快递公司：

运单号：

查询

【{{item.datetime}}】{{item.remark}}

6.4 order.wxss代码
/* pages/order/order.wxss */

.container {
padding: 20rpx;
}

.container > .title {
text-align: center;
}

button {
width: 300rpx;
height: 80rpx;
line-height: 80rpx;
margin: 30rpx auto;
}

.section {
width: 100%;
box-sizing: border-box;
margin-top: 80rpx;
overflow: hidden;
}

.section > .title {
width: 20%;
float: left;
font-size: 28rpx;
text-align: right;
line-height: 42rpx;
}

.section > .input {
border: 1px solid gainsboro; width: 70%;
padding: 5rpx 10rpx;
float: right;
font-size: 32rpx;
}

.orderlist {
height: 300px;
}

.orderlist view {
border-bottom: 1px solid #efefef;
font-size: 32rpx;
padding: 10rpx 0;
}

.orderlist text {
color: red;
font-size: 28rpx;
}

7. 主页/pages/address/ address实现代码

7.1 address.js代码
// pages/address/address.js
Page({
data: {
addressInfo: null
},
chooseAddress() {
wx.chooseAddress({
// 成功之后，把所有数据存放在addressInfo里，在wxml中调用
success: res => {
this.setData({
addressInfo: res
})
},
// 接口返回失败信息，打印在控制台中
fail: err => {
console.log(err)
}
})
}
})
7.2 address.json 代码

7.3 address.wxml代码

收货人姓名 {{ addressInfo.userName }} 邮编 {{ addressInfo.postalCode }} 地区 {{ addressInfo.provinceName }} {{ addressInfo.cityName }} {{ addressInfo.countyName }} 收货地址 {{ addressInfo.detailInfo }} 国家码 {{ addressInfo.nationalCode }} 手机号码 {{ addressInfo.telNumber }} 获取收货地址

7.4 address.wxss代码
page {
background-color: #f6f6f6;
font-family: “微软雅黑”;
font-size: 30rpx;
color: #353535; }

.list {
font-size: 36rpx;
}

.list > view {
background-color: #fff;
padding: 20rpx;
border-bottom: 1rpx solid #e0e0e0;
display: flex;
}

.list .head {
width: 210rpx;
}

.list .body {
flex: 1;
}

.add {
width: 100%;
background-color: #fff;
position: absolute;
bottom: 0;
padding: 15rpx 15rpx 30rpx 40rpx;
border-top: 1rpx solid #e0e0e0;
}

.add > image {
width: 50rpx;
margin-top: 15rpx;
margin-right: 20rpx;
}

.add > .left {
float: left;
}

.add > .right {
width: 25rpx;
float: right;
margin-right: 60rpx; padding-top: 15rpx;
color: #e0e0e0;
}

.add > .text {
float: left;
margin-top: 20rpx;
}

8. 完善功能选项

8.1 修改客服联系电话为：400-400-955-911
8.2 新增物流快递选项：如中通、德邦等
8.3 修改首页为自己的信息（个人简介）
8.4 新增个人资料详细页内容（比如个人爱好、性格特征等）
8.5 收货地址的提取
images文件夹包含的图片
me.png
me_select.png
right.png
iconthree.png

avatar.jpg
home.png
arrow.png
icontwo.png
6.pnghome_select.png