Jndroid——用应用开发的思路来开发 Web

我们都知道，WebApp 开发不外乎 HTML + CSS + JavaScript 三者。但是众所周知，前端开发虽然入门非常容易，但是要开发的好却是非常困难，由于一些历史原因，很多时候要做好一个好的 WebApp 需要前端开发人员经验和技术上都有比较好的积累。另外，因为一些历史原因，CSS 已经是一套非常复杂的系统，一样的布局有着几乎无数的实现方式，一不小心还容易掉入浏览器给你挖的坑里。总之，目前看来，要开发一个优秀的 WebApp 并不是一件易事。

当然，许多公司都意识到了这些问题，才有了今天前端框架百花齐放的景象，AngularJS,BackBone，最近大红大紫的 React.js 还有G家的 Polymer 等等，无不是希望通过一些方法来解决开发的痛点。但是今天的主角并不是这些已经耳熟能详的框架们，而是一个刚刚出现的新生命——Jndroid。

Jndroid 是什么？Jndroid 是把 Android 写 App 的一套思路和 API 放到了写 WebApp 上。主要是方便移动App 开发者需要写一个 WebApp 的时候，如果并没有很好的前端基础，那么可以简单的学一下 Javascript 的基础语法，便可以开始写 WebApp 程序。

Jndroid 的开发团队认为，既然现在 WebApp 是一个 App 而不是一个页面，那么我们就应该去借鉴移动端开发已经很完善的一套开发思路去进行开发，这样不仅仅开发上面会更加合理和容易，而且做出来的 App 也会显得非常有逻辑性和很好的交互性。

当然，这个框架还是很年轻的，也有很多地方还有值得改进的地方，但是目前来说这个框架以及足矣写不少 WebApp 了。

俗话说得好：

"Talk is cheap, Show me the code. "

那么让我们从零开始来试试这个框架:

第一部分：建立一个基本的 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> 标签中包含你的源代码就可以看到效果。

贴个截图：

图片描述

嗯，和 Android 里面的画个 View 的效果很接近吧。

最后，该框架已经开源 GTBrowser/Jndroid.js，欢迎 Fork 以及 PR。

PS: Jndroid 官网就是用 Jndroid 本身书写的，也可以作为一个 Demo 参考哟。

作者：zerob13@绿茶浏览器

Jndroid——用应用开发的思路来开发 Web

第一部分：建立一个基本的 HTML 页面并且包含 Jndroid 框架

第二部分：做一个简单的 Hello World

第三部分：对一个自定义的视图进行排版

绿茶浏览器

引用和评论

Jndroid发布0.9.0版本，拓展网页交互能力

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

微信抢红包插件