跨平台移动WEB应用开发框架iMAG入门教程

iMAG是一个非常简洁高效的移动跨平台开发框架，开发一次可以同时兼容Android和iOS平台，有点儿Web开发基础就能很快上手。当前移动端跨平台开发的框架有很多，但用iMAG还有一个好处，就是用iMAG开发出的App是原生的。iMAG采用XML + JavaScript（配置 + 脚本）的开发方式，它的原理是将符合iMAG开发规范的XML文件解释成对应的原生应用代码来执行。原生跨平台开发，iMAG App具有和Native App相同的性能和用户体验，因此相比PhoneGap、JQuery Mobile等Web开发框架iMAG适用于对性能要求较高的情况。

虽然是原生又跨平台，iMAG的开发环境却很简单，不需要在本地电脑上安装或部署，在iMAG的官网平台注册一个免费帐号，马上就可以开始开发了。注册完登录，安装网站提示先在手机上安装iMAG开发版的客户端，然后打开iMAG的在线开发工具开始开发。

登录iMAG开发版客户端，在iMAG在线开发工具里编辑XML文件并保存，在手机上刷新页面就能看到效果。

Hello World

下面来看这个hello world的例子。iMAG框架使用的XML格式的文件来描述UI，因此代码必须符合XML格式的规范，一套代码在Android和iOS平台都能运行，而且展现出来的是原生UI效果。

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

其中<imag>是XML文档的根节点，<page>包含整个页面的内容，是对页面的抽象和封装。上面的代码中<page>包括<title>和<content>两个部分，分别是页面的标题和内容。<title>是页面标题导航栏，有<center>、<left>、<right>三个子节点，分别用来在title上居中、居左和居右来摆放文本和按钮。<content>里有个<list>控件，用来展示“Hello World!”文本内容，list的type属性是"group"，表示是一个分组列表。

iMAG在Android和iOS系统上会将XML解释成各自的本地代码，比如在Android上<label>会解释成原生的TextView，而在iOS上则会解释成对应的UILabel。因此不同于HTML，在iMAG框架里文本内容只能在放在label标签里，而不能任意放置。

基本页面布局

单个页面通常由title, header, content, footer组成：

<?xml version="1.0" encoding="utf-8"?>  
<imag>  
  <page>  
    <title style="background:#999999">  
      <center><label>标题</label></center>  
    </title>  
    <header style="background:#cccccc;padding:10">  
      <label>置顶</label>  
    </header>  
    <content style="background:white">  
      <label>内容</label>  
    </content>  
    <footer style="background:#cccccc;padding:10">  
      <label>置底</label>  
    </footer>  
  </page>  
</imag>  

<header>中的内容会始终显示在屏幕上顶部，<content>是页面的主要内容，<footer>的内容在屏幕中置底显示。

列表布局

通常页面内容的布局可以通过列表控件list来实现，如下面的例子：

其中<item>是列表项，每个item的都可以有自己的布局，在<item>中，<col>表示一列，<row>表示一行。这里list有点儿类似于HTML里的table，不同的是table是先有行(tr)再有列(td)，而list是先有列(col)再有行(row)。col-width样式用来设置多列的跨度，多个用逗号“,”分割，星号“*”表示宽度自适应。

用list控件可以实现更复杂和细致的布局效果，下面是用iMAG框架开发的微博App页面：

UI控件分类

UI控件分类iMAG框架的UI控件可以分为三类：内容控件、表单控件、布局控件。
内容控件：用来展示文字、图片等内容信息。
表单控件：用来接收用户输入的表单信息。
布局控件：用来控制页面内容的布局和摆放。

iMAG框架的UI控件列表：

分类	名称	标签	描述
内容控件	文本控件	label	用来显示文本内容
	网页控件	web	用来显示网页内容
	按钮控件	button	用来显示按钮
	图标控件	icon	用来显示资源图片或手机本地图片
	图片控件	image	用来显示网络图片
	图组控件	slideimage	用来显示一组图片
	进度条控件	progress	用来显示进度条
	日历控件	calendar	用来显示日历，可以用于开发日程管理功能
	地图控件	bmap	用来显示地图，可以在地图上标注地理位置信息。
表单控件	表单控件	form	用来表示表单，表单项都包含在form标签内
	隐藏域控件	input-hidden	用来表示表单隐藏域
	文本输入框控件	input-text	用来输入单行文本内容
	密码输入框控件	input-password	用来输入密码
	数字输入框控件	input-number	用来输入数字
	邮件地址输入框控件	input-email	用来输入邮件地址
	日期输入框控件	input-date	用来输入日期
	时间输入框控件	input-time	用来输入时间
	搜索框控件	input-search	用来输入搜索内容
	文件选择框控件	input-file	用来选择文件
	表单提交按钮	input-submit	用来点击提交表单
	文本域控件	textarea	用来输入多行文本
	单选框控件	select	用来选取单个值
	单选按钮控件	radio	用来选取单个值
	单选按钮组控件	radios	用来选取单个值
	多选按钮控件	checkbox	用来选取多个值
	表单验证控件	validation	用来验证表单数据
布局控件	页面控件	page	包含当前页面的所有内容
	标题控件	title	用来显示页面标题栏
	置顶控件	header	内容在屏幕上置顶
	置底控件	footer	内容在屏幕上置底
	内容控件	content	包含页面的内容部分
	内容组控件	contents	多个content的组
	标签栏控件	tabbar	代码注释 上一篇深入Apache与Nginx的优缺点比较详解下一篇ThinkPHP分页类使用详解 作者：喵哥笔记 学的不仅是技术，更是梦想！ IDC笔记