微信小程序开发之——个人中心-个人详情页(6)

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • 个人详情页对应的页面为：pages/detail/detail
  • 页面搭建
  • 页面逻辑

二 页面搭建

2.1 布局文件(detail.wml)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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)

1
2
3
4
{
  "usingComponents": {},
  "navigationBarTitleText": "个人资料详情页"s
}

三 页面逻辑(detail.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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),
    })
  }
})

四 源码

  • 源码
  • 物流查询服务器