AndroidUI4Web框架

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

框架优点



流畅度.框架使用WebCanvas渲染页面,能有接近60fps的流畅度.
原生级别体验.页面过渡动画,滚动回弹,点击响应等等细节都是原生级别的体验.
稳定.所有UI组件都是移植自Android,组件内部逻辑与原生Android的一致,稳定度也一致.
易用.对Android开发者可以超低成本上手开发.
开发者社区.所有API文档用法和问题等都可以从Android社区找到.

目录：
Home
1.GettingStarted
2.Docs
2.1Docs.Layout
2.2Docs.JSCode
3.BuildProject
4.Debug
5.PackageApp
6.Usethirdpartlibrary
中文_1.快速开始
中文_2.Docs
中文_2.1Docs.Layout
中文_2.2Docs.JSCode
中文_3.BuildProject
中文_4.Debug
Show4morepages…
中文_5.打包成App
中文_6.使用第三方库
推广_AndroidUIX框架介绍For安卓开发者
推广_使用AndroidUIX框架制作跨平台UI
1.GettingStarted
Ready


WebStorm(newversionisbetter)
Node.js

CLIforAndroidUIX:npminstall-gandroidui-cli

Createaproject
1.Createaemptydirectoryforyourproject
2.Cdintothedirectory,runandroiduicreatetocreateahelloworldprojectinthedirectory.
3.OpenWebStormandopenthedirectory,yourprojectwilllookslike:





CreatedProject


Layout
LayoutissameasAndroid's,filesputatres/layout/xxxxx.xml,seetheDocs.Layout
Thecreatedproject'sactivity_main.xml
<FrameLayoutxmlns="android"xmlns:android="//schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<TextView
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"/>



JSCode
UseTypescript+ECMAScript6towritethecode.
Filesputinthesrc
directory,theAPIissameasAndroid's.seeDocs.JSCode
Thecreatedproject'sMainActivity.ts
///
///
modulemy.app{
importActionBarActivity=android.app.ActionBarActivity;
importView=android.view.View;
importBundle=android.os.Bundle;
exportclassMainActivityextendsActionBarActivity{

protectedonCreate(savedInstanceState?:Bundle):void{
super.onCreate(savedInstanceState);
this.setContentView(R.layout.activity_main);
}
}
}


Preview
Rightclicktheindex_debug.html
file,chooseOpeninBrowser
toseecreatedproject'spage.





OpeninBrowser


BuildProject
Afteryouchangethelayoutormodifythecode,youshouldbuildyourprojectbeforepreview.
DebugLayout
Previewtheindex_debug.html
file,openthedevdashboard,youcanseethepositionandsizeofviews.





DebugLayout


DebugJSCode
Previewtheindex_debug.html
file,openthedevdashboard,youcandebugthetypescriptcodeinbrowser.





DebugJSCode


PackageApp
seewiki:PackageApp
End
Seethewikitoknowmore.
Ifyoufounddocument'smistake,helpmetofixit,thankyou.    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！