WebViewJavascriptBridge Android端 亂碼問題（webview與頁面js互動 傳輸參數亂碼）

標籤：load   亂碼問題   man   str   strong   style   載入   eid   rtb   

情境：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 + ‘:<br/>‘ + 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中取出後解密，這樣就不會有亂碼了。

測試下吧。

 

 

 

 

 

 

 

 

 

解決如下：

WebViewJavascriptBridge Android端 亂碼問題（webview與頁面js互動 傳輸參數亂碼）