微信小程序學習筆記--20170425--登錄驗證實現

    初探微信小程序已經有幾天的時間，跟隨極客學院某某老師（只關注技術未關注老師，還請諒解）。從微信小程序的框架結構及相關內容。下面以登錄驗證功能模塊，展示近期學習的內容。

    需求描述：

        對於部分頁面添加登錄驗證，用戶未登錄的情況下，進入頁面，頁面自動轉向登錄頁面。登錄驗證成功後，回調到登錄發起頁面。

    實現思路：

        創建全局變量用於存儲當前登錄用戶對象（userInfo）、全局方法用於驗證登錄有效性（checkLoginInfo（））、全局方法用於獲取當前頁面的全路徑（getCurrentUrl（））。

            針對需要添加登錄限制的頁面page.onLoad事件，調用checkLoginInfo（）方法，判斷當前登錄狀態。如未登錄，頁面轉向登錄頁面。

            登錄驗證通過後，將登錄信息存儲到全局變量userInfo，跳轉回登錄發起頁面。

    關鍵代碼及注意事項：

            app.js

 data:{
    userInfo:null,//用戶登錄存儲對象
    loginUrl:"../login/login",
  },
  checkLoginInfo:function(url){//驗證登錄狀態
    if(this.data.userInfo==null){      return url;
    }else{      return "";
    }
  },
  getCurrentUrl:function(){//獲取當前頁面全路徑
    var url=getCurrentPages()[getCurrentPages().length-1].__route__;
    url=url.replace("eapdomain/src/pages","..");//替換路徑全路徑。修改該路徑爲相對路徑
    return url;
  }

        注意：在getCurrentUrl方法中，最後返回url時，又調用了replace方法。因爲wx.redirectTo的url參數要求爲相對路徑。所以在這裏轉換了一下。

        login.wxml

<!--eapdomain/src/pages/login/login.wxml--><view>
	<text>登錄頁面</text></view><view>
	<text>用戶名</text>
	<input type="text" placeholder="請輸入用戶名" bindinput="inputClick" id="loginName"></input></view><view>
	<text>密碼</text>
	<input type="password" placeholder="請輸入密碼" bindinput="inputClick" id="passWord"></input></view><view>
	<button type="primary" catchtap="loginClick">登錄</button></view>

   

        login.js

// eapdomain/src/pages/login/login.jsvar app=getApp();
Page({
  data:{
    backUrl:null,
    loginName:null,
    passWord:null
  },
  onLoad:function(options){
    this.setData({
      backUrl:null
    });    // 頁面初始化 options爲頁面跳轉所帶來的參數
    //console.log(options.backUrl);
    this.setData({
      backUrl:options.backUrl
    });
  },
  inputClick:function(event){
    //動態 對 paga.data 進行賦值
    //id與 數據項 一一對應
    var objId=event.currentTarget.id;    
    var paraObj={};
    paraObj[objId]=event.detail.value;    this.setData(paraObj);    //console.log(event.currentTarget.id);
    //console.log(this.data);
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  },
  loginClick:function(){

    var loginName=this.data.loginName;    var passWord=this.data.passWord;    if(loginName!=null&&passWord!=null){      var backUrl=this.data.backUrl;      // wx.redirectTo({
      //   url:'eapdomain/src/pages/pageCreate/pageCreate'
      // })
      app.data.userInfo={
          loginName:loginName,
          passWord:passWord
        };

      wx.redirectTo({
        url: backUrl
      });    //   wx.redirectTo({
    // //目的頁面地址
    //       url: 'pages/logs/index',
    //       success: function(res){},
          
    //   })
    }else{      this.setData({
        loginName:null,
        passWord:null
      });
    }
  }
})

        注意：這裏inputClick事件。根據前臺控件id爲page.data數據進行賦值。

        只爲實現功能，UI設計還有待提高。還請見諒。