Table of contents:
Code example:
<!-- 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
})
}
})
This mini program page contains information such as the user's avatar, nickname, gender, mobile phone number, and address. Users can edit their mobile phone number and address and save it to the local cache. Obtaining user information is achieved by calling the wx.getUserInfo() method built into the mini program. The mobile phone number and address are saved and read using the wx.setStorageSync() and wx.getStorageSync() methods provided by the mini program.
The above code is for reference only, and the specific implementation details and styles can be adjusted according to needs.
How to obtain source code:
Friends who need the complete source code, I hope you can like + favorite + comment, and then send me a private message~
Member learning group: [One-to-one Q&A]
If there is no reply to the private message, you can add a learning member assistant for consultation (WeChat: mifankeji77)