微信小程序> 微信小程序案例之用户登录

微信小程序案例之用户登录

浏览量:2910 时间: 来源:beashaper_
  • 获取用户输入
  • 跳转至用户中心

获取用户输入

<!--登录页面--><view class="item">      <view class="login-item">           <view class="login-item-info">用户名</view>           <view><input /></view>      </view>      <view class="login-item">           <view class="login-item-info">密码</view>           <view class="login-pwd">           <input style="flex-grow:1" password="true" />            <text> 忘记密码 </text>           </view>      </view>      <view class="login-item bottom">           <button class="login-btn">登录</button>      </view></view>
.item{    flex-grow:1;    height: 30%;    overflow: hidden;    display: flex;    justify-content: center;    align-items: center;    flex-direction: column;    width: 96%;    padding: 0 2%;}.login-item{    width: 90%;    margin-top: 30rpx;    border-bottom: 1px solid #eee;    flex-grow:1;    display: flex;    flex-direction: column;    justify-content: flex-end;    padding-bottom: 20rpx;} .bottom{     border-bottom: 0px;}.login-item-info{    font-size: 8px;    color: #888;     padding-bottom: 20rpx;}.login-pwd{    display: flex;    justify-content: space-between;    flex-grow: 1;    align-items: center;}.login-pwd text{    height: 100%;    font-size: 14px;    color: #888;    display: flex;}.login-btn{    width: 80%;    color: white;    background-color: green;    border-radius: 0;    font-size: 14px;}.login-btn:hover{    width: 80%;    color: white;    border-radius: 0;}

一个简单的布局就写好了:

下面来实现登录的部分,首先给登录页面声明两个变量,用户名和密码。

data: {    username : null,    password : null,},

然后给输入框和按钮绑定事件。

<view><input bindinput="usernameInput" /></view><input style="flex-grow:1" password="true"  bindinput="passwordInput"/> <button class="login-btn" bindtap="loginBtnClick">登录</button>

我们先尝试将该数据打印出来看一下里面的内容。

usernameInput: function (event) {    console.log(event)},

每输入一个字符,都会触发usernameInput事件,当输入用户名完毕时,查看最后一个object,可以看到我们的输入被保存在了event.detail.value中。
小程序
所以两个绑定输入的函数方法编写如下:

usernameInput: function (event) {    this.setData({ username : event.detail.value})},passwordInput: function (event) {    this.setData({ password : event.detail.value })},

打开调试器的AppData,观察页面数据值的变化正确,我们的事件处理成功了。
小程序

跳转至用户中心

为了实现点击登录,跳转至用户中心,我们需要将usernamepassword传递给App,使得其作为全局变量保存下来。

appData : {    userinfo : null,     // 在app.js中声明变量userinfo,保存用户信息},
const app = getApp()      // 在index.js的Page函数外获取应用实例loginBtnClick: function () {    app.appData.userinfo = { username: this.data.username, password: this.data.password }    wx.redirectTo({url:"../logs/logs"})}

这样就成功实现了跳转,并且可以设置在用户中心页面显示出用户名。

当然,在实际的项目内,当点击登录按钮后,需要将用户输入的用户名和密码传递给服务器,只有在数据库中找到了用户名且密码匹配才可以成功登录。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎