开发背景
跟其他公司合作的一个项目,传递参数的方式为原生通过自定义header头参数,由前端来接收。
踩坑
1 原生传参
安卓原生传参的方式很简单,通过webview.loadUrl这个方法,如下:
2 H5接收参数
也很简单,在网上查到的是ajax的方式,但是最后项目用的原生获取header参数的,没必要为了接收个参数,在我大VUE框架里引入jquery,如下:
你看,多么简单。然后测试的时候就被啪啪打脸了。前端说没收到参数,原生说传了,互相僵持了一下午,最后用修改UserAgent的方式来传递参数的
今天开会,觉得这种方式不行不正规,还是要用之前loadUrl的方式传递header参数,忽然公司的大佬一句话点醒了我,纯前端VUE只能接收到response的header。
重点来了
请求一个网页其中包括了一次request(请求)以及一次response(响应)。所以,我们常说的header头也有两个,一个是request的header头,一个是response的header头。问题点就在这,圈起来。原生那边发的是request的header,而H5则接收的是response的header。
这个时候服务器的作用就来了,公司用的是nginx服务器,我在其中做了一些配置,逻辑就是获取request中的header参数,然后动态设置到response的header中,打完收工,代码如下
其中也可以看出,单纯前端VUE项目与渲染页面式前端项目(php,python)项目的区别,前者的权限没有后者的权限那么多,像php能直接通过Request->header的方式读取request的参数,而VUE则不行。
我们来看看以下几个webview使用的案列。
参考文献:
WebView详解与简单实现Android与H5互调
案例一header
直接上需求效果图:
需求:WebView添加header,h5读取头部,并且隐藏底部菜单栏。
需要添加的header数据:ECR-APP:android
我们平时大多数情况使用的是loadUrl(String url)加载方法,下面我们来看另一个loadUrl构造方法。
参数additionalHttpHeaders字面上的意思是:额外的http头部信息。这个方法是Android 2.2 (也就是API 8),WebView新增加了一个接口方法,就是为了便于我们加载网页同时又可以发送HTTP头信息的。
看看具体的使用:
马上运行效验一下:
网页上底部的菜单已经去掉了。
案例二cookie
cookie用于记录用户登录信息,用户下次进入需要登录的界面不再需要重复登录。
先看看需求:
会一直出现登录界面。那么怎么解决多次登录问题?WebView会将加载的url通过http请求传输到服务器。那么Cookie信息会通过header传递过去。
设置cookie代码如下:
以下是调用代码:
CookieManager会将这个Cookie存入该应用程序/data/data/databases/目录下的webviewCookiesChromium.db数据库的cookies表中。打开网页,WebView从数据库中读取该cookie值,放到http请求的头部,传递到服务器。
运行一下,看看还会出现多次登录的问题吗?
跳转正常,没有出现多次登录的问题。
案例三注入js
不知道你在项目中遇到这样的场景没有?手机端与h5交互,提供数据支持。如调本地相机,获取到的图片上传到网页;调用定位返回地址给网页;调用二维码扫描界面返回扫描结果等等。
如下,有这样一个场景,网页上有【扫描】图标,点击打开手机扫描界面,扫描成功后上传扫描结果。那么在手机端一般会有如下方法:
参数callbackFunction表示扫描成功后webview.load调用的方法并且只有一个参数(扫描结果)。
一般前端h5会这样进行调用Android手机端打开二维码的方法:
ios端会这样调用:
在h5端会分步处理,无疑会增加开发人员的工作量,试想一下,如果交互的地方很多,那么h5端开发人员作何感想?而且后期的维护也是一件非常繁琐的事情,就没有更好的方案吗?
如果h5端可以像调用本地方法那样简单调用手机端方法,那不是非常fashion。
那么就需要分别在Android端和ios端分布注入js代码,方便h5端调用。
注入的方式如下:
在onPageStarted方法下注入js方法:
这样h5只需要调用JsOpenScanFunction(s)方法就可以实现不同平台调用二维码扫描的功能。从此妈妈在已不担心多端调用的问题了。
注意:JsOpenScanFunction(s) 方法,需要前端和移动端事先约定。