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

微信小程序的登录界面实现，供大家参考，具体内容如下

LOGIN欢迎回来！手机号码密码忘记密码?还没有账号?马上注册

最基本的表单提交。

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可传入多个数据。
微信小程序的交互：消息显示框。(官方链接)
对于登录按钮绑定一个点击回调函数。

//html//jslogin() {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里三元运算特判一下。

{{userInfo.nickname?userInfo.nickname: '游客'}}

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