admin管理员组

文章数量:821306

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

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

<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可传入多个数据。


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

.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)})}},

本文标签: 微信小程序的登录界面实现