1. 程式人生 > >微信小程式之八(使用者登入)

微信小程式之八(使用者登入)

在商城中,訪問個人中心或者購物車前先判斷是否登入,從快取中讀取使用者名稱,密碼等,若無登入,或者清楚快取,則需登入。

下面以本人做的登入為例,login.js頁面

// pages/login/login.js
Page({
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的引數
    var token = wx.getStorageSync('token')
    var name = wx.getStorageSync('name')
    var pwd = wx.getStorageSync('pwd')
    if(token ==''){
        wx.navigateTo({
          url: '/pages/index/index'
        })
    }
    
    if(name!=''){
      if(pwd!=''){
        wx.redirectTo({
          url: '../my/my?name='+name+'&pwd='+pwd+''
        })
      }
    }
  },
  //使用者名稱和密碼輸入框事件
  usernameInput:function(e){
    // console.log(e)
    this.setData({
      userN:e.detail.value
    })
  },
  passwordInput:function(e){
    this.setData({
      passW:e.detail.value
    })
  },
  //登入按鈕點選事件,呼叫引數要用:this.data.引數;
  //設定引數值,要使用this.setData({})方法
  loginBtnClick:function(a){
    // console.log(a)
    var that=this
    if(this.data.userN.length == 0 || this.data.passW.length == 0){
      this.setData({
        infoMess:'溫馨提示:使用者名稱或密碼不能為空!',
      })
    }else{
      wx.request({
        url: 'http://www.tpshop.com/index.php?m=Api&c=User&a=login',
        data: {
          username: this.data.userN,
          password: this.data.passW,
          unique_id:'123456'
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
          // console.log(res.data.result)
          if(res.data.status == -1){
            userName:'缺少引數'
          }else{
            //存使用者session
            // wx.setStorageSync('token', res.data.result.token)
            // wx.setStorageSync('user_id', res.data.result.user_id)
            // wx.setStorageSync('name', that.data.userN)
            // wx.setStorageSync('pwd', that.data.passW)


            wx.setStorage({
              key:'name',
              data:res.data.result.mobile,
            })
            wx.setStorage({
              key:'token',
              data:res.data.result.token,
            })
            wx.setStorage({
              key:'pwd',
              data:that.data.passW,
            })
          //  wx.switchTab({
            wx.redirectTo({
              url: '../my/my?name='+res.data.result.mobile+'&pwd='+that.data.passW+''
            })
          }
        }
      })
    }
  }
})

login.wxml頁面

<view class="login">
  <view class="section">
      <view class="section__title">使用者名稱:</view>
      <input name="username" placeholder="請輸入郵箱/手機號" bindinput="usernameInput" />
  </view>
  <view class="section">
      <view class="section__title">密碼:</view>
      <input password type="text" name="password" placeholder="密碼" bindinput="passwordInput" />
  </view>
  <view id='button'>
    <button formType="submit" bindtap="loginBtnClick">登入</button>
  </view>
  <view id="tishi">
    {{infoMess}}
  </view>
  <view id="xia">
    <checkbox-group name="checkbox">
          <label><checkbox value="checkbox1" checked="checked"/>自動登入</label>
    </checkbox-group>
    <view style="float:left;">
      <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">免費註冊</navigator>
      <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">忘記密碼?</navigator>
    </view>
  </view>
  <view id='di'>第三方登入</view>
  <view id='san'>
    <image src="../../utils/images/QQ.png" />
    <image src="../../utils/images/zhifubao.png" />
  </view>
</view>

以及手機版樣式,login.wxss頁面

/* pages/login/login.wxss */
.Login{ width:90%; margin:auto; overflow:hidden; padding-top:20px;}
#my input{
    border: 1px solid black;
    float: left;
    margin-left: 5px;
}
/*page{
    margin-top: 20px;
}*/
.section{
    margin-top: 20px;
    margin-left:5px;
    display: flex;
    flex-direction: row;
    width:95%; overflow:hidden; overflow:hidden;
}
.section__title{
    width:25%; float:left; font-size:16px; line-height:40px; color:#666;
}
.section input{
    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;
}
#button button{
    display:block; margin:auto; background:#FF2233; font-size:16px; line-height:40px; 
 border:0px; color:#FFF; width:97%; margin:auto;margin-top:20px; margin-bottom:10px;border-radius:5px;
}
#xia{
    margin-top: 30px;
    margin-left:5px;
}
#xia checkbox-group{
    float: left;color:#737373;font-size:15px;
}
#xia view{
    float: left;
    margin-left: 72px;
}
#xia navigator{
    float: left;
    margin: 0 3px;
    color:dodgerblue;font-size:15px;  
}
#di{
    text-align:center;font-size:12px; padding-top:50px;
    color:#737373;
}
#san{
    margin-left: 23%;
}
#san image{
    width: 40px;
    height: 40px;
    margin: 8%  10%;
}
#tishi{
    color:red;
    text-align:center;font-size:12px; padding-top:8px;
}

完成簡單的登入頁面