android webapp 简书,AndroidUI4Web：最适合Android开发者的WebApp框架

AndroidUI4Web框架

AndroidUI4Web是一个高性能的WebApp框架, 在移动浏览器上有与原生App一致的体验.对Android开发者们来说, 更重要的是:框架移植自Android, 开发方式和API调用与Android开发保持一致, Android们可以低成本快速上手开发.

框架优点

流畅度. 框架使用Web Canvas渲染页面, 能有接近60fps的流畅度.

原生级别体验. 页面过渡动画, 滚动回弹, 点击响应等等细节都是原生级别的体验.

稳定. 所有UI组件都是移植自Android, 组件内部逻辑与原生Android的一致, 稳定度也一致.

易用. 对Android开发者可以超低成本上手开发.

开发者社区. 所有API文档用法和问题等都可以从Android社区找到.

目录：

1. Getting Started

Ready

WebStorm (new version is better)

CLI for AndroidUIX : npm install -g androidui-cli

Create a project

1.Create a empty directory for your project

2.Cd into the directory, run androidui create to create a hello world project in the directory.

3.Open WebStorm and open the directory, your project will looks like :

Created Project

Layout

Layout is same as Android's, files put at res/layout/xxxxx.xml, see the Docs.Layout

The created project's activity_main.xml

android:layout_height="match_parent"

android:layout_width="match_parent">

android:id="textView"

android:text="@string/hello_world"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_gravity="center"

android:textSize="20sp" />

JS Code

Use Typescript + ECMAScript6 to write the code.

Files put in the src

directory, the API is same as Android's. see Docs.JSCode

The created project's MainActivity.ts

///

///

module my.app {

import ActionBarActivity = android.app.ActionBarActivity;

import View = android.view.View;

import Bundle = android.os.Bundle;

export class MainActivity extends ActionBarActivity{

protected onCreate(savedInstanceState?:Bundle):void {

super.onCreate(savedInstanceState);

this.setContentView(R.layout.activity_main);

}

}

}

Preview

Right click the index_debug.html

file, choose Open in Browser

to see created project's page.

Open in Browser

Build Project

After you change the layout or modify the code, you should build your project before preview.

Debug Layout

Preview the index_debug.html

file, open the dev dashboard, you can see the position and size of views.

DebugLayout

Debug JS Code

Preview the index_debug.html

file, open the dev dashboard, you can debug the typescript code in browser.

DebugJSCode

Package App

see wiki: Package App

End

See the wiki to know more.

If you found document's mistake, help me to fix it, thank you.