微信小程序实现登录界面

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

  
    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
登录

//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里三元运算特判一下。

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

//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)
      })
    }

  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。