移動應用開發跨平臺工具imag.js入門

imag.js是一種NativeScript形式的框架，它兼具 Web 應用的靈活和 Native 應用的高性能，可以使用 JavaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用Native抽象操作系統原生的 UI 組件，並內置一體化框架，結合 Java、.Net、php和HTML5等主流開發語言／開發環境來寫XML語法。敲一次代碼，能夠運行在多個平臺上，平臺同時融合第三方原生SDK以及模板服務

雖然是原生又跨平臺，iMAG的開發環境卻很簡單，不需要在本地電腦上安裝或部署，在iMAG的官網平臺imagapp.com註冊一個免費帳號，馬上就可以開始開發了。註冊完登錄，安裝網站提示先在手機上安裝iMAG開發版的客戶端，然後打開iMAG的在線開發工具開始開發。

登錄iMAG開發版客戶端，在iMAG在線開發工具裏編輯XML文件並保存，在手機上刷新頁面就能看到效果。

Hello World

下面來看這個hello world的例子。iMAG框架使用的XML格式的文件來描述UI，因此代碼必須符合XML格式的規範，一套代碼在Android和iOS平臺都能運行，而且展現出來的是原生UI效果。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title style="background:#6495ED">
            <center><label>測試App</label></center>
        </title>
        <content>
            <list type="group">
                <item>
                    <label>Hello World!</label>
                </item>
            </list>
        </content>
    </page>
</imag>

其中<imag>是XML文檔的根節點，<page>包含整個頁面的內容，是對頁面的抽象和封裝。上面的代碼中<page>包括<title>和<content>兩個部分，分別是頁面的標題和內容。<title>是頁面標題導航欄，有<center>、<left>、<right>三個子節點，分別用來在title上居中、居左和居右來擺放文本和按鈕。<content>裏有個<list>控件，用來展示“Hello World!”文本內容，list的type屬性是”group”，表示是一個分組列表。

 

iMAG在Android和iOS系統上會將XML解釋成各自的本地代碼，比如在Android上<label>會解釋成原生的TextView，而在iOS上則會解釋成對應的UILabel。因此不同於HTML，在iMAG框架裏文本內容只能在放在label標籤裏，而不能任意放置。

基本頁面佈局

單個頁面通常由title, header, content, footer組成：

<header>中的內容會始終顯示在屏幕上頂部，<content>是頁面的主要內容，<footer>的內容在屏幕中置底顯示。

列表佈局

通常頁面內容的佈局可以通過列表控件list來實現，如下面的例子：

其中<item>是列表項，每個item的都可以有自己的佈局，在<item>中，<col>表示一列，<row>表示一行。這裏list有點兒類似於HTML裏的table，不同的是table是先有行(tr)再有列(td)，而list是先有列(col)再有行(row)。col-width樣式用來設置多列的跨度，多個用逗號“,”分割，星號“*”表示寬度自適應。用list控件可以實現更復雜和細緻的佈局效果。

UI控件分類

UI控件分類iMAG框架的UI控件可以分爲三類：內容控件、表單控件、佈局控件。
內容控件：用來展示文字、圖片等內容信息。
表單控件：用來接收用戶輸入的表單信息。
佈局控件：用來控制頁面內容的佈局和擺放。

iMAG框架的UI控件列表：

在iMAG中通過對這些控件進行簡單的組合和設置，就可以開發出各種效果的UI頁面。

動態腳本

iMAG框架支持通過標準的Javascript語言來操作UI控件對象，完成動態交互功能，比如：

上面的代碼會在頁面初始化時觸發onload事件，調用JavaScript方法彈出一個alert對話框。

這裏有必要解釋一下Javascript的概念，完整的JavaScript實現是由以下3個不同部分組成的：核心（ECMAScript）、文檔對象模型（Document Object Model，簡稱DOM）、瀏覽器對象模型（Browser Object Model，簡稱BOM）。對於iMAG而言實際上只用到了ECMAScript，因爲iMAG並不支持DOM和BOM。這是因爲移動UI往往頁面簡潔元素較少，沒有必要引入複雜的DOM操作，而且DOM API本身設計糟糕，對開發人員不夠友好。而BOM裏的Window, Navigator, History這些對象對於移動應用也不再適用，iMAG有自己的MOM（Mobile Object Model）。

 iMAG中定義的MOM對象：

● $page：封裝了頁面UI相關的屬性和方法。
● $http：封裝了http操作相關的方法。
● $phone：封裝了手機本地功能調用相關的方法。
● $util：封裝了一些實用工具方法。

通過這些內置的JavaScript對象和方法，iMAG框架可以輕鬆調用手機本地功能，比如GPS定位。

上面的$phone.locate()方法會啓動手機GPS定位功能，定位成功之後回調success方法，顯示出經緯度信息。

iMAG框架支持動態創建UI控件，要用到$C()方法，參數是XML格式的文檔，如：

上面的方法通過XML動態創建了一個button控件，並在頁面的content裏顯示。

iMAG框架還可以使用Ajax請求來獲取數據，如：

$http.get()方法會發起一個異步調用的Ajax請求，服務器返回的JSON數據格式如下：

從服務器端動態獲取的JSON數據用JSON.parse()方法解析，然後進行處理和顯示。因爲iMAG底層是原生代碼非瀏覽器環境，因此在iMAG框架裏調用Ajax請求沒有跨域問題。

使用HMTL5

雖然使用HTML5不是iMAG開發所必須的，但iMAG通過web控件的方式對HTML5進行了很好的支持和兼容，並且提供了腳本機制使得web可以同原生控件進行內外交互相互調用，這在開發網站類應用的時候會比較有用。

使用Web控件顯示HTML網頁的例子：

這裏顯示的table表格是標準的HTML，因爲內嵌的是HTML標籤，所以這裏必須使用CDATA來進行標記。

適配不同屏幕

iMAG已經屏蔽了不同平臺不同分辨率手機之間的差異，按照iMAG規範開發出的移動應用自動適配不同手機。對於不同平臺不同分辨率的屏幕，也需要使用多套不同大小的圖片去適配，這些圖片只需要按照規則放到相應的服務器目錄下即可，手機客戶端會自動下載與之相適配的圖片。

服務器端圖片資源目錄結構如下：

Android圖片資源目錄是以屏幕密度(density)來區分，而iOS是以屏幕分辨率來區分。anroid和ios目錄下分別有一個default目錄，當具體屏幕分辨率或屏幕密度的圖片找不到時會讀取這個default目錄中的相應的圖片。

比如:<pagestyle=”background:bg.png”>對於Android屏幕分辨率爲800×480的手機bg.png圖片的目錄查找順序是：
/res/android/hdpi
/res/android/default
/res/default

對於iPhone5手機目錄查找順序是：
/res/ios/640×1136
/res/ios/default
/res/default

可以看到這個查找順序是由內向外的。
Android各個屏幕密度的取值如下：

密度	ldpi	mdpi	hdpi	xhdpi	xxhdpi
密度值	dip<140	140<=dip<190	190<=dip<280	280<=dip<400	400<=dip
分辨率	240×320	320×480	480×800 480×854	720×1280	1080×1920
比例	3	4	6	8	12

可以根據比例來設計各種屏幕圖片的大小：比如一個圖片在hdpi上大小爲48×48，那麼在xhdpi上爲64×64，在xxhdpi上爲96×96(6:8:12)。

打包發佈

App開發完成之後就是打包和發佈，打包之前要先上傳自己的應用圖標和App啓動加載圖片，因爲要適配不同分辨率的手機，圖片要上傳多套。iOS打包時還要上傳證書，這樣打包出來的App才能夠上傳到AppStore。