代码示例：
<!-- 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() 方法。
以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。
源码获取方法：
需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~
会员学习群：【一对一答疑】
如果私信未回复，可添加学习会员小助手咨询（微信：mifankeji77）