一個初級開發者完勝十幾人團隊,此處有祕訣!

最近今日頭條很火,作爲一名喜歡鑽研的開發者,仔細研究了他們的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>控件,相當一個容器,用來展示輸入框和按鈕。

這裏只是部分代碼,詳細代碼可以點擊鏈接 鏈接

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章