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> 标签中包含你的源代码就能够看到效果。

贴个截图：

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

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

PS: Jndroid 官网就是用 Jndroid 自己书写的，也能够做为一个 Demo 参考哟。

做者：zerob13@绿茶浏览器