微信小程序的登录界面实现

<view class="container"><view class="wrapper"><view class="left-top-sign">LOGIN</view><view class="welcome">欢迎回来！</view><view class="input-content"><view class="input-item"><text class="tit">手机号码</text><input type="text" placeholder="请输入手机号码" id='phone' data-type='phone' bindinput='handerInput' /></view><view class="input-item"><text class="tit">密码</text><input type="password" placeholder="请输入密码" id='password' data-type='password' bindinput='handerInput' /></view></view><button class="confirm-btn">登录</button><view class="forget-section">忘记密码?</view></view><view class="register-section">还没有账号?<text>马上注册</text></view>
</view>

最基本的表单提交。

data: {phone: '', //手机号password: ''  //密码},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},handerInput(event) {//let type = event.currentTarget.dataset.type;let type = event.currentTarget.id;console.log(event);this.setData({[type]: event.detail.value})},/**

双向绑定的实现，利用bindinput 事件，可用id或者dataset 唯一确定数据。

id可传入一个数据，dataset可传入多个数据。

微信小程序的交互：消息显示框。

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

对于登录按钮绑定一个点击回调函数。

//html
<button class="confirm-btn" bindtap="login">登录</button>//js
login() {let { phone, password } = this.data;console.log(password);/*** 手机号验证* 手机号为空* 手机号式错误* 手机号正确*/if (!phone) {wx.showToast({title: '手机号不能为空',icon: 'none'})return;}//定义手机号的正则表达式let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/if (!phoneReg.test(phone)) {wx.showToast({title: '手机号格式错误',icon: 'none'})return;}if (!password) {wx.showToast({title: '密码不能为空',icon: 'none'})return;}wx.showToast({title: '前端验证通过'})

后端验证，调用接口，通过响应的状态码来返回给用户登录的信息。

  let result = await request('/login/cellphone', { phone, password });if (result.code === 200) {wx.showToast({title: '登陆成功',})}else if (result.code === 400) {wx.showToast({title: '手机号错误',icon: 'none'})}else if (result.code === 502) {wx.showToast({title: '密码错误',icon: 'none'})}else {wx.showToast({title: '登录失败,请重新登录',icon: 'none'})}},

个人中心点击头像，跳转登录界面，登录成功后将用户个人信息数据缓存（使用setStorageSync，和getStorageSync 方法），然后使用switchTab 跳转到tabbar下的个人中心页，然后将获得的缓存数据储存到js的data中，注意json格式的转化，最后在html里三元运算特判一下。

 <view class="user-info-box" bindtap='toLogin'><view class="portrait-box"><image class="portrait"src='{{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/personal/missing-face.png"}}'></image></view><view class="info-box"><text class="username">{{userInfo.nickname?userInfo.nickname: '游客'}}</text></view></view>

//login.js
if (result.code === 200) {wx.showToast({title: '登陆成功',})wx.setStorageSync('userInfo', JSON.stringify(result.profile));wx.switchTab({url: '/pages/personal/personal'})}
// personal.js
onLoad: function (options) {let userInfo = wx.getStorageSync('userInfo');if (userInfo) {this.setData({userInfo: JSON.parse(userInfo)})}},

微信小程序的登录界面实现相关推荐

微信小程序授权登录界面
微信小程序授权登录界面原先用的 wx.getUserInfo(Object object) ,现已改革现用的 wx.getUserProfile(Object object),获取用户信息.每次请 ...
＜微信小程序＞登录界面实现密码输入错误3次，30分钟不允许该账号登录
当时面临如此需求,实在无从下手,后自己想了一个灵活的方法进行面对,特此记录,希望以后不会看不懂自己的代码登陆界面设置这个百度一下就可以,与数据库交互的登录界面很是简单,由于本项目要求不可注册,故只 ...
微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
微信小程序+Django—登录界面交互
最近有一个项目是做微信小程序的开发,由于也是刚刚学习了django,所以准备用django来做微信小程序的后台. 由于没有系统的学习过小程序的开发,有些坑要自己慢慢地爬,特此将自己爬过的坑记录下 ...
微信小程序用户登录界面，用户名无法切换输入法问题解决方法
[问题描述] iOS下,用户登录界面,两个相邻的input,第一个输入用户名,第二个输入密码(password),若用户手机中只有英文输入法和搜狗输入法的话,点击第一个用户名输入框,会发现出来的键盘是 ...
Springboot实现微信小程序注册登录及微信登录
运行环境 jdk1.8+eclipse+tomact 8.5+maven3.5+springboot 2.0.1 微信开发者工具数据库一张表三个字段 CREATE TABLE `user` (`u ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...
微信小程序保持登录状态（使用缓存）
一般来说,一个app在第一次进入时需要进行注册和登录的操作,之后再打开无需再登录即可直接进入app,即保持登录状态.此处使用微信小程序的数据缓存来做到登陆状态的保持. 1 相关API 首先需要了解几个 ...
微信小程序授权登录全过程解析（附代码）
今天小编对于微信小程序的登录功能比较感兴趣,也是由于工作需要,就大概研究了一下. 这里先附一张小程序的登陆整体流程图. 整体流程: 微信端点击登录按钮后会去调用 wx.login接口,如果接口调用成功 ...

微信小程序的登录界面实现

微信小程序的登录界面实现

微信小程序的登录界面实现相关推荐

最新文章

热门文章