imag.js是一種NativeScript形式的框架，它兼具 Web 應(yīng)用的靈活和 Native 應(yīng)用的高性能，可以使用 JavaScript 來(lái)開發(fā) iOS 和 Android 原生應(yīng)用。在 JavaScript 中用Native抽象操作系統(tǒng)原生的 UI 組件，并內(nèi)置一體化框架，結(jié)合 Java、.Net、php和HTML5等主流開發(fā)語(yǔ)言／開發(fā)環(huán)境來(lái)寫XML語(yǔ)法。敲一次代碼，能夠運(yùn)行在多個(gè)平臺(tái)上，平臺(tái)同時(shí)融合第三方原生SDK以及模板服務(wù)

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

登錄iMAG開發(fā)版客戶端，在iMAG在線開發(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組成：

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

列表布局

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

其中<item>是列表項(xiàng)，每個(gè)item的都可以有自己的布局，在<item>中，<col>表示一列，<row>表示一行。這里list有點(diǎn)兒類似于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ì)致的布局效果。

UI控件分類

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

iMAG框架的UI控件列表：

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

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

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

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

這里有必要解釋一下Javascript的概念，完整的JavaScript實(shí)現(xiàn)是由以下3個(gè)不同部分組成的：核心（ECMAScript）、文檔對(duì)象模型（Document Object Model，簡(jiǎn)稱DOM）、瀏覽器對(duì)象模型（Browser Object Model，簡(jiǎn)稱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ì)開發(fā)人員不夠友好。而BOM里的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()方法會(huì)啟動(dòng)手機(jī)GPS定位功能，定位成功之后回調(diào)success方法，顯示出經(jīng)緯度信息。

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

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

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

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

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

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

這里顯示的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ī)范開發(fā)出的移動(dòng)應(yīng)用自動(dòng)適配不同手機(jī)。對(duì)于不同平臺(tái)不同分辨率的屏幕，也需要使用多套不同大小的圖片去適配，這些圖片只需要按照規(guī)則放到相應(yīng)的服務(wù)器目錄下即可，手機(jī)客戶端會(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屏幕分辨率為800×480的手機(jī)bg.png圖片的目錄查找順序是：
/res/android/hdpi
/res/android/default
/res/default

對(duì)于iPhone5手機(jī)目錄查找順序是：
/res/ios/640×1136
/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
分辨率	240×320	320×480	480×800 480×854	720×1280	1080×1920
比例	3	4	6	8	12

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

打包發(fā)布

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

總結(jié)

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

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