Jndroid——用應用開發的思路來開發 Web

時間 2019-11-16

標籤 jndroid 應用開發思路 web 欄目 HTML 简体版

原文原文鏈接

咱們都知道，WebApp 開發不外乎 HTML + CSS + JavaScript 三者。可是衆所周知，前端開發雖然入門很是容易，可是要開發的好倒是很是困難，因爲一些歷史緣由，不少時候要作好一個好的 WebApp 須要前端開發人員經驗和技術上都有比較好的積累。另外，由於一些歷史緣由，CSS 已是一套很是複雜的系統，同樣的佈局有着幾乎無數的實現方式，一不當心還容易掉入瀏覽器給你挖的坑裏。總之，目前看來，要開發一個優秀的 WebApp 並非一件易事。html

固然，許多公司都意識到了這些問題，纔有了今天前端框架百花齊放的景象，AngularJS,BackBone，最近大紅大紫的 React.js 還有G家的 Polymer 等等，無不是但願經過一些方法來解決開發的痛點。可是今天的主角並非這些已經耳熟能詳的框架們，而是一個剛剛出現的新生命——Jndroid。前端

Jndroid 是什麼？Jndroid 是把 Android 寫 App 的一套思路和 API 放到了寫 WebApp 上。主要是方便移動App 開發者須要寫一個 WebApp 的時候，若是並無很好的前端基礎，那麼能夠簡單的學一下 Javascript 的基礎語法，即可以開始寫 WebApp 程序。git

Jndroid 的開發團隊認爲，既然如今 WebApp 是一個 App 而不是一個頁面，那麼咱們就應該去借鑑移動端開發已經很完善的一套開發思路去進行開發，這樣不只僅開發上面會更加合理和容易，並且作出來的 App 也會顯得很是有邏輯性和很好的交互性。github

固然，這個框架仍是很年輕的，也有不少地方還有值得改進的地方，可是目前來講這個框架以及足矣寫很多 WebApp 了。瀏覽器

俗話說得好：前端框架

"Talk is cheap, Show me the code. "app

那麼讓咱們從零開始來試試這個框架:框架

第一部分：創建一個基本的 HTML 頁面而且包含 Jndroid 框架

首先咱們建立一個 Demo.html 文件，而且用你喜歡的編輯器輸入如下內容。編輯器

HTML<!DOCTYPE html>
<html>
  <head>
   <script src="http://file.gtbrowser.cn/jndroid/jndroid.min.js"></script>
  </head>
  <body>
  </body>
</html>

這一步，咱們只是把 Jndroid 整個框架導入到了當前的頁面之中，到此爲止咱們已經部署好了全部 Jndroid 須要的依賴，以後就是開始正式開發啦。佈局

第二部分：作一個簡單的 Hello World

沒錯，第二步就能夠把 Hello World 作完。Jndroid 的 API 參考了 Android API 的格式，因此基本的邏輯就是建立 View ，把 View 的層級安排好，經過調用setContentView 以及addView 這些 API 來把界面插入到頁面中去。讓咱們看看 Hello World 的代碼，即可以一目瞭然了。

HTML<!DOCTYPE html>
<html>
<head>
    <script src="http://file.gtbrowser.cn/jndroid/jndroid.js"></script>
</head>
<body>


<script>
    /* 建立一個 FrameLayout 用來做爲當前的 RootView */
    var mLayout = new FrameLayout();
    mLayout.setBackgroundColor(0x1a000000);

    /* 沒有Activity，直接setContentView就能夠獲得一個全屏的視圖 */
    setContentView(mLayout);

    var mTextView = new TextView();
    mTextView.setText("helle world");
    mLayout.addView(mTextView);

</script>


</body>
</html>

至此，你的編碼工做已經完成。在瀏覽器裏打開 Demo.html 你就能夠看到一個顯示了 hello world 的頁面了。

第三部分：對一個自定義的視圖進行排版

上面的例子只是講述了最基本的視圖建立和添加。那麼若是咱們須要對視圖進行定位和排版應該怎麼作呢？ Jndroid 借鑑了 Android 視圖排版的思路，經過 onMeasure 來肯定當前視圖大小，經過 onLayout 來肯定當前 View 所在的位置。是否是聽起來有點暈？沒關係張，其實寫起來很是簡單，下面讓咱們再來看一段代碼你就明白了。

HTML<!DOCTYPE html>
<html>
<head>
<script src="http://file.gtbrowser.cn/jndroid/jndroid.min.js"></script>
</head>
<body>


<script>
var mView = new MyView();

function MyView() {
    ViewGroup.apply(this, []);
    this.setBackgroundColor(0x1a000000);

    var mChild = new View();
    mChild.setBackgroundColor(0xff009688);
    this.addView(mChild);

    this.onMeasure = function(widthMS, heightMS) {
        var width = MeasureSpec.getSize(widthMS);
        var height = MeasureSpec.getSize(heightMS);
        mChild.measure(MeasureSpec.makeMeasureSpec(width / 4, MeasureSpec.Exactly),
            MeasureSpec.makeMeasureSpec(height / 4, MeasureSpec.Exactly));
        this.setMeasuredDimension(width, height);
    }

    this.onLayout = function(x, y) {
        mChild.layout(50, 100);
    }
}

setContentView(mView);
</script>


</body>
</html>

看到這裏，相信你已經瞭解了 Jndroid 的基本思路，就是和作一個 Android App 同樣的思路去製做一個 WebApp，到此咱們只須要把上面代碼保存成 html 就能夠看到效果啦。固然你也能夠把代碼單獨寫在外置的 .js 文件中，這樣只須要在<body></body> 標籤中包含你的源代碼就能夠看到效果。

貼個截圖：