码迷,mamicode.com
首页 > 移动开发 > 详细

一个初级开发者完胜十几人团队,此处有秘诀!

时间:2016-07-22 18:56:07      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:移动开发

最近今日头条很火,作为一名喜欢钻研的开发者,仔细研究了他们的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>控件,相当一个容器,用来展示输入框和按钮。

这里只是部分代码,详细代码可以点击链接 https://github.com/imagjs/news-app/tree/master


一个初级开发者完胜十几人团队,此处有秘诀!

标签:移动开发

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
coco
加入时间:2016-07-21
  关注此人  发短消息
文章分类
coco”关注的人------(0
coco”的粉丝们------(0
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!