【页面案例汇总】微信小程序个人信息管理页面_微信小程序填写个人信息页面

代码示例：

<!-- pages/person/person.wxml -->
<view class="container">
  <view class="header">个人信息</view>
  <view class="info">
    <view class="avatar">
      <image src="{{userInfo.avatarUrl}}"></image>
    </view>
    <view class="name">{{userInfo.nickName}}</view>
    <view class="gender">{{userInfo.gender == 1 ? '男' : '女'}}</view>
    <input class="input" placeholder="请输入手机号" bindinput="bindPhoneInput" value="{{phone}}"/>
    <input class="input" placeholder="请输入地址" bindinput="bindAddressInput" value="{{address}}"/>
  </view>
  <button class="save-btn" bindtap="saveUserInfo">保存</button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* pages/person/person.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fff;
}

.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.name {
  font-size: 20px;
  margin-bottom: 10px;
}

.gender {
  font-size: 18px;
  margin-bottom: 20px;
}

.input {
  width: 80%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.save-btn {
  width: 80%;
  height: 40px;
  background-color: #00aaff;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
}
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

// pages/person/person.js
Page({
  data: {
    userInfo: {}, // 存储用户信息
    phone: '', // 存储用户手机号
    address: '', // 存储用户地址
  },
  onLoad() {
    // 获取用户信息
    wx.getUserInfo({
      success: res => {
        this.setData({
          userInfo: res.userInfo
        })
      }
    })
  },
  bindPhoneInput(e) {
    // 监听手机号输入
    this.setData({
      phone: e.detail.value
    })
  },
  bindAddressInput(e) {
    // 监听地址输入
    this.setData({
      address: e.detail.value
    })
  },
  saveUserInfo() {
    // 保存用户信息
    wx.setStorageSync('phone', this.data.phone)
    wx.setStorageSync('address', this.data.address)
    wx.showToast({
      title: '保存成功',
      icon: 'success'
    })
  },
  onShow() {
    // 页面显示时获取用户之前存储的手机号和地址
    const phone = wx.getStorageSync('phone')
    const address = wx.getStorageSync('address')
    this.setData({
      phone,
      address
    })
  }
})
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

这个小程序页面包含了用户头像、昵称、性别、手机号和地址等信息，用户可以自行编辑手机号和地址，并保存到本地缓存中。用户信息的获取通过调用小程序内置的 wx.getUserInfo() 方法实现，手机号和地址的保存和读取使用了小程序提供的 wx.setStorageSync() 和 wx.getStorageSync() 方法。

以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。

---

源码获取方法：

需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~

会员学习群：【一对一答疑】

如果私信未回复，可添加学习会员小助手咨询（微信：mifankeji77）