轻源码

  • QingYuanMa.com
  • 全球最大的互联网技术和资源下载平台
搜索
轻源码 门户 终极进阶 查看主题

han_cui入门实战《四》用户登录

发布者: 龙神 | 发布时间: 2018-7-12 11:01| 查看数: 5002| 评论数: 0|帖子模式

作者:han_cui,来自授权地址 
在商城中,访问个人中心或者购物车前先判断是否登录,从缓存中读取用户名,密码等,若无登录,或者清楚缓存,则需登录。 
下面以本人做的登录为例,login.js页面

  1. // pages/login/login.js
  2. Page({
  3. onLoad:function(options){
  4. // 页面初始化 options为页面跳转所带来的参数
  5. var token = wx.getStorageSync('token')
  6. var name = wx.getStorageSync('name')
  7. var pwd = wx.getStorageSync('pwd')
  8. if(token ==''){
  9. wx.navigateTo({
  10. url: '/pages/index/index'
  11. })
  12. }
  13. if(name!=''){
  14. if(pwd!=''){
  15. wx.redirectTo({
  16. url: '../my/my?name='+name+'&pwd='+pwd+''
  17. })
  18. }
  19. }
  20. },
  21. //用户名和密码输入框事件
  22. usernameInput:function(e){
  23. // console.log(e)
  24. this.setData({
  25. userN:e.detail.value
  26. })
  27. },
  28. passwordInput:function(e){
  29. this.setData({
  30. passW:e.detail.value
  31. })
  32. },
  33. //登录按钮点击事件,调用参数要用:this.data.参数;
  34. //设置参数值,要使用this.setData({})方法
  35. loginBtnClick:function(a){
  36. // console.log(a)
  37. var that=this
  38. if(this.data.userN.length == 0 || this.data.passW.length == 0){
  39. this.setData({
  40. infoMess:'温馨提示:用户名或密码不能为空!',
  41. })
  42. }else{
  43. wx.request({
  44. url: ',
  45. data: {
  46. username: this.data.userN,
  47. password: this.data.passW,
  48. unique_id:'123456'
  49. },
  50. header: {
  51. 'content-type': 'application/json'
  52. },
  53. success: function(res) {
  54. // console.log(res.data.result)
  55. if(res.data.status == -1){
  56. userName:'缺少参数'
  57. }else{
  58. //存用户session
  59. // wx.setStorageSync('token', res.data.result.token)
  60. // wx.setStorageSync('user_id', res.data.result.user_id)
  61. // wx.setStorageSync('name', that.data.userN)
  62. // wx.setStorageSync('pwd', that.data.passW)
  63. wx.setStorage({
  64. key:'name',
  65. data:res.data.result.mobile,
  66. })
  67. wx.setStorage({
  68. key:'token',
  69. data:res.data.result.token,
  70. })
  71. wx.setStorage({
  72. key:'pwd',
  73. data:that.data.passW,
  74. })
  75. // wx.switchTab({
  76. wx.redirectTo({
  77. url: '../my/my?name='+res.data.result.mobile+'&pwd='+that.data.passW+''
  78. })
  79. }
  80. }
  81. })
  82. }
  83. }
  84. })

login.wxml页面

  1. <view class="login">
  2. <view class="section">
  3. <view class="section__title">用户名:</view>
  4. <input name="username" placeholder="请输入邮箱/手机号" bindinput="usernameInput" />
  5. </view>
  6. <view class="section">
  7. <view class="section__title">密码:</view>
  8. <input password type="text" name="password" placeholder="密码" bindinput="passwordInput" />
  9. </view>
  10. <view id='button'>
  11. <button formType="submit" bindtap="loginBtnClick">登录</button>
  12. </view>
  13. <view id="tishi">
  14. {{infoMess}}
  15. </view>
  16. <view id="xia">
  17. <checkbox-group name="checkbox">
  18. <label><checkbox value="checkbox1" checked="checked"/>自动登录</label>
  19. </checkbox-group>
  20. <view style="float:left;">
  21. <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">免费注册</navigator>
  22. <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">忘记密码?</navigator>
  23. </view>
  24. </view>
  25. <view id='di'>第三方登录</view>
  26. <view id='san'>
  27. <image src="../../utils/images/QQ.png" />
  28. <image src="../../utils/images/zhifubao.png" />
  29. </view>
  30. </view>

以及手机版样式,login.wxss页面

  1. /* pages/login/login.wxss */
  2. .Login{ width:90%; margin:auto; overflow:hidden; padding-top:20px;}
  3. #my input{
  4. border: 1px solid black;
  5. float: left;
  6. margin-left: 5px;
  7. }
  8. /*page{
  9. margin-top: 20px;
  10. }*/
  11. .section{
  12. margin-top: 20px;
  13. margin-left:5px;
  14. display: flex;
  15. flex-direction: row;
  16. width:95%; overflow:hidden; overflow:hidden;
  17. }
  18. .section__title{
  19. width:25%; float:left; font-size:16px; line-height:40px; color:#666;
  20. }
  21. .section input{
  22. border: 1px solid #DFDFDF; height:30px; line-height:30px; width:95%; padding-left: 5px; -webkit-appearance: none; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border-radius: 0; -webkit-rtl-ordering: logical; -webkit-user-select: text; cursor: auto; background-color: white; font-size:14px; line-height:30px;
  23. }
  24. #button button{
  25. display:block; margin:auto; background:#FF2233; font-size:16px; line-height:40px;
  26. border:0px; color:#FFF; width:97%; margin:auto;margin-top:20px; margin-bottom:10px;border-radius:5px;
  27. }
  28. #xia{
  29. margin-top: 30px;
  30. margin-left:5px;
  31. }
  32. #xia checkbox-group{
  33. float: left;color:#737373;font-size:15px;
  34. }
  35. #xia view{
  36. float: left;
  37. margin-left: 72px;
  38. }
  39. #xia navigator{
  40. float: left;
  41. margin: 0 3px;
  42. color:dodgerblue;font-size:15px;
  43. }
  44. #di{
  45. text-align:center;font-size:12px; padding-top:50px;
  46. color:#737373;
  47. }
  48. #san{
  49. margin-left: 23%;
  50. }
  51. #san image{
  52. width: 40px;
  53. height: 40px;
  54. margin: 8% 10%;
  55. }
  56. #tishi{
  57. color:red;
  58. text-align:center;font-size:12px; padding-top:8px;
  59. }

完成简单的登录页面

最新评论

轻源码让程序更轻更快

QingYuanMa.com

工作时间 周一至周六 8:00-17:30

客服QQ点击咨询

微信公众号

APP客户端

Copyright © 2016-2019 http://www.qingyuanma.com/ 鲁ICP备17014494号

快速回复 返回顶部 返回列表