Agile國人出品HTML5+CSS3+JS移動應用開發框架

時間 2019-11-08

標籤 agile 國人出品 html5+css3+js html css 移動應用開發框架欄目 HTML 简体版

原文原文鏈接

Agile 是一個基於HTML5+CSS3+JS的移動應用開發框架，在體驗上儘可能接近Native Like，而且同時支持單頁模式和多頁模式。
javascript

Agile 讓HTML5在移動應用開發中充分發揮優點。全部開發者都能快速上手、全部設備均可以適配、全部項目都適用。 css

簡單、可擴展
Agile 支持Zepto和jQuery雙引擎及相應的擴展；同時Agile均支持單頁模式和多頁模式的移動應用，能夠與ExMobi、PhoneGap等流行的跨平臺開發框架一塊兒使用。 html

一個框架、多種設備
你的移動應用能在 Agile 的幫助下經過同一份代碼快速、有效適配手機、平板等設備，這一切都是 CSS 媒體查詢（Media Query）的功勞。 java

組件齊全
Agile 提供了全面、美觀的文檔。你能在這裏找到關於 HTML 元素、HTML 和 CSS 組件、JavaScript 插件方面的全部詳細文檔。 git

入門

Agile框架自己是基於標準HTML5開發的，可是因爲移動應用中須要使用大量的本地能力而HTML5沒法勝任，因此一般須要依賴一個容器運行，並能調用容器裏的本地能力。 github

ExMobi是由烽火星空推出的移動應用平臺，除了封裝了豐富的原生組件和本地能力，對HTML5也有很好的支持，因此在ExMobi中使用 Agile能夠得到更好的體驗。除此以外，Agile也能夠運行於其餘的容器好比PhoneGap等。如何在ExMobi中使用Agile請參考http://www.exmobi.cn/agile/case.html。 web

目錄結構
下載Agile源碼以後，將其解壓縮到任意目錄便可看到四個目錄「agile」、「exmobijs」、「ratchet」和「icomoon」，agile是框架的核心，其餘目錄請點擊前面相應的連接介紹，在文檔中也會說起如何使用。如下是agile的目錄結構： app

agile/
├── css/
│ ├── agile.css
│ ├── agile.min.css
│ └── check.css
└── js/
├── agile.js
├── agile.min.js
├── iscroll.js
├── template-native.js
├── touch2mouse.js
└── zepto.js

這裏的文件有的不是必須，有的是能夠代替的。其中帶有agile.*和app.*的agile的核心框架，必須引用，其餘爲第三方輔助框架。通常生產環境建議使用帶min.*的文件。框架

Agile支持雙引擎，即Zepto和jQuery，因此這裏的zepto也能夠換成jQuery，可是建議使用Zepto，由於Zepto的運行效率高一些。 webapp

iScroll.js是一個移動端頁面滾動的解決方案，這裏用到的是v4.2.5版本，在Agile裏面已經封裝好接口，通常狀況下不須要直接調用，如需使用可參考iScroll 4.2.5簡易API。

template-native.js是一個經典的JS模板引擎，能夠將JSON數據動態注入到一個模板文件中，詳細瞭解請訪問其在github的位置。

基本模板
使用Agile框架，最基本要引用的CSS和JavaScript以及HTML頁面以下（全部JS和CSS均使用相對地址）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webapp</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../script/agile/css/agile.css">
<link rel="stylesheet" href="../../script/agile/css/app.css">
</head>
<body>
<h1>Hello World</h1>

<script type="text/javascript" src="../../script/agile/js/zepto.js"></script>

<script type="text/javascript" src="../../script/agile/js/agile.js"></script>

<script type="text/javascript" src="../../script/agile/js/touch2mouse.js"></script>

<script type="text/javascript" src="../../script/agile/js/app.js"></script>

</body>
</html>