Android学习笔记 3 : Webview - Native和HTML5结合

时间:2022-11-14 12:07:44

要开发一个给公司内部使用的App,自然就会想到能不能用HTML5来做,几个好处

1. 速度快,HTML5做界面快,企业内部使用,简明快捷,不求酷炫,客户端对不同设备的兼容性也容易处理

2. 前后台接口简单,其实就没什么接口了,相当于客户端嵌一个browser

3. 功能修改,代码全部在服务器端,客户端不需要升级

4. 学习成本低


由于App还需要能接受push消息,获取地理位置等功能,所以准备用混合模式,native部分处理用户登录、整体导航、消息处理等,HTML5提供绝大部分业务功能,包括各类业务信息的查看和处理。


这个模式要解决的主要问题就是用户登录后,如何再HTML5网页访问服务器时,把认证信息带过去。

解决思路:

1. 用户登录后,生成一个token,缓存在本地,服务器会记录用户账号,设备标识,以及需要的各种id,设置有效期

2. App启动,本地如果有有效token,则使用token连服务器自动认证,更新服务器端信息

3. App内嵌webview,所有web请求都包含这个token


对于我这个初学者,难点就在这第3步

考虑了两种方式:

1. 截取web请求,设置header (或rewrite url)

2. cookie


先尝试了第一种,发现WebView只能截取页面点击link这个操作,post请求,ajax请求,都无法控制。不行

Cookie这个方式,上述所有操作都是work的

只是验证了技术原型。

在session、cookie有效期控制等方面还有很多细节要处理。

CookieManager cookieManager = CookieManager.getInstance();
String tokenCookieStr = "token=my_token_in_cookie_new";
cookieManager.setCookie(Host.URL_BASE, tokenCookieStr);



除此之外,还有两个小点:

1. html5 Title的显示

    看了网上的资料,Android原生的标题栏看起来不大好控制,于是使用 no_title 的方式,自己加一个TextView作为标题栏

    需要覆盖 WebChromeClient.onReceivedTitle() 方法

    ps: WebChromeClient 这个名字挺莫名的,它是用来捕捉一些浏览器的事件,定制其行为,为什么这么命名?背后有什么故事?

final TextView tvTitle = (TextView)findViewById(R.id.web_title);
WebChromeClient wcc = new WebChromeClient() {
@Override
public void onReceivedTitle(WebView view, String title) {
// TODO truncate string if too long
tvTitle.setText(title);
super.onReceivedTitle(view, title);
}
};
myWebView.setWebChromeClient(wcc);

2. 回退功能

    用户按手机自带的回退键的时候,期望的行为一般是回到上一个页面。

    可以覆盖Activity的onKeyDown()方法来实现

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
final WebView myWebView = (WebView)findViewById(R.id.myWebView);
if(myWebView.canGoBack() && KeyEvent.KEYCODE_BACK == keyCode) {
myWebView.goBack();
return true;
} else {
return super.onKeyDown(keyCode, event);
}
}

至此这部分技术点校验完工,写了前后台一套原型代码,这里好像不能上传,再说了


再下一步,就是研究 JavaScript 和 native 程序的交互了。用户体验要好,这是关键。


黄鹤

2015-01-27


ps: 漏了一条,AndroidManifest.xml文件中,要添加访问互联网的权限

<uses-permission android:name="android.permission.INTERNET" />