【微信小程序学习】收集表单数据、event对象传参、前端验证和后端验证、本地存储、个人中心页面和登录页面交互

1、登录流程

1、收集表单项数据

2、前端验证

（1）验证用户信息（账号 密码）是否合法

（2）前端验证不通过就提示用户，不需要发请求给后端

（3）前端验证通过，发请求（携带账号密码）给服务器

3、后端验证

（1）验证用户是否存在

（2）用户不存在直接返回，告诉前端用户不存在

（3）用户存在需要验证密码是否正确

（4）密码不正确返回给前端提示密码不正确

（5）密码正确返回给前端数据，提示用户登录成功（会携带用户的相关信息）

2、本地存储

从后端得到的用户数据返回到个人登录界面，需要用到本地存储，先将从服务器端得到的数据返回到本地存储中，

wx.setStorageSync('userInfo', JSON.stringify(result.profile))

然后再从本地缓存中同步获取指定 key 的内容

let userInfo = wx.getStorageSync('userInfo')

 

登录页面的界面 

<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="请输入手机号码" data-type="phone" id="phone" bindinput="handleInput"/>
      </view>
      <view class="input-item">
        <text class="tit">密码</text>
        <input type="password"  placeholder="请输入密码" data-type="password" id="password" bindinput="handleInput"/>
      </view>