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

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

---

微信小程序的交互：消息显示框。

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

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

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