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

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>  

这里显示的table表格是标准的HTML，因为内嵌的是HTML标签，所以这里必须使用CDATA来进行标记。

适配不同屏幕

iMAG已经屏蔽了不同平台不同分辨率手机之间的差异，按照iMAG规范开发出的移动应用自动适配不同手机。对于不同平台不同分辨率的屏幕，也需要使用多套不同大小的图片去适配，这些图片只需要按照规则放到相应的服务器目录下即可，手机客户端会自动下载与之相适配的图片。

服务器端图片资源目录结构如下：

Android图片资源目录是以屏幕密度(density)来区分，而iOS是以屏幕分辨率来区分。anroid和ios目录下分别有一个default目录，当具体屏幕分辨率或屏幕密度的图片找不到时会读取这个default目录中的相应的图片。

比如:<page>对于Android屏幕分辨率为800x480的手机bg.png图片的目录查找顺序是：

复制代码 代码如下:

/res/android/hdpi
/res/android/default
/res/default

对于iPhone5手机目录查找顺序是：

复制代码 代码如下:

/res/ios/640x1136
/res/ios/default
/res/default

可以看到这个查找顺序是由内向外的。
Android各个屏幕密度的取值如下：

可以根据比例来设计各种屏幕图片的大小：比如一个图片在hdpi上大小为48×48，那么在xhdpi上为64x64，在xxhdpi上为96x96(6:8:12)。

打包发布

App开发完成之后就是打包和发布，打包之前要先上传自己的应用图标和App启动加载图片，因为要适配不同分辨率的手机，图片要上传多套。iOS打包时还要上传证书，这样打包出来的App才能够上传到AppStore。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索入门教程
， 跨平台
， 开发框架
， 移动WEB应用
iMAG
spring web框架入门、imag.js框架怎么样、跨平台移动开发框架、跨平台app开发框架、跨平台开发框架，以便于您获取更多的相关知识。