• 售前

  • 售后

热门帖子
入门百科

微信小步伐实现登录界面

[复制链接]
123457665 显示全部楼层 发表于 2021-10-26 14:09:20 |阅读模式 打印 上一主题 下一主题
微信小步调的登录界面实现,供各人参考,具体内容如下
  1. <view class="container">
  2.   <view class="wrapper">
  3.     <view class="left-top-sign">LOGIN</view>
  4.     <view class="welcome">
  5.       欢迎回来!
  6.     </view>
  7.     <view class="input-content">
  8.       <view class="input-item">
  9.         <text class="tit">手机号码</text>
  10.         <input type="text" placeholder="请输入手机号码" id='phone' data-type='phone' bindinput='handerInput' />
  11.       </view>
  12.       <view class="input-item">
  13.         <text class="tit">密码</text>
  14.         <input type="password" placeholder="请输入密码" id='password' data-type='password' bindinput='handerInput' />
  15.       </view>
  16.     </view>
  17.     <button class="confirm-btn">登录</button>
  18.     <view class="forget-section">
  19.       忘记密码?
  20.     </view>
  21.   </view>
  22.   <view class="register-section">
  23.     还没有账号?
  24.     <text>马上注册</text>
  25.   </view>
  26. </view>
复制代码
最根本的表单提交。
  1. data: {
  2.     phone: '', //手机号
  3.     password: ''  //密码
  4.   },
  5.   /**
  6.    * 生命周期函数--监听页面加载
  7.    */
  8.   onLoad: function (options) {
  9.   },
  10.   handerInput(event) {
  11.     //let type = event.currentTarget.dataset.type;
  12.     let type = event.currentTarget.id;
  13.     console.log(event);
  14.     this.setData({
  15.       [type]: event.detail.value
  16.    })
  17.   },
  18.   /**
复制代码
双向绑定的实现,利用bindinput 事故,可用id大概dataset 唯一确定数据。
id可传入一个数据,dataset可传入多个数据。
微信小步调的交互:消息显示框。(官方链接)
对于登录按钮绑定一个点击回调函数。
  1. //html
  2. <button class="confirm-btn" bindtap="login">登录</button>
  3. //js
  4. login() {
  5.     let { phone, password } = this.data;
  6.     console.log(password);
  7.     /**
  8.      * 手机号验证
  9.      * 手机号为空
  10.      * 手机号式错误
  11.      * 手机号正确
  12.      */
  13.     if (!phone) {
  14.       wx.showToast({
  15.         title: '手机号不能为空',
  16.         icon: 'none'
  17.       })
  18.       return;
  19.     }
  20.     //定义手机号的正则表达式
  21.     let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/
  22.     if (!phoneReg.test(phone)) {
  23.       wx.showToast({
  24.         title: '手机号格式错误',
  25.         icon: 'none'
  26.       })
  27.       return;
  28.     }
  29.     if (!password) {
  30.       wx.showToast({
  31.         title: '密码不能为空',
  32.         icon: 'none'
  33.       })
  34.       return;
  35.     }
  36.     wx.showToast({
  37.       title: '前端验证通过'
  38.     })
复制代码
后端验证,调用接口,通过相应的状态码来返回给用户登录的信息。
  1. let result = await request('/login/cellphone', { phone, password });
  2.     if (result.code === 200) {
  3.       wx.showToast({
  4.         title: '登陆成功',
  5.       })
  6.     }
  7.     else if (result.code === 400) {
  8.       wx.showToast({
  9.         title: '手机号错误',
  10.         icon: 'none'
  11.       })
  12.     }
  13.     else if (result.code === 502) {
  14.       wx.showToast({
  15.         title: '密码错误',
  16.         icon: 'none'
  17.       })
  18.     }
  19.     else {
  20.       wx.showToast({
  21.         title: '登录失败,请重新登录',
  22.         icon: 'none'
  23.       })
  24.     }
  25. },
复制代码
个人中央点击头像,跳转登录界面,登录乐成后将用户个人信息数据缓存(利用setStorageSync,和getStorageSync 方法),然后利用switchTab 跳转到tabbar下的个人中央页,然后将获得的缓存数据储存到js的data中,注意json格式的转化,末了在
html里三元运算特判一下。
  1. <view class="user-info-box" bindtap='toLogin'>
  2.       <view class="portrait-box">
  3.         <image class="portrait"
  4.           src='{{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/personal/missing-face.png"}}'></image>
  5.       </view>
  6.       <view class="info-box">
  7.         <text class="username">{{userInfo.nickname?userInfo.nickname: '游客'}}</text>
  8.       </view>
  9. </view>
复制代码
  1. //login.js
  2. if (result.code === 200) {
  3.       wx.showToast({
  4.         title: '登陆成功',
  5.       })
  6.       wx.setStorageSync('userInfo', JSON.stringify(result.profile));
  7.       wx.switchTab({
  8.         url: '/pages/personal/personal'
  9.       })
  10.     }
  11. // personal.js
  12. onLoad: function (options) {
  13.     let userInfo = wx.getStorageSync('userInfo');
  14.     if (userInfo) {
  15.       this.setData({
  16.         userInfo: JSON.parse(userInfo)
  17.       })
  18.     }
  19.   },
复制代码

以上就是本文的全部内容,希望对各人的学习有所资助,也希望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作