├── JsBridge.js
└── README.md


/JsBridge.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 函数描述：js调用webview事件
 3 |  *
 4 |  * jsBridge.callHandler(method, data, callBack(response));
 5 |  * @param method {string} 方法名
 6 |  * @param data {Object} 参数
 7 |  * @return {Object} 回调
 8 |  */
 9 | 
10 | /**
11 |  * 函数描述：webView调用JS事件
12 |  *
13 |  * jsBridge.registerHandler(method, callBack(response));
14 |  * @param method {string} 方法名
15 |  * @return {Object} 回调
16 |  */
17 | 
18 | var JsBridge = {
19 |     install: function (Vue) {
20 |         Object.defineProperty(Vue.prototype, 'JsBridge', { value: JsBridge })
21 |     },
22 |     init: function (callback) {
23 |         if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
24 |         if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
25 |         window.WVJBCallbacks = [callback];
26 |         var WVJBIframe = document.createElement('iframe');
27 |         WVJBIframe.style.display = 'none';
28 |         WVJBIframe.src = 'https://__bridge_loaded__';
29 |         document.documentElement.appendChild(WVJBIframe);
30 |         setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
31 |     },
32 | 
33 |     registerHandler: function (name, fun) {
34 |         this.init(function (bridge) {
35 |             bridge.registerHandler(name, fun);
36 |         })
37 |     },
38 | 
39 |     callHandler: function (name, data, fun) {
40 |         this.init(function (bridge) {
41 |             bridge.callHandler(name, data, fun);
42 |         })
43 |     }
44 | }
45 | 
46 | 
47 | export default JsBridge
48 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue-JsBridge
 2 | JsBridge for Vue
 3 |   
 4 | `android 4.0+`  ,  `ios8.0+`  测试通过
 5 | 
 6 | ## 引入  
 7 | main.js:  
 8 | ```
 9 | import JsBridge from './你的路径/jsBridge'
10 | Vue.use(JsBridge)
11 | ```
12 |   
13 | ## 使用
14 | component.vue:  
15 | ```
16 | ...
17 | mounted() {
18 |     this.JsBridge.registerHandler(
19 |         'testJs',//注册的方法名，供原生调用
20 |         (data, responseCallback) => {
21 |         data = JSON.stringify(data)//收到原生发来的数据
22 |         ...
23 |         responseCallback("js say: got it!")//处理完成后返回给原生
24 |     })
25 | },
26 | methods:{
27 |     showToast(){
28 |         this.JsBridge.callHandler(
29 |             'toast',//原生声明的函数名称
30 |             { data: `处理成功` },//发送给原生的数据
31 |             (res) => {
32 |                 res = JSON.parse(res)//原生处理完成后返回的数据
33 |                 ...
34 |             }
35 |         )
36 |     }
37 | }
38 | ...
39 | ```
40 |   
41 | ## 其他  
42 | -  更多 `Obj-C` 与 `JavaScript` 交互请参阅  [WebViewJavascriptBridge](//github.com/marcuswestin/WebViewJavascriptBridge)  
43 | -  真机调试可以使用 `android` 系统设备连接电脑打开 `chrome` 的 [chrome://inspect/#devices](chrome://inspect/#devices) 进行调试
44 | 


--------------------------------------------------------------------------------