JS与Android的交互

最新推荐文章于 2024-05-14 08:50:37 发布

nan_11

最新推荐文章于 2024-05-14 08:50:37 发布

阅读量6.3k

点赞数 1

文章标签： android javascript 交互

本文链接：https://blog.csdn.net/yanzeyanga/article/details/121033213

版权

一、函数交互
交互模型
在这里插入图片描述

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

nan_11

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
JS与Android的交互

一、函数交互交互模型1、js调用android原生的代码（不传递参数）2、js调用android原生的代码（传递参数）3、android原生调用JS的代码（不传递参数）4、android原生调用JS的代码（传递参数）在工程的main文件夹下创建一个文件夹assets ,然后把写好的H5页面放入该文件夹中，H5页面代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"/>
复制链接

扫一扫