最近今日头条很火,作为一名喜欢钻研的开发者,仔细研究了他们的APP,发现他们自己开发了一个RPC 框架,开发者应该很了解框架是有多么难构建。如果有一个开发好的框架摆在我面前,我会毫不犹豫的使用他,就像node.js或者imag.js.
imag.js是移动跨平台开发框架,通过JavaScript调用底层API接口结合封装好的UI模块,可以帮助开发者简单快速的开发APP。imag.js框架中的控件都是原生的,就像Label控件,在iOS上是调用系统的UILabel控件,而在Android上则是调用的TextView控件,确保开发出的APP在性能流畅上和原生APP相媲美。
下面我们来看看小孟提供的基于imag.js技术开发的新闻类APP。
这么多页面要写好多代码吧?这就讲到了imag.js的一大特点:代码量少、开发效率快!只要一个<list>控件就可以完成下图部分的布局。
附上源码瞧瞧(登录页面)
<?xml version="1.0" encoding="utf-8"?>
<imag>
<page>
<title style="background:#ffffff">
<left><button role="back" style="color:#1f1f1f"/></left>
<center><label style="color:#1f1f1f;font-size:17">手机号登陆</label></center>
</title>
<content style="background:#f4f5f6">
<list type="transparent" style="margin:28 19">
<item style="padding:1 1 0;border:1 #efefef">
<row>
<input type="text" placeholder="手机号" style="font-size:14;color:#0a0a0a;background:#ffffff;height:40"/>
</row>
</item>
<item style="padding:1;border:1 #efefef;background:#ffffff;col-width:*,1,70">
<col>
<row><input type="text" placeholder="密码" style="font-size:14;color:#0a0a0a;height:40;background:#ffffff;"/></row>
</col>
<col><row style="height:14;background:#efefef"></row></col>
<col><row><label style="font-size:14;color:#8c8c8c;align:center">找回密码</label></row></col>
</item>
<item style="margin:20 0;padding:14;background:#999999;corner-radius:4">
<col><row><label style="color:#ffffff;font-size:15;align:center">登 录</label></row></col>
</item>
<item style="padding:0">
<col><row><label style="color:#1a88d5;font-szie:14;align:center">注册账号</label></row></col>
</item>
</list>
</content>
</page>
</imag>
从代码中看,其中<imag>是XML文档的根节点,page包含整个页面的内容,是对页面的抽象和封装。上面的代码中<page>包括<title>和<content>两个部分,分别是页面的标题和内容。title是页面标题导航栏,有<center>、<left>、<right>三个子节点,分别用来在title上居中、居左和居右来摆放文本和按钮。<content>里有个<list>控件,相当一个容器,用来展示输入框和按钮。
这里只是部分代码,详细代码可以点击链接 链接