android调js代码乱码,WebViewJavascriptBridge Android端 乱码问题（webview与页面js交互 传输参数乱码）...

场景：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中取出后解密，这样就不会有乱码了。

测试下吧。

解决如下：

原文：http://www.cnblogs.com/Ofsoul/p/6184336.html