最近今日頭條很火,作爲一名喜歡鑽研的開發者,仔細研究了他們的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>控件,相當一個容器,用來展示輸入框和按鈕。
這裏只是部分代碼,詳細代碼可以點擊鏈接 鏈接