使用WebView同時開發Android和IOS應用

JSBridgeDemo

使用WebView，Android(JsBridge) ，IOS（WebViewJavascriptBridge）開發同時開發Android和IOS版本App應用

Html/Javascript代碼

function marryClick() {
        var bridgeModel = {};
        bridgeModel.cmd = "alert";
        bridgeModel.succeed = true;
        bridgeModel.message = "網頁說：Java哥哥，我想和你結婚";
        var responseData = JSON.stringify(bridgeModel);
        triggerJavaMethod(responseData);

    }

    function demoClick() {
        var bridgeModel = {};
        bridgeModel.cmd = "openDemo";
        bridgeModel.succeed = true;
        bridgeModel.message = "";
        var responseData = JSON.stringify(bridgeModel);

        triggerJavaMethod(responseData);
    }

    function triggerJavaMethod(responseData) {
        //調用本地java方法
        window.WebViewJavascriptBridge.callHandler(
            'commandFromWeb'
            , responseData
            , function (responseData) {

                var bridgeModel = $.parseJSON(responseData);

                if (bridgeModel.succeed) {
                    alert(bridgeModel.message);
                }
                else {

                }
            }
        );
    }


    //注冊事件監聽
    function connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'
                , function () {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    }
    //注冊回調函數，初始化函數
    connectWebViewJavascriptBridge(function (bridge) {
        bridge.init(function (message, responseCallback) {
            //console.log('JS got a message', message);
            //var data = {
            //    'Javascript Responds': 'Wee!'
            //};
            //console.log('JS responding with', data);
            //responseCallback(data);
        });

        bridge.registerHandler("commandFromJava", function (data, responseCallback) {

            var bridgeModel = $.parseJSON(data);
            alert(bridgeModel.message);

            var bridgeModel = {};
            bridgeModel.cmd = "alert";
            bridgeModel.succeed = true;
            bridgeModel.message = "網頁說：Java哥哥，我也喜歡你";

            var responseData = JSON.stringify(bridgeModel);
            responseCallback(responseData);
        });
    })
 
       

安裝Demo

首頁

登入頁面

清單頁面

JS調用Java退出Activity

開源Github位址：點選打開連結