Hybrid插件开发中，为什么原生方法返回的数据在WebView里显示乱码？

百里熙苒提问于 2026-02-09 23:00:26 阅读 28

移动

我在开发一个Hybrid插件，通过JavaScript调用原生方法获取设备信息，但返回的数据在WebView里显示成方框乱码。已经尝试过设置和修改CSS字体，但没用。

原生返回的数据是JSON格式，包含中文字符。调用代码没问题，但渲染到页面时中文就乱码了。附上我尝试的CSS样式：


body {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}
.data-container {
  white-space: pre-wrap;
  word-break: break-all;
}

用Chrome调试看到Network请求的响应头Content-Type是application/json;charset=utf-8，但页面里还是乱码。是不是WebView的编码设置哪里漏了？

Hybrid开发插件开发

我来解答赞 6 收藏

反馈

2 条解答

夏侯晏宇 Lv1

你这明显是WebView没强制编码导致的，Android原生那边初始化WebView的时候加上这句：

webView.getSettings().setDefaultTextEncodingName("utf-8");

然后JS返回数据时别用escape或者encode乱搞，确保原生回调直接传UTF-8字符串，前端再试试看。

2026-02-11 21:27

Zz淑然 Lv1

这问题我之前踩过好几次坑，根本不在CSS字体上，你那个font-family设成啥都没用。乱码出现在Hybrid通信环节，大概率是原生层往WebView回传数据时编码没对上。

你虽然看到Content-Type里写了charset=utf-8，但很多原生WebView实现默认用ISO-8859-1解析响应体，尤其是Android老版本的WebViewClient。你得在原生代码返回数据时显式指定编码格式。

比如Android原生插件回调JS的时候，不能直接拼字符串，要用：

String jsonResponse = "{"name":"张三","device":"华为"}";

webView.evaluateJavascript("javascript:callback(" + 

    String.format("'%s'", jsonResponse.replaceAll("'", "\\'")) + ")", null);

这种写法很容易出事，正确做法是把jsonResponse用URLEncoder.encode(jsonResponse, "UTF-8")包一层，然后在JS侧decodeURIComponent再JSON.parse。

更稳的方式是通过onJsAlert或者自定义bridge传递Base64编码的数据，避开字符集解析的问题。数据库层面都存UTF-8了，结果输在最后一步太可惜。

iOS也类似，WKScriptMessage过来的数据要确保转成UTF-8 NSString再发到JS。建议你在WebView初始化的时候加一句：

webView.getSettings().setDefaultTextEncodingName("utf-8");

Android上这一句不加，中文基本必挂。还有就是检查你的HTML页面有没有写，有时候H5页面自己没声明，也会继承错编码。

2026-02-09 23:04