场景:Android 项目中webview 加载 远程html url地址,并显示。点击html 按钮后,通过js 传送参数给 webview 。原生Android代码中即可获取参数并做处理(根据业务而定)。在传输中遇到乱码问题。
乱码主要针对于中文。
WebViewJavascriptBridge 交互使用就不重复了,可以参考 http://www.cnblogs.com/whoislcj/p/6104015.html
html端js 代码:
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement(‘iframe‘);
WVJBIframe.style.display = ‘none‘;
WVJBIframe.src = ‘wvjbscheme://__BRIDGE_LOADED__‘;
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
setupWebViewJavascriptBridge(function(bridge) {
var uniqueId = 1
function log(message, data) {
var log = document.getElementById(‘log‘)
var el = document.createElement(‘div‘)
el.className = ‘logLine‘
el.innerHTML = uniqueId++ + ‘. ‘ + message + ‘:
‘ + JSON.stringify(data)
if (log.children.length) { log.insertBefore(el, log.children[0]) }
else { log.appendChild(el) }
}
bridge.registerHandler(‘testJavascriptHandler‘, function (data, responseCallback) {
//log(‘ObjC called testJavascriptHandler with‘, data)
var responseData = {‘Javascript Says‘: ‘Right back atcha!‘}
//log(‘JS responding with‘, responseData)
responseCallback(responseData)
})
// 自定义代码 只修改此代码即可 其他不需要改动 // 获取按钮对象
var invest_back = document.getElementById(‘back‘); //判断页面是否存在
if (invest_back!= undefined && invest_back!= null) { //定义点击事件
invest_back.onclick = function (e) {
e.preventDefault();//默认不动 //自定义参数 json
var data = {‘command‘: ‘invest‘, ‘result‘: 0}; //testObjcCallback1 在Android代码中根据这个id取出 data
bridge.callHandler(‘testObjcCallback1‘, data, function (response) { //这里是回调,根据自己需求是不是要处理,不需要则不写
//log(‘JS got response‘, response)
});
}
}
// 自定义代码 end
})
在Android中引用的 WebViewJavascriptBridge js 需要修改,找到代码
原来:
function callHandler(handlerName, data, responseCallback) {
if (arguments.length == 2 && typeof data == ‘function‘) {
responseCallback = data;
data = null;
}
_doSend({ handlerName:handlerName, data:data }, responseCallback);
}
修改后:
function callHandler(handlerName, data, responseCallback) {
if (arguments.length == 2 && typeof data == ‘function‘) {
responseCallback = data;
data = null;
}
else{
data = btoa(unescape(encodeURIComponent( JSON.stringify( data ) ))); //红色部分为修改 加密
}
_doSend({ handlerName:handlerName, data:data }, responseCallback);
}
Android代码中获取到data
首先需要引用两个
import java.net.URLDecoder;
import android.util.Base64;
// testObjcCallback1 与js 中的定义 保持一致
webView.registerHandler("testObjcCallback1", new WVJBWebView.WVJBHandler() {
@Override
public void request(Object data, WVJBWebView.WVJBResponseCallback callback) {
callback.callback("Response from testJavaCallback!");
//data 这里可以使单一参数,如果是多个参数,可以写成json {"command":"invest","result":1} {‘command‘: ‘choujiang‘, ‘result‘: 1};
String str = data.toString();
//先Base64解码
byte[] mmmm = Base64.decode(str, Base64.DEFAULT);
String s = new String(mmmm);
//在进行url解码
String ee = URLDecoder.decode(s, "UTF-8");
js 中加密,在Android中取出后解密,这样就不会有乱码了。
测试下吧。
解决如下: