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

為企業(yè)提供成都網(wǎng)站制作、做網(wǎng)站、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)營銷推廣、競價(jià)托管、品牌運(yùn)營等營銷獲客服務(wù)。創(chuàng)新互聯(lián)擁有網(wǎng)絡(luò)營銷運(yùn)營團(tuán)隊(duì)，以豐富的互聯(lián)網(wǎng)營銷經(jīng)驗(yàn)助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營銷獲客難題，做到“讓獲客更簡單”。自創(chuàng)立至今，成功用技術(shù)實(shí)力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營銷”三大難題，同時(shí)降低了營銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認(rèn)可！

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

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

Hello World

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

    
        
            測試App
        
        
            
                
                    Hello World!
                
            
        
    

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

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

基本頁面布局

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

    
    
        
            
            標(biāo)題    
            
            
            置頂    
            
            
            內(nèi)容    
            
            
            置底    
            
        

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

列表布局

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

  
  
      
          
            費(fèi)用報(bào)銷單  
          
          
              
                  
                      
                        單據(jù)編號：  
                      
                      
                        BXD-20120824-0250  
                      
                  
                  
                      
                       主題：  
                                          
                      
                       客戶招待報(bào)銷單  
                      
                  
                  
                      
                      申請公司  
                                          
                      
                       2012-08-24  
                      
                  
                  
                      
                        職位：  
                                          
                      
                        財(cái)務(wù)總監(jiān)  
                      
                  
               
          
      

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

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

UI控件分類

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

iMAG框架的UI控件列表：

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

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

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

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

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

 iMAG中定義的MOM對象：

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

通過這些內(nèi)置的JavaScript對象和方法，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()方法會啟動(dòng)手機(jī)GPS定位功能，定位成功之后回調(diào)success方法，顯示出經(jīng)緯度信息。

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

var button = $C('按鈕');
$('content').add(button);

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

iMAG框架還可以使用Ajax請求來獲取數(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()方法會發(fā)起一個(gè)異步調(diào)用的Ajax請求，                          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;   }                        Info Header 1Info Header 2Info Header 3                         Text 1BText 1C                         Text 2AText 2BText 2C                         Text 3BText 3C                         Text 4AText 4BText 4C                         Text 5AText 5BText 5C           ]]>              

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

適配不同屏幕

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

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

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

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

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

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

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

打包發(fā)布

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

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