要开发一个给公司内部使用的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" />