标签：移动开发
随着互联网创业的持续升温，市场对于移动应用开发的开发者需求也供大于求，对于移动端开发工具技术也五花八门，大致分为三大类，第一种就是纯原生开发，纯原生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>
更详细的源码标签：移动开发