使用微信开发小程序设计一个小程序用户登录界面,在界面上输入用户名、密码,还布局有登录按钮和选择保存密码,当选择了保存密码,点击登录后就可以保存用户名和密码,下次运行时用户名与密码就会自动填入。当保存密码成功时,在调试器Console面板输出保存成功提示信息。
时间: 2023-11-19 20:05:57 浏览: 176
微信小程序登录界面设计(可以登录)
好的,这里给出一个简单的用户登录界面的小程序代码示例:
1. 在微信开发者工具中创建一个新的小程序项目,选择“空白项目”,并填写相关信息;
2. 在项目根目录下创建两个页面文件:login/index.wxml 和 index/index.wxml,其中 login 页面是用户登录界面,index 页面是用户登录后的主页面;
3. 在 login/index.wxml 中添加如下代码:
```html
<view class="container">
<form bindsubmit="submitForm">
<view class="form-item">
<text>用户名:</text>
<input name="username" placeholder="请输入用户名" value="{{username}}" />
</view>
<view class="form-item">
<text>密码:</text>
<input name="password" type="password" placeholder="请输入密码" value="{{password}}" />
</view>
<view class="form-item">
<text>保存密码:</text>
<switch checked="{{savePassword}}" bindchange="switchChange" />
</view>
<button form-type="submit">登录</button>
</form>
</view>
```
4. 在 login/index.js 中添加如下代码:
```javascript
Page({
data: {
username: '',
password: '',
savePassword: false,
},
onLoad() {
const savedUsername = wx.getStorageSync('username');
const savedPassword = wx.getStorageSync('password');
if (savedUsername && savedPassword) {
this.setData({
username: savedUsername,
password: savedPassword,
savePassword: true,
});
}
},
submitForm(e) {
const { username, password, savePassword } = e.detail.value;
if (savePassword) {
wx.setStorageSync('username', username);
wx.setStorageSync('password', password);
console.log('保存成功');
}
wx.redirectTo({ url: '/pages/index/index' });
},
switchChange(e) {
this.setData({ savePassword: e.detail.value });
},
});
```
5. 在 app.json 中添加如下配置:
```json
{
"pages": ["pages/login/index", "pages/index/index"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小程序登录",
"navigationBarTextStyle": "black"
}
}
```
6. 在 index/index.wxml 中添加如下代码:
```html
<view class="container">
<text>欢迎您,{{username}}!</text>
</view>
```
7. 在 index/index.js 中添加如下代码:
```javascript
Page({
data: {
username: '',
},
onLoad() {
const savedUsername = wx.getStorageSync('username');
if (savedUsername) {
this.setData({ username: savedUsername });
}
},
});
```
通过以上步骤,我们就可以在微信小程序中创建一个用户登录界面,并实现了保存密码的功能。在用户输入用户名和密码后,如果选择了保存密码,下一次打开小程序时,用户名和密码会自动填入,无需再次输入。在保存密码成功时,还会在调试器 Console 面板输出保存成功的提示信息。
阅读全文