APP 登入頁

WFCloud APP

範本下載

https://github.com/UNUMobile/WFCloudAPP/raw/master/Labs/Template.zip

STEP1 : 檔案架構

解開後會看到如右側架構,我們主要會用到

  • app.css 自訂樣式表
  • app.js 程式(使用 Vue.js)
  • index.html 畫面 UI (使用 ONSEN)

STEP2 : 登入畫面

主要功能有

  • 檢查 是否符合正常 email 格式
  • 預設不顯示 Log In 按鍵,輸入正確 email 格式及密碼不是空白時顯示
  • 顯示檢查訊息
  • 將 email 和 密碼提交 WFCloud 認證
  • 授權成功時轉換頁面

STEP3 : 資料模型

登入畫面主要有 2 項資料,分別是 email 和 password. 在 app.js 找到 loginPage 區塊,並在 data(){} 建立資料物件

data() {
  return {
    user: { email: '', password: '' }
  };
}

STEP4 : 資料模型綁定 UI

在 index.html 找到名稱為 loginPage 的頁面,並在 email 和 password 欄位利用 v-ons-model 方式綁定資料模型

v-ons-model="user.email"


v-ons-model="user.password"

STEP5 : email 格式檢查

在 app.js 第一行加入以下 email 格式的正則運算

var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

在 computed 中加入 2 個驗證計算。

validation

  • validation.email :檢查email格式
  • validation.password : 檢查不為空白

isValid

調用 validation 如果通過為 true 否則為 false,用來判別是否通過驗證。

computed: {
  validation: function () {
    return {
      email: emailRE.test(this.user.email),
      password: !!this.user.password
    }
  },
  isValid: function () {
    var validation = this.validation
    return Object.keys(validation).every(function (key) {
      return validation[key]
    })
  }
}

STEP6 : 驗證訊息顯示

v-show : 用來指定 DOM 是否顯示

找到 Log In 按鍵,並加上 v-show 控制,只有 email 和 password 通過驗證才顯示按鍵。

v-show="validation.email && validation.password"

沒有通過時顯示對應的提示訊息

<div class="desc">
<span v-show="!validation.email">Please provide a valid email address.</span><br/>
<span v-show="!validation.password">Password cannot be empty.</span>
</div>

STEP7 : 登入 WFCloud

@click="login"
methods: {
  login() {
    if (this.isValid) {
      currentStack = this.pageStack;
      wf8266r.login(this.user.email, this.user.password
      , function (data) {
          console.log(data);           //登入成功取得設備清單
          myDevices = data;            //存入變數
          bindDeviceEvent();           //監聽設備
          currentStack.push(mainPage); //換頁到 mainPage
      })
    }
  }
}