cocos客户端调用原生方法

在现实的开发过程中，会遇到一些，在APP里面，集成游戏的功能。

APP开发，可能是安卓，也可能是IOS，需要把原生和客户端的方法，

能够相互调用，写一个方法，供开发者参考：

jsbridge.js方法：

function setupWebViewJavascriptBridge(callback) {
    if (/android/.test(navigator.userAgent.toLowerCase())) {
        if (window.WebViewJavascriptBridge) {
            callback(window.WebViewJavascriptBridge);
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady',
                function() {
                    callback(window.WebViewJavascriptBridge);
                },
                false
            );
        }
    } else if (/ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())) {
        if (window.WebViewJavascriptBridge) {
            return callback(window.WebViewJavascriptBridge);
        }
        if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
        }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() {
            document.documentElement.removeChild(WVJBIframe);
        }, 100);
    }
}
setupWebViewJavascriptBridge(function(bridge) {
    if (/android/.test(navigator.userAgent.toLowerCase())) {
        bridge.init(function(message, responseCallback) {
            // 'JS got a message', message
            var data = {
                'Javascript Responds': '测试中文!'
            };

            if (responseCallback) {
                // 'JS responding with', data
                responseCallback(data);
            }
        });
    }
});
// 初始化jsbridge
function setbridge(funName, dataJson, callback) {
    setupWebViewJavascriptBridge(function(bridge) {
        bridge.registerHandler(funName, function(data, responseCallback) {
            console.log(' js load data ', data);
            // '注册函数，从app拿到的数据', data
            callback && callback(data);
            //var responseData = dataJson;
            // 'js返回给app的数据', responseData
            //console.log(responseData);
            //responseCallback(responseData);
        });
    });
}

function getbridge(funName, dataJson, callback) {
    setupWebViewJavascriptBridge(function(bridge) {
        bridge.callHandler(funName, dataJson, function(response) {
            callback && callback(response);
        });
    });
}

export { setbridge, getbridge };

在需要导入的文件中，直接导入：

调用方法如下：

// 导入接口方法
import { setbridge, getbridge } from 'jsbridge';

// 客户端调用原生，方法名称，字符串， 回调函数
getbridge('jsCallPhoneArg', 'token接口', (data) => {
      data = JSON.parse(data);      // 一些原生数据可能是json格式，根据实际情况自行调整        
};
 
// 原生调用客户端
var self = this;
// 变色接口
setbridge('phoneChangeDDSProgress', '变色接口', (data) => {
    ServerData.glory_time = data;     // 原生给客户端传值
    self.visibleGreen();   // 客户端方法，在这里如果用this，作用域指向会出问题    
});

// 也可以从客户端直接传数据给原生 ServerData.data为数据
getbridge('jsCallPhoneGiftDatas', ServerData.data, (data) => {
    console.log("给原生端发送数据");
});

参考文档：https://www.cnblogs.com/zhangycun/p/10775087.html