iMAG是一個(gè)非常簡(jiǎn)潔高效的移動(dòng)跨平臺(tái)開(kāi)發(fā)框架，開(kāi)發(fā)一次可以同時(shí)兼容Android和iOS平臺(tái)，有點(diǎn)兒Web開(kāi)發(fā)基礎(chǔ)就能很快上手。當(dāng)前移動(dòng)端跨平臺(tái)開(kāi)發(fā)的框架有很多，但用iMAG還有一個(gè)好處，就是用iMAG開(kāi)發(fā)出的App是原生的。iMAG采用XML + JavaScript（配置 + 腳本）的開(kāi)發(fā)方式，它的原理是將符合iMAG開(kāi)發(fā)規(guī)范的XML文件解釋成對(duì)應(yīng)的原生應(yīng)用代碼來(lái)執(zhí)行。原生跨平臺(tái)開(kāi)發(fā)，iMAG App具有和Native App相同的性能和用戶(hù)體驗(yàn)，因此相比PhoneGap、JQuery Mobile等Web開(kāi)發(fā)框架iMAG適用于對(duì)性能要求較高的情況。??????

雖然是原生又跨平臺(tái)，iMAG的開(kāi)發(fā)環(huán)境卻很簡(jiǎn)單，不需要在本地電腦上安裝或部署，在iMAG的官網(wǎng)平臺(tái)www.imagapp.com注冊(cè)一個(gè)免費(fèi)帳號(hào)，馬上就可以開(kāi)始開(kāi)發(fā)了。注冊(cè)完登錄，安裝網(wǎng)站提示先在手機(jī)上安裝iMAG開(kāi)發(fā)版的客戶(hù)端，然后打開(kāi)iMAG的在線(xiàn)開(kāi)發(fā)工具開(kāi)始開(kāi)發(fā)。

登錄iMAG開(kāi)發(fā)版客戶(hù)端，在iMAG在線(xiàn)開(kāi)發(fā)工具里編輯XML文件并保存，在手機(jī)上刷新頁(yè)面就能看到效果。

Hello World

下面來(lái)看這個(gè)hello world的例子。iMAG框架使用的XML格式的文件來(lái)描述UI，因此代碼必須符合XML格式的規(guī)范，一套代碼在Android和iOS平臺(tái)都能運(yùn)行，而且展現(xiàn)出來(lái)的是原生UI效果。

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

其中<imag>是XML文檔的根節(jié)點(diǎn)，<page>包含整個(gè)頁(yè)面的內(nèi)容，是對(duì)頁(yè)面的抽象和封裝。上面的代碼中<page>包括<title>和<content>兩個(gè)部分，分別是頁(yè)面的標(biāo)題和內(nèi)容。<title>是頁(yè)面標(biāo)題導(dǎo)航欄，有<center>、<left>、<right>三個(gè)子節(jié)點(diǎn)，分別用來(lái)在title上居中、居左和居右來(lái)擺放文本和按鈕。<content>里有個(gè)<list>控件，用來(lái)展示“Hello World!”文本內(nèi)容，list的type屬性是"group"，表示是一個(gè)分組列表。

iMAG在Android和iOS系統(tǒng)上會(huì)將XML解釋成各自的本地代碼，比如在Android上<label>會(huì)解釋成原生的TextView，而在iOS上則會(huì)解釋成對(duì)應(yīng)的UILabel。因此不同于HTML，在iMAG框架里文本內(nèi)容只能在放在label標(biāo)簽里，而不能任意放置。

基本頁(yè)面布局

單個(gè)頁(yè)面通常由title, header, content, footer組成：

<?xml version="1.0" encoding="utf-8"?> <imag> <page> <title style="background:#999999"> <center><label>標(biāo)題</label></center> </title> <header style="background:#cccccc;padding:10"> <label>置頂</label> </header> <content style="background:white"> <label>內(nèi)容</label> </content> <footer style="background:#cccccc;padding:10"> <label>置底</label> </footer> </page> </imag>

<header>中的內(nèi)容會(huì)始終顯示在屏幕上頂部，<content>是頁(yè)面的主要內(nèi)容，<footer>的內(nèi)容在屏幕中置底顯示。

列表布局

通常頁(yè)面內(nèi)容的布局可以通過(guò)列表控件list來(lái)實(shí)現(xiàn)，如下面的例子：

<?xml version="1.0" encoding="utf-8"?> <imag> <page> <title style="background:gradient(#444444)"> <center><label>費(fèi)用報(bào)銷(xiāo)單</label></center> </title> <content> <list type="group"> <item style="col-width:100,*"> <col> <row><label style="color:gray">單據(jù)編號(hào)：</label></row> </col> <col> <row><label>BXD-20120824-0250</label></row> </col> </item> <item style="col-width:100,*"> <col> <row><label style="color:gray">主題：</label></row> </col> <col> <row><label>客戶(hù)招待報(bào)銷(xiāo)單</label></row> </col> </item> <item style="col-width:100,*"> <col> <row><label style="color:gray">申請(qǐng)公司</label></row> </col> <col> <row><label>2012-08-24</label></row> </col> </item> <item style="col-width:100,*"> <col> <row><label style="color:gray">職位：</label></row> </col> <col> <row><label>財(cái)務(wù)總監(jiān)</label></row> </col> </item> </list> </content> </page> </imag>

其中<item>是列表項(xiàng)，每個(gè)item的都可以有自己的布局，在<item>中，<col>表示一列，<row>表示一行。這里list有點(diǎn)兒類(lèi)似于HTML里的table，不同的是table是先有行(tr)再有列(td)，而list是先有列(col)再有行(row)。col-width樣式用來(lái)設(shè)置多列的跨度，多個(gè)用逗號(hào)“,”分割，星號(hào)“*”表示寬度自適應(yīng)。

用list控件可以實(shí)現(xiàn)更復(fù)雜和細(xì)致的布局效果，下面是用iMAG框架開(kāi)發(fā)的微博App頁(yè)面：

UI控件分類(lèi)

UI控件分類(lèi)iMAG框架的UI控件可以分為三類(lèi)：內(nèi)容控件、表單控件、布局控件。
內(nèi)容控件：用來(lái)展示文字、圖片等內(nèi)容信息。
表單控件：用來(lái)接收用戶(hù)輸入的表單信息。
布局控件：用來(lái)控制頁(yè)面內(nèi)容的布局和擺放。

iMAG框架的UI控件列表：

分類(lèi) 名稱(chēng) 標(biāo)簽 描述

內(nèi)容控件	文本控件	label	用來(lái)顯示文本內(nèi)容
	網(wǎng)頁(yè)控件	web	用來(lái)顯示網(wǎng)頁(yè)內(nèi)容
	按鈕控件	button	用來(lái)顯示按鈕
	圖標(biāo)控件	icon	用來(lái)顯示資源圖片或手機(jī)本地圖片
	圖片控件	image	用來(lái)顯示網(wǎng)絡(luò)圖片
	圖組控件	slideimage	用來(lái)顯示一組圖片
	進(jìn)度條控件	progress	用來(lái)顯示進(jìn)度條
	日歷控件	calendar	用來(lái)顯示日歷，可以用于開(kāi)發(fā)日程管理功能
	地圖控件	bmap	用來(lái)顯示地圖，可以在地圖上標(biāo)注地理位置信息。
表單控件	表單控件	form	用來(lái)表示表單，表單項(xiàng)都包含在form標(biāo)簽內(nèi)
	隱藏域控件	input-hidden	用來(lái)表示表單隱藏域
	文本輸入框控件	input-text	用來(lái)輸入單行文本內(nèi)容
	密碼輸入框控件	input-password	用來(lái)輸入密碼
	數(shù)字輸入框控件	input-number	用來(lái)輸入數(shù)字
	郵件地址輸入框控件	input-email	用來(lái)輸入郵件地址
	日期輸入框控件	input-date	用來(lái)輸入日期
	時(shí)間輸入框控件	input-time	用來(lái)輸入時(shí)間
	搜索框控件	input-search	用來(lái)輸入搜索內(nèi)容
	文件選擇框控件	input-file	用來(lái)選擇文件
	表單提交按鈕	input-submit	用來(lái)點(diǎn)擊提交表單
	文本域控件	textarea	用來(lái)輸入多行文本
	單選框控件	select	用來(lái)選取單個(gè)值
	單選按鈕控件	radio	用來(lái)選取單個(gè)值
	單選按鈕組控件	radios	用來(lái)選取單個(gè)值
	多選按鈕控件	checkbox	用來(lái)選取多個(gè)值
	表單驗(yàn)證控件	validation	用來(lái)驗(yàn)證表單數(shù)據(jù)
布局控件	頁(yè)面控件	page	包含當(dāng)前頁(yè)面的所有內(nèi)容
	標(biāo)題控件	title	用來(lái)顯示頁(yè)面標(biāo)題欄
	置頂控件	header	內(nèi)容在屏幕上置頂
	置底控件	footer	內(nèi)容在屏幕上置底
	內(nèi)容控件	content	包含頁(yè)面的內(nèi)容部分
	內(nèi)容組控件	contents	多個(gè)content的組
	標(biāo)簽欄控件	tabbar	標(biāo)簽欄主要用于content內(nèi)容的切換
	標(biāo)簽頁(yè)控件	tabs	以標(biāo)簽頁(yè)的形式來(lái)顯示內(nèi)容
	單行控件	row	用來(lái)顯示一行控件內(nèi)容
	列表控件	list	以列表的形式來(lái)顯示內(nèi)容
	網(wǎng)格控件	grid	以網(wǎng)格的形式來(lái)顯示內(nèi)容
	多屏幕控件	screens	以多個(gè)屏幕的形式來(lái)顯示內(nèi)容
	系統(tǒng)菜單控件	menu	用來(lái)顯示系統(tǒng)菜單
	彈出菜單控件	actionmenu	用來(lái)顯示彈出菜單
	導(dǎo)航菜單控件	navmenu	用來(lái)顯示導(dǎo)航菜單
	彈跳菜單控件	pathmenu	用來(lái)顯示彈跳菜單
	側(cè)滑菜單控件	slidingmenu	用來(lái)顯示側(cè)滑菜單

在iMAG中通過(guò)對(duì)這些控件進(jìn)行簡(jiǎn)單的組合和設(shè)置，就可以開(kāi)發(fā)出各種效果的UI頁(yè)面。

動(dòng)態(tài)腳本

iMAG框架支持通過(guò)標(biāo)準(zhǔn)的Javascript語(yǔ)言來(lái)操作UI控件對(duì)象，完成動(dòng)態(tài)交互功能，比如：

<?xml version="1.0" encoding="utf-8"?> <imag><script><![CDATA[$page.onload = function() {alert('hello world!');}]]></script><page></page> </imag>

上面的代碼會(huì)在頁(yè)面初始化時(shí)觸發(fā)onload事件，調(diào)用JavaScript方法彈出一個(gè)alert對(duì)話(huà)框。

這里有必要解釋一下Javascript的概念，完整的JavaScript實(shí)現(xiàn)是由以下3個(gè)不同部分組成的：核心（ECMAScript）、文檔對(duì)象模型（Document Object Model，簡(jiǎn)稱(chēng)DOM）、瀏覽器對(duì)象模型（Browser Object Model，簡(jiǎn)稱(chēng)BOM）。對(duì)于iMAG而言實(shí)際上只用到了ECMAScript，因?yàn)閕MAG并不支持DOM和BOM。這是因?yàn)橐苿?dòng)UI往往頁(yè)面簡(jiǎn)潔元素較少，沒(méi)有必要引入復(fù)雜的DOM操作，而且DOM API本身設(shè)計(jì)糟糕，對(duì)開(kāi)發(fā)人員不夠友好。而B(niǎo)OM里的Window, Navigator, History這些對(duì)象對(duì)于移動(dòng)應(yīng)用也不再適用，iMAG有自己的MOM（Mobile Object Model）。

?iMAG中定義的MOM對(duì)象：

● $page：封裝了頁(yè)面UI相關(guān)的屬性和方法。
● $http：封裝了http操作相關(guān)的方法。
● $phone：封裝了手機(jī)本地功能調(diào)用相關(guān)的方法。
● $util：封裝了一些實(shí)用工具方法。

通過(guò)這些內(nèi)置的JavaScript對(duì)象和方法，iMAG框架可以輕松調(diào)用手機(jī)本地功能，比如GPS定位。

$phone.locate({provider: 'gps',success: function(location) {alert('GPS定位成功，經(jīng)緯度：' + location.latitude + ', ' + location.longitude);},error: function() {alert('GPS定位失敗！');} });

上面的$phone.locate()方法會(huì)啟動(dòng)手機(jī)GPS定位功能，定位成功之后回調(diào)success方法，顯示出經(jīng)緯度信息。

iMAG框架支持動(dòng)態(tài)創(chuàng)建UI控件，要用到$C()方法，參數(shù)是XML格式的文檔，如：

var button = $C('<button id="test_button">按鈕</button>'); $('content').add(button);

上面的方法通過(guò)XML動(dòng)態(tài)創(chuàng)建了一個(gè)button控件，并在頁(yè)面的content里顯示。

iMAG框架還可以使用Ajax請(qǐng)求來(lái)獲取數(shù)據(jù)，如：

$http.get('http://www.imagapp.com/download/data/http_json_ret.jsp', function(json) {var obj = JSON.parse(json);$('test_label').text = obj.text; });

$http.get()方法會(huì)發(fā)起一個(gè)異步調(diào)用的Ajax請(qǐng)求，服務(wù)器返回的JSON數(shù)據(jù)格式如下：

{text:'<font color="blue">JSON數(shù)據(jù)</font>'}

從服務(wù)器端動(dòng)態(tài)獲取的JSON數(shù)據(jù)用JSON.parse()方法解析，然后進(jìn)行處理和顯示。因?yàn)閕MAG底層是原生代碼非瀏覽器環(huán)境，因此在iMAG框架里調(diào)用Ajax請(qǐng)求沒(méi)有跨域問(wèn)題。

使用HMTL5

雖然使用HTML5不是iMAG開(kāi)發(fā)所必須的，但iMAG通過(guò)web控件的方式對(duì)HTML5進(jìn)行了很好的支持和兼容，并且提供了腳本機(jī)制使得web可以同原生控件進(jìn)行內(nèi)外交互相互調(diào)用，這在開(kāi)發(fā)網(wǎng)站類(lèi)應(yīng)用的時(shí)候會(huì)比較有用。

使用Web控件顯示HTML網(wǎng)頁(yè)的例子：

<?xml version="1.0" encoding="utf-8"?> <imag><page style="background:white"><title><center><label>網(wǎng)頁(yè)控件</label></center></title><content><web><![CDATA[<style type="text/css">table.altrowstable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #a9c6c9;border-collapse: collapse;}table.altrowstable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;}table.altrowstable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;}.oddrowcolor {background-color:#d4e3e5;}.evenrowcolor {background-color:#c3dde0;}</style><table class="altrowstable" id="alternatecolor"><tr class="evenrowcolor"><th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr class="oddrowcolor"><td<Text 1A</td><td>Text 1B</td><td>Text 1C</td></tr><tr class="evenrowcolor"><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td></tr><tr class="oddrowcolor"><td<Text 3A</td><td>Text 3B</td><td>Text 3C</td></tr><tr class="evenrowcolor"><td>Text 4A</td><td>Text 4B</td><td>Text 4C</td></tr><tr class="oddrowcolor"><td>Text 5A</td><td>Text 5B</td><td>Text 5C</td></tr></table>]]></web></content></page> </imag>

這里顯示的table表格是標(biāo)準(zhǔn)的HTML，因?yàn)閮?nèi)嵌的是HTML標(biāo)簽，所以這里必須使用CDATA來(lái)進(jìn)行標(biāo)記。

適配不同屏幕

iMAG已經(jīng)屏蔽了不同平臺(tái)不同分辨率手機(jī)之間的差異，按照iMAG規(guī)范開(kāi)發(fā)出的移動(dòng)應(yīng)用自動(dòng)適配不同手機(jī)。對(duì)于不同平臺(tái)不同分辨率的屏幕，也需要使用多套不同大小的圖片去適配，這些圖片只需要按照規(guī)則放到相應(yīng)的服務(wù)器目錄下即可，手機(jī)客戶(hù)端會(huì)自動(dòng)下載與之相適配的圖片。

服務(wù)器端圖片資源目錄結(jié)構(gòu)如下：

Android圖片資源目錄是以屏幕密度(density)來(lái)區(qū)分，而iOS是以屏幕分辨率來(lái)區(qū)分。anroid和ios目錄下分別有一個(gè)default目錄，當(dāng)具體屏幕分辨率或屏幕密度的圖片找不到時(shí)會(huì)讀取這個(gè)default目錄中的相應(yīng)的圖片。

比如:<pagestyle="background:bg.png">對(duì)于Android屏幕分辨率為800x480的手機(jī)bg.png圖片的目錄查找順序是：
/res/android/hdpi
/res/android/default
/res/default

對(duì)于iPhone5手機(jī)目錄查找順序是：
/res/ios/640x1136
/res/ios/default
/res/default

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

密度	ldpi	mdpi	hdpi	xhdpi	xxhdpi
密度值	dip<140	140<=dip<190	190<=dip<280	280<=dip<400	400<=dip
分辨率	240x320	320x480	480x800 480x854	720x1280	1080x1920
比例	3	4	6	8	12

可以根據(jù)比例來(lái)設(shè)計(jì)各種屏幕圖片的大小：比如一個(gè)圖片在hdpi上大小為48×48，那么在xhdpi上為64x64，在xxhdpi上為96x96(6:8:12)。

打包發(fā)布

App開(kāi)發(fā)完成之后就是打包和發(fā)布，打包之前要先上傳自己的應(yīng)用圖標(biāo)和App啟動(dòng)加載圖片，因?yàn)橐m配不同分辨率的手機(jī)，圖片要上傳多套。iOS打包時(shí)還要上傳證書(shū)，這樣打包出來(lái)的App才能夠上傳到AppStore。

iMAG官網(wǎng)地址：http://www.imagapp.com

總結(jié)

以上是生活随笔為你收集整理的跨平台移动框架iMAG开发入门的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。