微信小程序 - 实现简单登录和个人信息页面
一、创建登录页面首先，我们需要在 `pages` 目录下新建一个 `login` 目录，然后右键点击 `login` 文件夹，选择新建 `page`，创建 `login` 的 page。
login.wxml
```wxml
```
login.js
```javascript// login.jsPage({
data: {
username: '',
password: ''
},
handleInputUsername(e) {
this.setData({ username: e.detail.value });
},
handleInputPassword(e) {
this.setData({ password: e.detail.value });
},
login() {
// TODO: 实现登录逻辑 wx.showToast({
title: '登录成功',
icon: 'success'
});
}
});
```
二、实现登录逻辑在 `login` page 中，我们需要实现登录逻辑。我们可以使用微信小程序的 `wx.request` API 来发送请求到后端服务器，进行登录验证。
login.js
```javascript// login.jsPage({
data: {
username: '',
password: ''
},
handleInputUsername(e) {
this.setData({ username: e.detail.value });
},
handleInputPassword(e) {
this.setData({ password: e.detail.value });
},
async login() {
const { username, password } = this.data;
try {
const response = await wx.request({
url: ' method: 'POST',
data: { username, password }
});
if (response.statusCode ===200) {
// 登录成功，跳转到个人信息页面 wx.redirectTo({ url: '/pages/personal-info' });
} else {
wx.showToast({
title: '登录失败',
icon: 'error'
});
}
} catch (error) {
console.error(error);
wx.showToast({
title: '登录失败',
icon: 'error'
});
}
}
});
```
三、创建个人信息页面在 `pages` 目录下新建一个 `personal-info` 目录，然后右键点击 `personal-info` 文件夹，选择新建 `page`，创建 `personal-info` 的 page。
personal-info.wxml
```wxml
```
personal-info.js
```javascript// personal-info.jsPage({
data: {
name: ''
},
handleInputName(e) {
this.setData({ name: e.detail.value });
},
async saveInfo() {
const { name } = this.data;
try {
const response = await wx.request({
url: ' method: 'POST',
data: { name }
});
if (response.statusCode ===200) {
//保存成功，跳转到登录页面 wx.redirectTo({ url: '/pages/login' });
} else {
wx.showToast({
title: '保存失败',
icon: 'error'
});
}
} catch (error) {
console.error(error);
wx.showToast({
title: '保存失败',
icon: 'error'
});
}
}
});
```
四、测试测试登录页面和个人信息页面的功能。
测试步骤
1. 打开微信小程序，进入登录页面。
2. 输入用户名和密码，然后点击登录按钮。
3. 登录成功后，跳转到个人信息页面。
4. 在个人信息页面中，输入姓名，然后点击保存信息按钮。
5.保存成功后，跳转回登录页面。
测试结果
测试结果显示，登录页面和个人信息页面的功能正常工作。用户可以成功登录并保存个人信息。
