["建立WebApp"]

建立WebApp

ArOZ Online WebApp 與其他系統所使用的程式非常類似。他是由HTML5, CSS, Javascript所組成。你可以使用你所熟悉的軟件來撰寫WebApp，大部份的HTML IDE皆支援。

以下是部份有用的貼士，或許能幫助到閣下撰寫WebApp

使用響應式設計，使其同時適用於桌面和流動裝置。
使用 ao_module 包裝函式。若非必要不要直接呼叫其他函式。
盡量不要包含其他模組。如有需要請提供圖形使用者介面。
不應使用數據庫。如有需要應盡量使用使攜式數據庫，例如SQLite而非MySQL。

流動裝置和 UTF-8

ArOZ Online 需要支援所有國家或地區的語言，因此請使用UTF-8編碼格式。另外，為了令介面可於Android或iOS裝置上可以正確縮放，你需要添加元數據於標頭中。

<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=0.8, maximum-scale=0.8"/>

你可以修改 initial-scale 和 maximum-scale 的值以符合你的需求

系統樣式

ArOZ Online 預設CSS是 TocasUI。你可以於AOR/script/tocas/tocas.css中找到。如要引用此css，請輸入以下代碼於<head>和</head>之間。

<link rel="stylesheet" href="../script/tocas/tocas.css">
<script src="../script/tocas/tocas.js"></script>

其他標頭

現在假設你己完成你的WebApp開發工作。你可以將他整合至ArOZ Online系統。ArOZ Online提供3種類型的介面來存取WebApp。

標準WebView (Grid Mode)
漸進式網絡應用程式 (PWA Mode)
虛擬桌面模式 (VDI Mode)

標準WebView

標準WebView是最基本的顯示模式，基本上就和一般瀏覽一樣，並且沒有ArOZ 附加功能。

漸進式網絡應用程式

漸進式網絡應用程式可以令到用戶在使用WebApp時獲得和原生程式一樣的體驗。根據Google的教學，你需要加入一個json檔案至<head>和</head>之間以支援漸進式網絡應用程式功能。以下是代碼範例。

還請注意iOS 未完整支援漸進式網絡應用程式 *

<link rel="manifest" href="manifest.json">

{
"name": "ArOZ Audio",
"short_name": "AudioA",
"icons": [{
"src": "img/pwa/128.png",
  "sizes": "128x128",
  "type": "image/png"
},{
  "src": "img/pwa/192.png",
  "sizes": "192x192",
  "type": "image/png"
}, {
  "src": "img/pwa/256.png",
  "sizes": "256x256",
  "type": "image/png"
}, {
  "src": "img/pwa/512.png",
  "sizes": "512x512",
  "type": "image/png"
}],
"start_url": "index.php?mode=pwa",
"display": "standalone",
"scope": "./",
"background_color": "#f7f7f7",
"theme_color": "#4286f4"
}

虛擬桌面模式

虛擬桌面模式是 ArOZ Online 提供的功能之一。利用人性化的介面設計，使你的生活可於雲基礎上輕鬆完成。要支援虛擬桌面模式，您將需要額外設計才能使其支援 VDI 模式。

一但不建立有關介面，你的 WebApp 將會於 VDI 模式下使用普通的 iframe 元素啟動.

VDI 模式的程式要求

VDI 模式的要求非常簡單。我們建議開發人員在開發 WebApps 時遵循以下準則，以便更好地支援 VDI模式。

不要重定向至 Grid Menu (同時不應有連結連至 /AOR/index.php)
設計應偏向桌面而不是流動將置 (讓他看上來像是桌面程式)
除非必要，否則不要干擾螢幕上的其他 WebApp。 (如果可以，不要在其他 iframe 上調用函數)

按照上面的準則，你的WebApp就會完成VDI的部份！

ao_module 簡介

ao_module 是功能表的應用程式接口。他包含了大部份的功能，如他包含了捷徑，檔案總管，浮動視窗等。他位於script/ao_module.js，你可以用以下代碼引用。

<script src="../script/ao_module.js"></script>

如果想更改在 VDI 模式啟動的介面，可以使用下列Javscript偵測。

if (ao_module_virtualDesktop){
	//Launching in VDI mode. Do something.
}else{
	//Not launching in VDI mode. Do something else.
}

此功能可用於隱藏不適合 VDI 模式的功能表。前往 "API Wrapper - ao_module" 查看更多。

進階系統 API

您可以通過以下函式呼叫進階系統 API。進階系統 API 包括

輸入法 API
檔案系統 API
預設程式
AO-Codec (UMFilename 用戶端上轉換)
浮動視窗 API
圖示管理器和工具

3.md 4.5 KB Histórico Raw