Onsen UI快速入門 --Onsen UI


 一、什么是Onsen UI?

1、一系列專為移動應用程序設計的豐富UI組件、具有遵循原生iOS和Android設計標准的即時實現功能、免費使用,100%開源軟件(Apache v2許可證)。Onsen UI通過原生設計的UI元素豐富了應用用戶的移動體驗。它非常適合使用Cordova開發混合應用程序或開發移動Web應用程序。

2、Onsen UI是面向未來的架構,包含三個層次:CSS組件,用cssnext編寫,是下一代CSS;Web Components,用本機JavaScript編寫,支持所有框架;框架綁定,用於與流行框架(如Vue.jsAngularJS 1Angular 2+React)更緊密地集成。

3、瀏覽器和設備支持。Onsen UI已針對以下平台進行了全面優化和測試。

  • 移動
    • iOS 9及更高版本
    • Android 4.4.4及更高版本的WebView或Chrome瀏覽器(Android 4.0及以上的Crosswalk引擎
  • 桌面
    • 最新版本的Safari瀏覽器
    • 最新版本的Chrome瀏覽器

對於其他平台,請注意某些組件或功能可能無法正常工作。

二、Onsen UI框架的安裝

官方文檔:https://onsen.io/v2/guide/installation.html#installation

我們可以直接下載Onsen UI框架,在web頁面源代碼中引用核心的框架文件。或者你可以使用被提供的CDN,當然,在您開發的過程中需要聯網,確保能請求到框架相關的文件。

三、Onsen UI第一個應用程序

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>第一個Onsen UI程序</title>
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  </head>
  <body>
    <ons-button onclick="alert('Hello World!')">Click Me</ons-button>
  </body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM