微信小程序之个人界面编写（2023.5.9版）_微信小程序个人主页代码

引言

考虑到近期开发者对小程序登录、用户信息相关接口调整的相关反馈，为优化开发者调整接口的体验，回收wx.getUserInfo接口可获取用户授权的个人信息能力的截止时间由2021年4月13日调整至2021年4月28日24时。
官方通知文档

编写目的

我们在开发微信小程序的时候，基本上都会有一个个人中心的界面，简称我的界面，里面有保存每个用户的个人信息，个人设置，个人的数据记录。所以本文主要针对这个页面做了一个记录以防忘记（原来的老方法不能用了，呜呜呜，要记录一下下）

效果图展示

此图为模拟器上的，真机上时点击圆形按钮button“头像”和label“请输入昵称”即可进行相应的昵称编辑

主要是记录最新的获取用户头像和昵称的方法

编程实现

sth.wxml

<view class='container'>

<!--头像名称-->
<view class="partOne">
  
  <view style="display: flex; flex-direction: row;">
  <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
    <image class="avatar" src="{{avatarUrl}}"></image>
  </button> 
<view style="display: flex; flex-direction: column;justify-content: center;"> 
<input type="nickname"  placeholder="请输入昵称" />
</view>
</view>
  <view class="scanicon">
    <image src="../../icon/news/sao.png" />
  </view>
</view>

<!--我的分值、扫一扫-->
<view class="partTwo">
  <!--我的分值-->
  <view class="item">
    <view class="itemname">
      <view ><image src="../../icon/icon/person_message.png" /></view>
      <view ><text >个人信息</text></view>
    </view>
    <view class="right"><image src="../../icon/icon/right_arrow.png" /></view>
  </view>
  <!--扫一扫-->
  <view class="item">
    <view class="itemname">
      <view ><image src="../../icon/icon/account_safe.png" /></view>
      <view ><text >账号安全</text></view>
    </view>
    <view class="right"><image src="../../icon/icon/right_arrow.png" /></view>
</view>
</view>

<!--关于我们、使用帮助、绑定个人信息-->
<view class="partThree">
  <!--关于我们-->
  <view class="item">
    <view class="itemname">
      <view ><image src="../../icon/icon/about.png" /></view>
      <view ><text >关于我们</text></view>
    </view>
    <view class="right"><image src="../../icon/icon/right_arrow.png" /></view>
  </view>
  <!--使用帮助-->
  <view class="item">
    <view class="itemname">
      <view ><image src="../../icon/icon/help.png" /></view>
      <view ><text >使用帮助</text></view>
    </view>
    <view class="right"><image src="../../icon/icon/right_arrow.png" /></view>
  </view>
  <!--绑定个人信息-->
  <view class="item">
    <view class="itemname">
      <view ><image src="../../icon/icon/exit.png" /></view>
      <view ><text >退出登录</text></view>
    </view>
    <view class="right"><image src="../../icon/icon/right_arrow.png" /></view>
  </view>
</view>
</view>



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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

sth.wxss

/* pages/try/try.wxss */
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 50%;
  margin:  20px 20px !important;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;  
}

.container{
  background-color: #eeeeee;
  height : 100vh;
}
.partOne {
  display: flex;
  justify-content: space-between;
  background-color: #7bf38b;
  padding-top: 130rpx;
  padding-bottom: 130rpx;
}
.userinfo {
  display: flex;
  align-items: center;
  height: 128rpx;
  margin-left: 40rpx;
  color: rgb(255, 255, 255);
}


.partOne .scanicon{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 128rpx;
  margin-right: 80rpx;
}
.partOne .scanicon image{
  width: 80rpx;
  height: 80rpx;
}

.partTwo{
  height: 200rpx;
  width: 90%;
  margin-left: 5%;
  margin-top: -50rpx;
  background-color: #ffffff;
  border: 1rpx solid rgb(176, 176, 176);
  border-radius: 25rpx;
}
.partTwo .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
}
.partTwo .item .itemname{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 210rpx;
  margin-left: 20rpx;
}
.partTwo .item .itemname image{
  width: 60rpx;
  height: 60rpx;
}
.partTwo .right{
  margin-right: 20rpx;
}
.partTwo .right image{
  width: 50rpx;
  height: 50rpx;
}

.partTwo .scan{
  display: flex;
  align-items: center;
  height: 100rpx;
}
.partTwo .scan .itemname{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 180rpx;
  margin-left: 20rpx;
}
.partTwo .scan image{
  width: 60rpx;
  height: 60rpx;
}

.partThree{
  height: 300rpx;
  width: 90%;
  margin-left: 5%;
  margin-top: 10rpx;
  background-color: #ffffff;
  border: 1rpx solid rgb(176, 176, 176);
  border-radius: 25rpx;
}

.partThree .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
}
.partThree .item .itemname{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 210rpx;
  margin-left: 20rpx;
}
.partThree .item .itemname image{
  width: 60rpx;
  height: 60rpx;
}
.partThree .right{
  margin-right: 20rpx;
}
.partThree .right image{
  width: 50rpx;
  height: 50rpx;
}
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

sth.js

// pages/my/my.js
const app = getApp()

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    avatarUrl: defaultAvatarUrl,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
   onLoad() {
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

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

• 注1：没有用到json文件
• 注2：所用到的小图标都是阿里巴巴矢量库找的
• 矢量库

目录结构

方便看图片引用路径

所以是
<view ><image src="../../icon/icon/person_message.png" /></view>