- 时间：2021-04-30 21:02 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：跨平台移动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的在线开发工具开始开发。
[img]http://files.jb51.net/file_images/article/201407/201407071422126.jpg[/img]
登录iMAG开发版客户端，在iMAG在线开发工具里编辑XML文件并保存，在手机上刷新页面就能看到效果。
[b]Hello World[/b]
下面来看这个hello world的例子。iMAG框架使用的XML格式的文件来描述UI，因此代码必须符合XML格式的规范，一套代码在Android和iOS平台都能运行，而且展现出来的是原生UI效果。
[img]http://files.jb51.net/file_images/article/201407/201407071422127.jpg[/img]
<?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标签里，而不能任意放置。
[b]基本页面布局[/b]
单个页面通常由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>
[img]http://dl2.iteye.com/upload/attachment/0098/7864/6d084913-0c96-367e-898b-32c814cf91bd.jpg[/img]
<header>中的内容会始终显示在屏幕上顶部，<content>是页面的主要内容，<footer>的内容在屏幕中置底显示。
[b]列表布局[/b]
通常页面内容的布局可以通过列表控件list来实现，如下面的例子：
[img]http://dl2.iteye.com/upload/attachment/0098/7866/8b5b371c-01ab-3539-86d3-b7bf207a29b2.jpg[/img]
其中<item>是列表项，每个item的都可以有自己的布局，在<item>中，<col>表示一列，<row>表示一行。这里list有点儿类似于HTML里的table，不同的是table是先有行(tr)再有列(td)，而list是先有列(col)再有行(row)。col-width样式用来设置多列的跨度，多个用逗号“,”分割，星号“*”表示宽度自适应。
用list控件可以实现更复杂和细致的布局效果，下面是用iMAG框架开发的微博App页面：
[img]http://dl2.iteye.com/upload/attachment/0098/7868/9df233f3-e579-303d-be43-80db8f36d9a5.jpg[/img]
[b]UI控件分类[/b]
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 |
多个[code]content[/code]的组 |
微信版
扫一扫进微信版
返回顶部
