iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0

第二十八天: 前端 onsen UI的進階使用

今日帶大家做一個比較完整的mobile app,大致結構 -> 四個頁面(登入、自訂頁面1、自訂頁面2、自訂頁面3) -> mongoDB資料庫連結


前提概要

day27 帶大家做基本的onsen UI 使用。


本文概要

  1. 框架建立
  2. 頁面建立
  3. 資料庫連接
  4. 同步/非同步問題
  5. 其他框架推薦

正文開始

對於基礎不熟的讀者,可以先到day5,熟悉基本工具與安裝。
程式碼放在 github

今天的內容,其實會滿硬的,實作居多,操作的方式為複製範例程式碼,修改成符合自己的架構,如下圖:

1. 框架建立

參考資料: [前端軍火庫]Onsen UI - 專注於mobile web的UI框架 這篇作為小小的基礎架構寫得很好,讀者可以參考。


如上圖所示,我把一些使用到的元件關鍵字標示出來,讓大家可以快速找到使用的元件。

  • setp1:框架描述(延伸 使用者情境描述)
    要製作一個有tabbar 導覽,並有四個頁面。

小作業:使用者情境描述 這個小作業在我們先前中的文章中,有做過練習,主要使大家盡量符合實務上的開發,想像使用者要如何使用你的產品,大概幾個頁面,心中有哪個app設計的不錯/設計得很爛都可以作為參考。

  • setp2: Tabbar 實作
    這邊我們沿用 day27的登入頁作為開頭,進行整併工作:

    1. 進入ons-tabbar的頁面,一開始會如下圖:
    2. 依下圖修改標籤,按下run tabbar會移置下方(原始設置為auto,ios系統在上方、android在上方。)
  • setp3: 整併到 day27的登入頁:

    1. 架構說明

      上圖,是最基本的架構,我們從setp2引入,就如同上圖。

      藍色號球1 導覽頁面設定,一個ons-tab page 對應一個頁面。
      藍色號球2 第一頁的設定,在標籤template id="tab1.html"與ons-page id="Tab1" 的設定要關聯。
      藍色號球3 同第一頁設定,這裡可以放第二個頁面的內容。
      藍色號球4 放置js描述的地方。

    2. 加入原本 day27的登入頁的程式碼:

      加入程式碼後的成果:

2. 頁面建立

標籤ons-tabbar中加入新的ons-tab page,如下圖:

最後新增兩個頁面。

標籤template的地方也需要新增,如下圖:

最終的成果如下:

導覽列設定說明



上圖說明導覽列設定標籤中對應的功能:
紅色號球1 badge代表紅色的訊息數字窗,也可以輸入new,會變成new。
紅色號球2 active 代表一開始啟動的頁面。
紅色號球3 icon可以設定使用的小圖,透過官方icon的介紹

可以使用的樣式來源有三個地方:

這邊我們介紹使用Font Awesome的樣式:
進入網站後,選擇自己喜愛的小圖樣式

也可以直接點樣式,也可以複製名稱,這邊選 address-card

直接在程式碼中改 fa-address-card:

完成後,結果如下圖:

如果是ios/android 使用同一個app,對應不同的系統做切換,可以這樣做:

<ons-icon
  icon="ion-navicon, material:md-menu">
</ons-icon>
  • Ionicons 使用ion-最為ios系統的小圖樣
  • Material Icons 使用md-最為android系統的小圖樣
    透過上列程式碼,就可以在ios上使用的是ion-navicon,在android上使用的是material:md-menu。

紅色號球4 active-icon當前頁的小圖會更改,如下圖:

3. 資料庫連接

資料庫的連接,在day26day27的文章中有說明過,這邊只是將原本實作登入頁的功能直接套入,就完成原先製作好的功能。
程式碼都放在 github /day28 中

4. 同步/非同步問題

同步與非同步問題,我們在day16介紹過,透過速食店的案例跟大家說明。
只要有跟資料庫通訊的程式碼,通常會有這種問題,要等待資料庫回復資料給我們,才能執行下一步,那詳細請讀者讀day16的文章,這邊只是提及這個在實務上一定會遇到的問題。

今天在測試時發現day26的day26_server_final.py登陸解析有問題,這邊修改了一下如下圖所示:

原先有bug程式碼

修正後的程式碼

if user_id == x[0]["user_id"]:
                    print("登陸帳號成功")
                    self.write_message("L0")
                    if password == x[0]["password"]:
                        print("輸入密碼成功")
                        self.write_message("P0")
                    else:
                        print("密碼輸入錯誤")
                        self.write_message("P1")
                else:
                    print("帳號輸入錯誤")
                    self.write_message("L1")
```					



最後改變index.html檔案中login_send()的功能,加入[setTimeout](https://www.w3schools.com/jsref/met_win_settimeout.asp),等1秒後再回來執行登入結果。
```javascript
   function login_send() {
    var y = {
      "parse":1,
      "user_id":username.value,
      "password":password.value,
    };
    var x = JSON.stringify(y)
    ws.send(x)
    setTimeout(function(){
      if (xx=="P0"){
      ons.notification.alert("這是onsenUI提供的alert功能,顯示這個代表登陸成功了。")
    }else if (xx == "P1") {
      alert("密碼錯誤")
    }else if (xx == "L1") {
      alert("帳號錯誤")
    }
    }, 1000);
  }
  

流程下來,會有三種狀況:帳號錯誤、密碼錯誤、登入成功

帳號錯誤

密碼錯誤

登入成功

5. 其他框架推薦

另外推薦一個大陸的bui框架

下列文篇我轉貼自CSDN,這個框架我後面用的很少了,這是大陸開源的框架,教程是中文的,對於不想看英文,想要快速學習框架的讀者也是很好的。

BUI介绍

BUI 是基于 jQuery 兼容 Kissy 的 Web UI 类库。专注于解决后台系统的框架方案。

BUI是十分适合作为后台管理系统的前端框架,因为:

(1)后台管理系统数据以表格形式呈现,然后就是增删查改等操作,分页等功能,使用起来十分便利。

(2)BUI还提供了数据统计显示的各种图片,什么折线图、区域图、柱状图、饼图等等。

(3)BUI还提供了各种按钮、面包屑,工具栏等等各种前端样式。

作者:小宝鸽 来源:CSDN


小結

onsen UI的應用就到此篇結束,明日會介紹bootstrap的使用。
每次都要打上一句,寫程式不難,難在沒動手寫


上一篇
三十天全端學習(javascript、python、mongoDB)---第二十七天: 前端 onsen UI的簡單使用
下一篇
三十天全端學習(javascript、python、mongoDB)---第二十九天: bootstrap基本介紹與使用
系列文
三十天全端學習:透過javascript(Onsen UI)、python(tornado)、非關聯式資料庫(mongoDB)完成全端學習,建置web app、mobile app。30

尚未有邦友留言

立即登入留言