Android WebView传字符串给JS，时好时坏，为啥？

本文链接：https://blog.youkuaiyun.com/Fantasy_Lin_/article/details/105858509

1. 前言

做过与H5交互相关的工作的同学，应该是知道如何传值给H5的。WebView有一个方法 evaluateJavascript() ，这个就可以用来执行JS代码，即可以调用H5已经定义好的JS函数，当然我们也可以顺便传值过去。

// WebView调用JS函数 scanResult()，并传字符串数据data过去
String data = "123456789";
// 第一种写法
mWebView.evaluateJavascript("javascript:scanResult('" + data + "')", null);
// 第二种写法
mWebView.evaluateJavascript("javascript:scanResult(\"" + data + "\")", null);

如上面的代码所示，一般情况下，WebView传字符串给JS，有上面两种写法。大多数情况下，H5都能拿到字符串数据。不过有时又会莫名其妙拿不到，这是为啥呢？

2. 分析

大家其实可以看到 evaluateJavascript() 所要执行的JS代码，是要写在 "" 里面的，如果要传字符串数据的话，我们要在所传的数据外面包上 ''或""，就像上面的代码所示一样。我们都知道，如果要在 "" 里面写上这个字符 "，是需要转义的，写成 \" 。如果不转义，代码就会报错。所以 Android WebView 传字符串给JS，时好时坏，就是因为字符转义。

我之前弄了一个开源项目 AndroidWebView，里面的 WebActivity.java 有与H5交互的相关代码，接下来我将用这个项目来演示如何解决此问题。

3. 演示

开源项目 AndroidWebView 有一个扫码功能，扫码后拿到的数据，会传给H5。现在就让我们来扫一下吧！备注：现在对拿到的数据还未处理哦！

这是扫第一个二维码的结果：H5报错了！

这是扫第二个二维码的结果：H5也报错了！

目前我就遇到过这两种情况的报错，所以就先解决这两种咯！如果有同学遇到其他报错的，可以在评论区留言！

既然我们知道是转义字符的锅了，那就来解决转义字符的事情咯！相关代码如下所示：

/**
 * 处理传给JS函数的参数值。因为如果参数值带'、\n等特殊字符，JS会报错
 *
 * @param params 参数值
 * @return 已经处理过参数值
 */
public static String handleJSFunctionParams(String params) {
    return params.replace("'", "\\'")
            .replace("\"", "\\\"")
            .replace("\n", "\\n");
}

String data = intent.getStringExtra(Constant.EXTRA_DATA);
Log.d(Constant.TAG, mClassName + " scan result : " + data);
data = TextHelper.handleJSFunctionParams(data);
Log.d(Constant.TAG, mClassName + " scan handle result : " + data);
mWebView.evaluateJavascript("javascript:scanResult('" + data + "')", null);

上面所示的代码都是 AndroidWebView 里面的 WebActivity.java 的代码。那我们再来扫扫二维码吧！结果如下：