cocos客户端调用原生方法

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

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

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

jsbridge.js方法：

 1 function setupWebViewJavascriptBridge(callback) {
 2     if (/android/.test(navigator.userAgent.toLowerCase())) {
 3         if (window.WebViewJavascriptBridge) {
 4             callback(window.WebViewJavascriptBridge);
 5         } else {
 6             document.addEventListener(
 7                 'WebViewJavascriptBridgeReady',
 8                 function() {
 9                     callback(window.WebViewJavascriptBridge);
10                 },
11                 false
12             );
13         }
14     } else if (/ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())) {
15         if (window.WebViewJavascriptBridge) {
16             return callback(window.WebViewJavascriptBridge);
17         }
18         if (window.WVJBCallbacks) {
19             return window.WVJBCallbacks.push(callback);
20         }
21         window.WVJBCallbacks = [callback];
22         var WVJBIframe = document.createElement('iframe');
23         WVJBIframe.style.display = 'none';
24         WVJBIframe.src = 'https://__bridge_loaded__';
25         document.documentElement.appendChild(WVJBIframe);
26         setTimeout(function() {
27             document.documentElement.removeChild(WVJBIframe);
28         }, 100);
29     }
30 }
31 setupWebViewJavascriptBridge(function(bridge) {
32     if (/android/.test(navigator.userAgent.toLowerCase())) {
33         bridge.init(function(message, responseCallback) {
34             // 'JS got a message', message
35             var data = {
36                 'Javascript Responds': '测试中文!'
37             };
38 
39             if (responseCallback) {
40                 // 'JS responding with', data
41                 responseCallback(data);
42             }
43         });
44     }
45 });
46 // 初始化jsbridge
47 function setbridge(funName, dataJson, callback) {
48     setupWebViewJavascriptBridge(function(bridge) {
49         bridge.registerHandler(funName, function(data, responseCallback) {
50             console.log(' js load data ', data);
51             // '注册函数，从app拿到的数据', data
52             callback && callback(data);
53             //var responseData = dataJson;
54             // 'js返回给app的数据', responseData
55             //console.log(responseData);
56             //responseCallback(responseData);
57         });
58     });
59 }
60 
61 function getbridge(funName, dataJson, callback) {
62     setupWebViewJavascriptBridge(function(bridge) {
63         bridge.callHandler(funName, dataJson, function(response) {
64             callback && callback(response);
65         });
66     });
67 }
68 
69 export { setbridge, getbridge };

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

调用方法如下：

 1 // 导入接口方法
 2 import { setbridge, getbridge } from 'jsbridge';
 3 
 4 // 客户端调用原生，方法名称，字符串， 回调函数
 5 getbridge('jsCallPhoneArg', 'token接口', (data) => {
 6       data = JSON.parse(data);      // 一些原生数据可能是json格式，根据实际情况自行调整        
 7 };
 8  
 9 // 原生调用客户端
10 var self = this;
11 // 变色接口
12 setbridge('phoneChangeDDSProgress', '变色接口', (data) => {
13     ServerData.glory_time = data;     // 原生给客户端传值
14     self.visibleGreen();   // 客户端方法，在这里如果用this，作用域指向会出问题    
15 });
16 
17 // 也可以从客户端直接传数据给原生 ServerData.data为数据
18 getbridge('jsCallPhoneGiftDatas', ServerData.data, (data) => {
19     console.log("给原生端发送数据");
20 });

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