【微信小程序开发（从零到一）】——个人中心页面的实战项目（终结）

曼亿点

于 2024-06-12 09:39:59 发布

阅读量1.1k

点赞数 89

分类专栏：微信小程序开发文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/2301_77628600/article/details/139591628

版权

微信小程序开发专栏收录该内容

25 篇文章 23 订阅

订阅专栏

在这里插入图片描述

👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由曼亿点原创

👨‍💻 收录于专栏：微信小程序开发

⭐🅰⭐

个人中心运行展示视频

文章目录

⭐前言⭐

个人中心案例设计了两个标签页面，“首页”展示个人的基本信息及简单的自我介绍。图一所示：“个人中心”展示个人资料、订单物流查询、选择收货地址、客服联系方式等功能。页面效果图二所示：

图一：
在这里插入图片描述
图二：

“首页”与’个人中心”页面时标签之间的跳转。点击”首页“中头像上方提示语”点击跳转“，即可以跳转到”个人中心“页面，当然底部标签页面也可以实现页面的跳转。

🎶 一、实现底部标签页切换

底部标签页是指”首页“和”个人中心“页之间的跳转通过wx.switchTab或者wx.reLaunch方式实现，具体操作如下：
编写app.json页面，配置tabBar和导航栏的设置，具体代码如下：

{
  "pages": [
    "pages/index/index",
    "pages/person/person",
    "pages/detail/detail",
    "pages/modify/modify",
    "pages/order/order",
    "pages/address/address"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "个人中心",
    "navigationBarBackgroundColor": "#f6f6f6",
    "backgroundTextStyle": "light"
  },
"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"
  }
]
},
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

保存测试上述代码，创建相对应得页面。接着编写pages/index/index.wxml文件，具体代码如下：

<!--pages/index/index.wxml-->
<view class="nav">
<text class="welcome">欢迎来到个人页面</text>
<image src="/images/avatar.jpg" mode="aspectFill" bindtap="changeImage"></image>
</view>
<view class="content">
<view>昵称：5秒钟的记忆</view>
<view>星座：天平座</view>
<view>兴趣：看书，旅游</view>
<view>QQ：1234435565</view>
<view>电话：15644352213</view>
</view>

接下来编写pages/index/index.js文件，增添changeImage()函数，实现跳转，具体代码如下：

changeImage:function(e){
    wx.switchTab({
      url: '/pages/person/person',
    })

然后编写page/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;
}

🎶 二、编辑个人资料

”个人中心“ 页面有” 个人资料详情页面“，这也是页面之间得跳转功能，下面编写”个人资料详情页面“得代码。
接着编写pages/person/person.wxml文件，给个人资料绑定info（）函数,实现页面跳转，具体代码如下：

<!--pages/person/person.wxml-->
<view class="avatar">
<image src="/images/avatar.jpg"></image>
</view>
<view class="content">
<view>
<image src="/images/iconone.png"></image>
<view>待付款</view>
</view>
<view>
<image src="/images/icontwo.png"></image>
<view>已退款</view>
</view>
<view>
<image src="/images/iconthree.png"></image>
<view>全部订单</view>
</view>
</view>
<view class="menu">
<view bindtap="info">
个人资料
<image class="arrow" src="/images/arrow.png"></image>
</view>
<view bindtap="order"> 
订单物流查询
<image class="arrow"src="/images/arrow.png"></image>
</view>
<view bindtap="address">
选择获取地址
<image class="arrow"src="/images/arrow.png"></image>
</view>
<view bindtap="contact">
客服联系方式
<image class="arrow"src="/images/arrow.png"></image>
</view>
</view>

接着进入pages/person/person.js文件，编写info()函数，具体代码如下。

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',
    })
  },

然后编写pages/preson/preson.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, 1);
}
.content{
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 65px 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;
}

接下来进行上传头像操作，进入pages/detail/detail.wxml文件，给image绑定上传头像changeAvater()函数，具体代码如下：

<!--pages/detail/detail.wxml-->
<view class="info">
<view>
<view class="fl">头像</view>
<view class="rl">
<image src="{{imgUrl}}" mode="aspectFill" bindtap="changeAvatar"></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 bindtap="jump" type="primary">修改资料</button>
</view>

进入pages/detail/detail.js文件，增加data数据和changeAvater()函数，具体代码如下：

data: {
gender:'女',
username:'xiaoyuer',
imgUrl:"/images/arrow.png"
  },
  changeAvatar:function(){
wx.chooseImage({
  count:1,
  sizeType:['original','compressed'],
  sourceType:['album','camera'],
  success:res=>{
    var tempFilePaths=res.tempFilePaths
    this.setData({
      imgUrl:tempFilePaths
    })
  }

})
  },
  jump:function(e){
wx:wx.navigateTo({
  url: '/pages/modify/modify? username=' +encodeURIComponent(this.data.username)+'&gender='+encodeURIComponent(this.data.gender)
})
  },

接下来编写pages/detail/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/detail/detail.json文件中修改导航栏题，具体代码如下：```

{
  "usingComponents": {},
  "navigationBarTitleText": "个人资料详细页"
}

🎶 三、订单物流查询

在”个人中心“页面单击”订单物流查询“跳转到”订单查询“页面，可以选择快递公司，输入运单号，点击”查询“按钮，在页面下展示物流信息。下面编写代码实现订单查阅功能。
完成上面几部分的代码后，将进入订单物流查询pages/order/order.wxml文件，给”查询“按钮绑定search()函数，设计”订单查询“页面布局，具体代码如下：

<!--pages/order/order.wxml-->
<view class="container">
<view class="title">欢迎进入快递查询系统</view>
<view class="section">
<view class="title">请选择快递公司：</view>
<picker class="input" bindchange="companyInput" value="{{index}}" range="{{com}}">
<view>{{com[index]}}</view>
</picker>
</view>
<view class="section">
<view class="title">运单号：</view>
<input class="input" type="number" bindinput="noIput" placeholder="请输入运输单号"/>
</view>
<button type="primary" bindtap="search">查询</button>
<scroll-view scroll-y class="orderlist">
<view wx:for="{{expressInfo.result.list}}" wx:key=" *this">
<text>【{{item.datetime}}】</text>{{item.remark}}
</view>
</scroll-view>
</view>

进入pages/order/order.js文件，调用接口获取数据并在页面展示数据，具体代码如下：

  data: {
no:null,
company:['sf','sto','yt','yd','tt'],
com:['顺丰','申通','圆通','韵达','天天'],
index:0,
expressInfo:null,
  },
  search:function(){
wx.showLoading({
  title: '加载中',
})

接着在pages/order/order.wxml文件中，编写样式代码，具体如下：

/* 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;
}

还可以在pages/order/order.json文件中修改导航栏标题，代码如下：

{
  "usingComponents": {},
  "navigationBarTitleText": "物流信息"
}

🎶 四、选择收货地址查询

在”个人中心“页面，点击”选择收货地址“，跳转到，”收货地址“页面，进入页面后默认没有数据信息，点击页面下方”获取收货地址“，进入收货地址原生页面。用户授权后，选取通讯录地址或者填写新增地址后，返回”收货地址页面“，展现地址数据信息。这里需要绑定wx.chooseAddress()函数调出用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址信息，具体操作如下：
在pages/address/adress.wxml文件，设计”收货地址“界面，具体代码如下：

<!--pages/address/address.wxml-->
<view class="list"> 
<view>
<view class="head">收货人姓名</view>
<view class="body">{{addressInfo.userName}}</view>
</view>
<view>
  <view class="head">邮编</view>
<view class="body">{{addressInfo.postalCode}}</view>
</view>
<view>
  <view class="head">地区</view>
<view class="body">{{addressInfo.provinceName}} {{addressInfo.cityName}}{{addressInfo.countyName}}</view>
</view>
<view>
  <view class="head">收货地址</view>
<view class="body">{{addressInfo.detailInfo}}</view>
</view>
<view>
  <view class="head">国家码</view>
<view class="body">{{addressInfo.nationalCode}}</view>
</view>
<view>
  <view class="head">手机号码</view>
<view class="body">{{addressInfo.telNumber}}</view>
</view>
</view>
<view class="add" bindtap="chooseAddress">
<image class="left" src="/images/6.png" mode="widthFix"></image>
<view class="text">获取收货地址</view>
<image class="right" src="/images/right.png" mode="widthFix"></image>
</view>

然后再pages/address/address.js文件，添加chooseAddress()函数，调用wx.chooseAddress收货地址API,获取数据，渲染页面，具体代码如下：

data: {
    addressInfo:null
  },
chooseAddress(){
  wx.chooseAddress({
    success:res=>{
      this.setData({
        addressInfo:res
      })
    },
    fail:err=>{
      console.log(err)
    }
  })
},

接着在pages/address/address.wxss文件中，编写样式代码，具体如下：

/* pages/address/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>.list{
  float: left;
}
.add>.right{
  width: 25rpx;
  float: right;
  margin-right: 60rpx;
  padding-top: 15rpx;
  color: #e0e0e0;
}
.add>.text{
  float: left;
  margin-top: 20rpx;
}

🎶 五、客服联系电话

在”个人中心“页面，点击”客服联系方式“一栏，绑定拨打电话事件，调用拨打电话API(wx.makePhoneCall)，页面底部上滑下呼叫或取消操作。具体操作如下：
在pages/person/person.wxml文件，为”客服联系方式“，一栏绑定contact()函数，具体代码如下：

<view bindtap="contact">
客服联系方式
<image class="arrow"src="/images/arrow.png"></image>
</view>

接着在pages/person/person.js文件，增加contact函数，具体代码如下：

 contact:function(e){
wx.makePhoneCall({
  phoneNumber: '17570463544',
})
  },

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

曼亿点

关注

89
点赞
踩
85

收藏

觉得还不错? 一键收藏
打赏
83
评论
【微信小程序开发（从零到一）】——个人中心页面的实战项目（终结）

👨‍💻。
复制链接

扫一扫

专栏目录