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

开发手记 专栏收录该内容
20 篇文章 0 订阅

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

 

 

 

 

 

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值