一、函数交互
交互模型
1、js调用android原生的代码(不传递参数)
2、js调用android原生的代码(传递参数)
3、android原生调用JS的代码(不传递参数)
4、android原生调用JS的代码(传递参数)
在工程的main文件夹下创建一个文件夹assets ,然后把写好的H5页面放入该文件夹中,H5页面代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>这里是一个H5页面</title>
</head>
<body>
<p id="ptext">点击按键0</p>
<button id="buttonId0" class="buttonClass" onclick="javascript:button.click0()">按键0</button>
<p>点击按键1</p>
<button id="buttonId1" class="buttonClass" onclick="javascript:button.click0('参数1','参数2')">按键1
</button>
<script>
function setRed(){
//
var a = document.getElementById('ptext');
a.style.backgroundColor="#F00";
}
function setColor(color, text){
var a = document.getElementById('ptext');
a.style.backgroundColor = color;
a.innerHTML = text;
}
</script>
</body>
</html>
上边是一个简单的H5页面,其中包含两个按钮,点击按钮触发android 原生的方法;
里边还有两个JS 方法,其中也包括两个函数,主要用于给android原生去调用。
下边的代码 按键0按钮(无参) 和 按键1按钮(有参) 分别调用andorid的两个函数
//点击按键0 执行android中的 public void click0(){} 方法
<button onclick="javascript:button.click0()">按键0</button>
//点击按键1 执行android中的 public void click0(String data1,String data2){}方法
<button onclick="javascript:button.click0('参数1','参数2')">按键1
</button>
android的两个函数 click0() 和click0(参数1,参数2)
public class BtnClick {
//H5调用方法:javascript:button.click0()
@JavascriptInterface
public void click0() {
show("title", "");
}
//这是 button.click0() 的触发事件,可以传递待参数
//H5调用方法:javascript:button.click0('参数1','参数2')
@JavascriptInterface
public void click0(String data1, String data2) {
show(data1, data2);
}
private void show(String title, String data) {
Log.e("nan", title + data);
}
@JavascriptInterface//必须添加,这样才可以标志这个类的名称是 button
public String toString() {
return "button";
}
}
通过webview h5和原生相互通信、调用
val settings = wb.settings
settings.javaScriptEnabled = true
val btnClick = BtnClick()
wb.addJavascriptInterface(btnClick, btnClick.toString())
wb.loadUrl("file:///android_asset/h5.html") //加载assets文件中的H5页面
下边是android调用H5函数的代码
// 调用android 无参函数
redBtn.setOnClickListener {
wb.loadUrl("javascript:setRed()")
}
// 调用android有参函数
colorBtn.setOnClickListener {
wb.loadUrl("javascript:setColor('#00f','这是android 原生调用JS代码的触发事件')")
}
H5 代码
function setRed(){
//这个方法设置 id 为 ptext 的元素的背景色为红色
var a = document.getElementById('ptext');
a.style.backgroundColor="#F00";
}
function setColor(color, text){
//这个方法设置 id 为 ptext 的元素的背景色为指定颜色
//设置 id 为 ptext 的元素的内容为text
var a = document.getElementById('ptext');
a.style.backgroundColor = color;
a.innerHTML = text;
}
二、地址交互
通过配置 activity中scheme,代码如下:
<activity android:name=".SecondActivity">
<intent-filter>
// 主要的内容
// nan 是 scheme
// host 是主机名称
// path 是路径
// 当然还可以配置端口和加参数
// 完整地址 nan://testh5:8080/path?id=10
<data
android:host="testh5"
android:path="/path"
android:scheme="nan" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
</intent-filter>
</activity>
H5代码调用
<a href='nan://testh5/path?id=10'>点我试试</a>
三、保存cookie
在开发过程中,我们有时会需要让Android原生 登录完成之后记录登录状态,然后在内嵌的 H5 页面也使用当前的登录账户,这个时候,我们可以采用 token 的方式,后台根据 token 方式,去加载对应页面数据。
当 token 失效时,当然也就代表了当前的用户的登录有效期过期了。下面我们来分析下如何将登录信息保存到cookie,然后让Android 和 H5 公用这个cookie。
具体操作
步骤一、当然是先去登录,获取cookie
以HttpURLcollection为例:
String cookieStr = conn.getHeaderField("Set-Cookie");
步骤二、将cookie同步到WebView中
/**
* 将cookie同步到WebView
* @param url WebView要加载的url
* @param cookie 要同步的cookie
* @return true 同步cookie成功,false同步cookie失败
* @Author JPH
*/
public static boolean syncCookie(String url,String cookie) {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
CookieSyncManager.createInstance(context);
}
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setCookie(url, cookie);//如果没有特殊需求,这里只需要将session id以"key=value"形式作为cookie即可
String newCookie = cookieManager.getCookie(url);
return TextUtils.isEmpty(newCookie)?false:true;
}
如果设置成功,通过cookieManager.getCookie(url)方法就可取得刚才设置的cookie,如果两次设置cookie的url相同,则CookieManager会将上一次设置的cookie覆盖,已达到更新的效果。
提示:
同步cookie要在WebView加载url之前,否则WebView无法获得相应的cookie,也就无法通过验证。
每次登录成功后都需要调用“syncCookie”方法将cookie同步到WebView中,同时也达到了更新WebView的cookie。如果登录后没有及时将cookie同步到WebView可能导致WebView拿的是旧的session id和服务器进行通信。
优点:
方便,只需要在登陆后将cookie同步到WebView即可,省去了每次请求都需要设置一次的繁琐。
兼容性好,因为是系统原生支持的,所以兼容性自然比方式一要好,不存在cookie被拦截的问题。
分享个返利程序,可以赚点零花钱。
参考:
Android WebView 持久化问题(Cookie保存)
https://blog.csdn.net/qq_34163551/article/details/97642320
h5储存和cookie储存
https://blog.csdn.net/zerocher/article/details/72822108
Android在webview上设置cookie,部分cookie失效的问题
https://blog.csdn.net/zhangyali00/article/details/53158603