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

米饭，℡

已于 2023-06-21 09:33:46 修改

阅读量2.2k

点赞数 3

分类专栏：小程序页面案例文章标签：微信小程序小程序

于 2023-06-21 09:33:16 首次发布

本文链接：https://blog.csdn.net/weixin_42317757/article/details/131320922

版权

小程序同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

页面案例

24 篇文章 0 订阅

订阅专栏

代码示例：

<!-- 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>

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

// 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
    })
  }
})

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

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