正文

微信小程序实现登录界面

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0702

这篇文章主要为大家详细介绍了微信小程序实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

最基本的表单提交。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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可传入多个数据。

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//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: '前端验证通过'
 
    })

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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里三元运算特判一下。

?
1
2
3
4
5
6
7
8
9
<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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//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)
      })
    }
 
  },

微信小程序实现登录界面

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

原文链接：https://blog.csdn.net/weixin_45750972/article/details/115922021