ONSEN UI 2

ONSEN UI 是以 HTML5(CSS3+JavaScript+HTML) 為核心的 UI framework。其中 CSS 負責了畫面 UI 要怎麼顯示, 也就是各位在畫面上看到的所有呈現都是 CSS 處理的。另外一個很重要的核心就是 JS(JavaScript), 因為開發架構便利性及效能考量, 目前市場上比較著名的 JS framework 有

Google 的 Angular
Facebook 的 React
中國大陸的 Vue

核心人物JS, 他會幫助你去監看使用者做什麼事情時, 要去通知 CSS 畫面要如何變化。除了 UI 控制變化外還有所有和資料模式的處理及邏輯計算都是他負責, 也就是你要寫程式的地方。

CSS 樣式

 <link rel="stylesheet" href="css/onsenui.css">

 <link rel="stylesheet" href="css/onsen-css-components.min.css">

JS 程式庫

<script src="js/onsenui.min.js"></script>

一個簡單的 APP 頁面

<v-ons-page></v-ons-page> V 開頭表示配合的是 Vue.js 來運作，我們看底下就是一個基本頁面的 ONSEN UI 碼。

觀念 Single Page Application (SPA)

ONSEN UI 製作的頁面屬於單頁式的開發, 所以所有的頁面都會放在同一份 .html 文件中, 透過 js 動態更換顯示的是哪個頁面。

名稱叫 main 的頁面 < index.html >

<template id="main">

  <v-ons-page>

    <v-ons-toolbar>

      <div class="center">{{title}}</div>

    </v-ons-toolbar>

    內容區

  </v-ons-page>

</template>

控制 main 頁面的載入程式 < index.js >

new Vue({

  el: '#app',

  template: '#main',

  data() {

    return {

      title: 'My app'

};

});

下一步

現在你應該已經完成了

Firebase 免費的網頁空間
了解如何使用 Onsen UI 去設計一個 APP 頁面

接下來下一個單元就要進入重頭戲 Vue.js 了, 準備好了嗎?

Google Sites

Report abuse