微信小程序实现一个简单的登录功能
功能介绍
login.wxml
<view class="container">
<input bindinput="inputUsername" placeholder="请输入用户名" />
<input bindinput="inputPassword" placeholder="请输入密码" type="password" />
<button bindtap="login">登录</button>
<text class="error">{{errorMessage}}</text>
</view>
login.js
Page({
data: {
username: '',
password: '',
errorMessage: ''
},
inputUsername: function(e) {
this.setData({
username: e.detail.value
})
},
inputPassword: function(e) {
this.setData({
password: e.detail.value
})
},
login: function() {
// 假设验证逻辑为:用户名和密码都为"admin"时才验证通过
if (this.data.username === 'admin' && this.data.password === 'admin') {
wx.navigateTo({
url: '/pages/userInfo/userInfo?username=' + this.data.username
})
} else {
this.setData({
errorMessage: '用户名或密码错误'
})
}
}
})
userInfo.wxml
<view class="container">
<text>用户名:{{username}}</text>
<image class="avatar" src="{{avatarUrl}}"></image>
</view>
userInfo.js
Page({
onLoad: function(options) {
this.setData({
username: options.username,
avatarUrl: 'https://example.com/avatar.png' // 假设这是用户头像的URL
})
}
})
解析
到这里也就结束了,希望对您有所帮助。