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

获取用户输入
跳转至用户中心

获取用户输入

<!--登录页面-->
<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，观察页面数据值的变化正确，我们的事件处理成功了。

跳转至用户中心

为了实现点击登录，跳转至用户中心，我们需要将username和password传递给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"})
}

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

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

微信小程序案例之用户登录相关推荐

微信小程序开发之——用户登录-登录流程(1)
一概述新建微信小程序自带用户登录简化小程序登录流程时序二新建微信小程序自带用户登录简化新建的微信小程序默认有用户登录功能,将多余功能去除后,简化如下 2.1 index.wxml < ...
微信小程序+SpringBoot实现用户登录
微信小程序+SpringBoot实现用户登录前言微信小程序越来越吃香了(前话就这么多,嘿嘿) 前端那就开始吧,登录界面就如此了 wxml内容如下,这是格式化后粘贴过来的,emmm,怪像那回事. ...
【微信小程序】通过用户登录实现批量收集formId
参考网上多篇文章,本文目的旨在做个记录. [微信小程序]通过用户登录实现批量收集formid,无限次发送模板消息提交1次表单可下发1条模板消息,多次提交下发条数独立,相互不影响. 所以,想无限次发送 ...
Laravel 微信小程序后端实现用户登录的示例代码
Laravel 微信小程序后端实现用户登录的示例代码这篇文章主要介绍了Laravel 微信小程序后端实现用户登录的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值 ...
微信小程序踩坑—用户登录界面
最近做的一个项目有涉及到用户登录.微信小程序的用户登录在我看来有两种,一种是需要用微信提供的用户身份标识,简单地说就是小程序的登录者就是使用这个小程序的微信用户,还有一种是小程序和服务器之间有自己的一 ...
用 Django 开发微信小程序后端实现用户登录
本文将介绍采用 Django 开发微信小程序后端,通过将用户模块进行重构,并采用JWT来进行用户认证,来解决以下问题: 微信小程序不支持 Cookie,因此不能采用 Django 默认的 Sessio ...
java开发微信如何维护登录状态_微信小程序中做用户登录与登录态维护的实现详解...
总结大家都知道,在开发中提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户 ...
【微信小程序+node】微信小程序结合node用户登录-06
申请一个微信小程序账号,并获取appId,appSecret 1.使用新的qq注册一个新的小程序 2.获取appId,appSecret.特别注意appSecret需要自己保存,每次获取都要验证,特别 ...
微信小程序开发之——用户登录-搭建开发者服务器(2)
一概述用Node.js搭建开发者服务器开发服务器作为登录中的三个角色(小程序/开发者服务器/微信接口)中的重要一环开发者服务器接收code,保存openid和session_key,并返回to ...

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

获取用户输入

跳转至用户中心

微信小程序案例之用户登录相关推荐

最新文章

热门文章