隨着互聯網創業的持續升溫，市場對於移動應用開發的開發者需求也供大於求，對於移動端開發工具技術也五花八門，大致分爲三大類，第一種就是純原生開發，純原生app固然很好，但是其學習成本高，開發週期長，打碼量多，一般對於融資後的企業比較試用，另一種就是這兩年比較火的web app，一般是通過HTML5 開發從而封裝而實現的，衆所周知web app過分依賴網絡，渲染性能較弱，標籤太多代碼量也不少，web app只能說是一個臨時解決方案，今天我們仔細說說第三種方案，在衆多開發工具和平臺中之所以選擇他是因爲不用原生方式開發也能帶來流暢的原生體驗。Xml和JavaScript的完美結合打破了常規原生APP的開發方式，這種方式不僅帶來了代碼量相對極少的優點，同時編輯一次適用於Android和iOS系統，雖然iOS端對比Android不是很成熟，但隨着愛碼哥5.0的即將發佈，這些問題相信也隨之迎刃而解。
下面我們來看一下具體demo的開發過程
之前和大家分享過訂餐、新聞及仿微信APP的源碼，相信大家都有所瞭解，這些APP的demo都是用imag.js開發的
由於之前開發過預約訂餐的demo，想着也可以試試預約住宿的APP，如果要重新設計很麻煩，而且也只是想搞一個demo，並不發佈上線，就在應用商店裏搜尋到一個很新穎的應用，仿照着做。找到我們的UI美女把全部的圖片切給我，接下來就是開發了。
在imag.js中像素的默認單位是dp，文字的大小隻要寫數字即可。
由於APP中的圖片特別多，加載慢，所以並沒有把圖片直接放到資源裏，而是以json格式編寫圖片上傳到模擬數據中，容易調用。使用imag.js調用客戶端信息功能$phone.info()，可以獲取手機屏幕的信息參數，方便調整像素比例。
其中一個頁面使用了側滑菜單控件 slidingmenu來完成信息導航（如下圖）。SlidingMenu定義了兩個item，第一個item一開始是隱藏的，當點擊左上角按鈕時調用open()方法顯示側滑菜單，當然，SlidingMenu本身就帶了滑動的效果，右滑就可以響應出側邊欄。如果使用原生的話，Android倒是提供了HorizontalScrollView，雖然不用手動處理各種衝突，但也要了解事件的分發機制。
下圖使用了彈出菜單控件popupmenu，內容填充部分一個列表list搞定，可以自己設置list的背景，邊距，文字顏色等樣式。
上圖中的產品類型選擇由上拉菜單控件 actionmenu展示，ActionMenu控件用來顯示iOS ActionSheet風格的上拉菜單，風格固定，不能自己定製背景和樣式，並且只能通過JavaScript腳本動態創建。效果圖如下
下面的幾張效果圖相對來說就很簡單了，大多數佈局都是用的list控件實現的，跳轉頁面使用onclick="$page.open('')"方法。個別頁面加入了screen控件來展示多組圖片。
下面的代碼是最後一張圖邀請好友的源代碼
<?xml version="1.0" encoding="utf-8"?>
<imag>
<page>
<title style="background:#ffffff;height:52">
<left>
<icon src="back_gray.png" style="margin-left:20" onclick="$page.close()"/>
<label style="font-size:18;color:#3a3a3a;margin-left:32">邀請好友</label>
</left>
</title>
<content style="background:#f5f6f5">
<list type="transparent" style="padding:0 18">
<item style="padding:0;margin-top:27">
<row><button style="background:#ff5a5f;height:44;width:100%;font-size:15;color:#ffffff;align:center;padding-top:2">邀請聯繫人</button></row>
<row style="height:15"></row>
<row>
<label style="color:#c8cbc6;font-szie:15;align:center">————————</label>
<label style="color:#727a7e;font-szie:15;align:center;margin:0 10">或</label>
<label style="color:#c8cbc6;font-szie:15;align:center">————————</label>
</row>
<row style="height:12"></row>
<row><label style="color:#4d5153;font-size:13;align:center">分享鏈接</label></row>
</item>
<item style="padding:15 0;col-width:*,3,50">
<col><row><button style="background:#ffffff;height:44;width:100%;font-size:15;color:#f474b4d;align:center;padding-top:2">分享到微信</button></row></col>
<col></col>
<col><row style="height:44;background:#ffffff"><icon src="share.png" style="align:center"/></row></col>
</item>
<item style="margin-top:15;padding:0 0 44">
<row style="background:#c9ccc7;height:1"></row>
<row style="height:30"></row>
<row><label style="font-size:15;color:#7a8286;align:center">您有旅行基金即將到賬</label></row>
<row><label style="font-size:15;color:#ff4c51;align:center">查看過去的邀請</label></row>
</item>
</list>
</content>
</page>
</imag>