"个人中心"小程序：个人资料展示

来自CloudWiki
跳转至： 导航， 搜索

案例分析

个人中心案例设计了两个标签页

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

前导知识

wx.switchTab

用于跳转页面，且只能跳转到tabBar页面，并关闭其他所有非tabBar页面

wx.navigateTo和wx.redirectTo

wx.navigateTo ：用于跳转到应用内的某个页面，且保留当前页面。

注意，wx.navigateTo只能跳转到非标签页

另外，使用wx.navigateBack可以返回到原页面

wx.redirectTo用于跳转到应用内的某个页面，且关闭当前页面，不能返回到上一个页面，只能跳转到非标签页

wx,reLaunch

wx.reLanuch关闭所有页面，打开到应用内的某个页面。既能跳转到标签页，又能跳转到非标签页

wx.chooseImage

从本地相册选择图片或使用相机拍照

wx.chooseAddress

调起用户编辑收货地址原生页面，并在编辑完成后返回用户选择的地址

wx.makePhoneCall

用于拨打电话


实现底部标签页切换

app.json

 
{
  "pages": [
    "pages/order/order",
    "pages/index/index",
    "pages/person/person",
    "pages/detail/detail",
    "pages/modify/modify",
    
    "pages/address/address",
    "pages/test/test"
  ],
  "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"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

WXML文件

进入pages/index/index.wxml文件，为image绑定changeImage()函数： 

<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：243233****</view>
  <view>电话：152****1605</view>
</view>

CSS文件

相应的CSS文件： 

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

js文件

进入pages/index/index.js文件，增加changeImage()函数，实现跳转。 

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

效果图

Wexin2108240701.png

点击页面中图片后会跳转到个人中心页面。

编辑个人资料

进入详情页面

进入pages/person/person.wxml文件，给个人资料绑定info()函数，实现页面跳转。 

<!--pages/person/person.wxml-->
<view class="avatar">
  <image src="/images/avatar.jpg" mode="aspectFill"></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>

CSS: 

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

进入

取自“http://www.openbrains.net/mediawiki/index.php?title=%22个人中心%22小程序：个人资料展示&oldid=28194”