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

})

Google Sites

Report abuse