微信小程序实现登录界面

Z时代
2024-01-10
分类：IT

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


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

微信小程序的交互：消息显示框。(官方链接)

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


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