使用Android Studio和SUI框架开发web app

为什么要开发web app？

1.web app区别于native app，它使用html、css、js等web开发语言，在安卓项目内部使用webview来访问这些网站地址。可以做到ios与android上保持同一开发，缩短开发周期和成本，并且可以很好地适应不同的移动终端显示器的大小。而native app显然要针对不同的运行平台使用不同的技术语言开发。同时目前已有很多web app的框架和开源项目，里面实现了多种不同的前端效果，方便用户直接使用。

SUI框架简介

为了了解SUI框架，首先可以了解Framwork框架，这是一种ios风格的html框架，目前较为主流，为了方便初学者学习使用，淘宝团队为框架翻译了一份中文文档。参见链接：http://framework7.taobao.org

Framework框架有着如下几个特点：

1.原生的滚动条 2.轻量、高效、不依赖第三方框架 3.使用ajax来加载新页面 

4.支持独立的多个视图 5.简洁的js api 6.滑动返回、滑动操作等页面动画

ios风格

material风格

不足：这款框架的不足之处在于对于安卓应用会偶尔产生不兼容现象，针对这一特征淘宝团队在其基础上设计出了轻量且兼容所有主流安卓设备的MSUI框架

MSUI框架（即SUI框架）：

除了保留了framework的一些特性，设计为ios风格的web app框架之外，msui框架还加入了中国地区选择等一些独具地方特色和实用性的组件。

msui界面展示

SUI框架使用方法

详见： http://m.sui.taobao.org/getting-started/

1.引用外部的资源样式

2.以编写web界面的方式编写界面框架代码

3.添加需要的sui框架内组件

web app的实现方法

web app的实现本质上就是在安卓的项目内使用webview（网络视图）以访问网站的形式在安卓项目内访问编写好的html代码。

实现步骤：

1.在要Activity中实例化WebView组件：WebView webView = new WebView(this);

2.调用WebView的loadUrl()方法，设置WevView要显示的网页：

互联网用：webView.loadUrl("http://www.baidu.com");

本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中

3.调用Activity的setContentView()方法来显示网页视图

4.用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面

5.需要在AndroidManifest.xml文件中添加权限，否则会出现Web page not available错误。

示例：MainActivity.java

packagecom.android.webview.activity;

importandroid.app.Activity;

importandroid.os.Bundle;

importandroid.view.KeyEvent;

importandroid.webkit.WebView;

publicclassMainActivityextendsActivity {

privateWebView webview;

@Override

publicvoidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//实例化WebView对象

webview =newWebView(this);

//设置WebView属性，能够执行Javascript脚本

webview.getSettings().setJavaScriptEnabled(true);

//加载需要显示的网页

webview.loadUrl("http://www.51cto.com/");

//设置Web视图

setContentView(webview);

}

@Override

//设置回退

//覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法

publicbooleanonKeyDown(intkeyCode, KeyEvent event) {

if((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {

webview.goBack();//goBack()表示返回WebView的上一页面

returntrue;

}

returnfalse;

}