功能介绍
微信小程序实现一个简单的登录功能。包括一个登录页面和一个用户信息展示页面。在登录页面中输入用户名和密码，点击登录按钮进行验证，如果验证成功，则跳转到用户信息展示页面，并展示用户的信息（例如用户名和头像）。如果验证失败，则提示登录失败信息。
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 }) } })
解析
在上述代码中，我们首先在登录页面login中定义了username、password和errorMessage变量。
然后通过两个input标签绑定inputUsername和inputPassword函数，实现输入框内容的双向绑定。
然后 点击"登录"按钮时，调用login函数进行验证。这里我们假设验证逻辑为用户名和密码都为"admin"时才验证通过。如果验证成功，则使用wx.navigateTo方法跳转到userInfo页面，并将用户名作为参数传递给userInfo页面。如果验证失败，则在data中更新errorMessage变量，提示用户名或密码错误。
在userInfo页面的onLoad函数中，我们获取到options中的username值，并通过setData方法将其赋值给username变量。我们还假设用户的头像是一个URL，通过avatarUrl变量将其展示在页面上。
总结：通过以上代码，我们实现了一个简单的微信小程序登录功能，演示了页面跳转和数据传递的过程。在实际开发中，可以根据需求进行更复杂的验证逻辑和用户信息展示。同时，需要注意安全性，例如对密码进行加密处理、使用HTTPS协议等。
到这里也就结束了，希望对您有所帮助。
