├── package.json
├── .gitignore
├── LICENSE
├── README.md
└── vue-bridge-webview.js


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bridge-webview",
 3 |   "version": "1.1.0",
 4 |   "description": "javascript bridge android/ios webview",
 5 |   "main": "vue-bridge-webview.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/cmp-cc/vue-bridge-webview.git"
12 |   },
13 |   "keywords": [
14 |     "javascript",
15 |     "webapp",
16 |     "android",
17 |     "ios",
18 |     "bridge",
19 |     "webview"
20 |   ],
21 |   "author": "cmp-cc",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/cmp-cc/vue-bridge-webview/issues"
25 |   },
26 |   "homepage": "https://github.com/cmp-cc/vue-bridge-webview#readme"
27 | }
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # nyc test coverage
18 | .nyc_output
19 | 
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 | 
23 | # node-waf configuration
24 | .lock-wscript
25 | 
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 | 
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 | 
33 | # Optional npm cache directory
34 | .npm
35 | 
36 | # Optional REPL history
37 | .node_repl_history
38 | 
39 | # gnore file
40 | index.html
41 | .DS_Store
42 | .idea
43 | version
44 | npm-debug.log


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # vue-bridge-webview
 3 | 
 4 | javascript bridge android/ios webview
 5 | 
 6 | ## Installation
 7 | 
 8 | ### Browser
 9 | 
10 | ```
11 |   <script src="https://unpkg.com/vue/dist/vue.js"></script>
12 |   <script src="https://unpkg.com/vue-bridge-webview@1.1.0/vue-bridge-webview.js"></script>
13 | ```
14 | 
15 | ### Package Managers
16 | 
17 | ```sh
18 | npm install vue-bridge-webview --save
19 | 
20 | import Vue from 'vue'
21 | import VueBridgeWebview from 'vue-bridge-webview'
22 | Vue.use(VueBridgeWebview)
23 | 
24 | // set default config 
25 | VueBridgeWebview.config(0,true);
26 | ```
27 | 
28 | ## Api
29 | 
30 | syntax format: **[this | Vue | window].$bridge.[method]**
31 | * Set global config
32 | ```
33 | $bridge.config(handleDelayTime,silent); // default handleDelayTime = 0 * 1000,silent = false 
34 | ```
35 | * Android/IOS invoke JS
36 | ```
37 | $bridge.registerHandler : function(name, registerCallback) // callback name, callback function
38 | 
39 | example: refersh page view
40 | [this|Vue|window].$bridge.registerHandler("refreshPage",function(){
41 |                               document.location.reload();
42 |                           })
43 | ```
44 | * JS invoke Android/IOS
45 | ```
46 | $bridge.callHandler: function(name,params,callback) // callback name, request params, callback function
47 | 
48 | example: get userInfo
49 | [this|Vue|window].$bridge.callHandler('getUserInfo',{},function(data){
50 |            ... 
51 |         })
52 | ```
53 | 
54 | ## License
55 | [MIT](http://opensource.org/licenses/MIT)
56 | Copyright (c) 2016-present, cmp-cc


--------------------------------------------------------------------------------
/vue-bridge-webview.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Vue Bridge Webview v1.1.0
  3 |  * https://github.com/cmp-cc/vue-bridge-webview
  4 |  *
  5 |  * Copyright 2016, cmp-cc
  6 |  * Released under the MIT license
  7 |  */
  8 | 
  9 | (function() {
 10 | 
 11 |   /**
 12 |    *  vue-bridge-webview config
 13 |    *
 14 |    * @type {{bridgeWebViewDelay: number}}
 15 |    */
 16 |   var bridgeConfig = {
 17 |     bridgeWebViewDelay : 0,
 18 |     callHandle : {}, // bridge android / ios
 19 |     silent : false
 20 |   }
 21 | 
 22 |   var $bridge = {
 23 |     registerHandler : function (name,callback) {
 24 |       if(bridgeConfig.silent){
 25 |         console.log(name,' register handler failure')
 26 |       }
 27 |     },
 28 |     callHandler : function (name, params, callback) {
 29 |       if(bridgeConfig.silent){
 30 |         console.log(name,' call handler webView failure')
 31 |       }
 32 |     }
 33 |   };
 34 | 
 35 | // ============ device init operation start ===========
 36 | 
 37 |   /* setup WebView Javascript Bridge for ios , ios 初始化 */
 38 |   function setupWebViewJavascriptBridge(callback) {
 39 |     if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
 40 |     if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
 41 |     window.WVJBCallbacks = [callback];
 42 |     var WVJBIframe = document.createElement('iframe');
 43 |     WVJBIframe.style.display = 'none';
 44 |     WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
 45 |     document.documentElement.appendChild(WVJBIframe);
 46 |     setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
 47 |   }
 48 | 
 49 |   /* 用于创建桥接对象的函数 , android 初始化 */
 50 |   function connectWebViewJavascriptBridge(callback) {
 51 |     //如果桥接对象已存在，则直接调用callback函数
 52 |     if (window.WebViewJavascriptBridge) {
 53 |       callback(WebViewJavascriptBridge)
 54 |     }
 55 |     //否则添加一个监听器来执行callback函数
 56 |     else {
 57 |       document.addEventListener('WebViewJavascriptBridgeReady', function () {
 58 |         callback(WebViewJavascriptBridge)
 59 |       }, false)
 60 |     }
 61 |   }
 62 | 
 63 |   /* device detect for ios/android */
 64 |   
 65 |   if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
 66 |     setupWebViewJavascriptBridge(function(bridge){
 67 |       $bridge = bridge
 68 |     })
 69 |   }else if(/(Android)/i.test(navigator.userAgent)) {
 70 |    connectWebViewJavascriptBridge(function(bridge){
 71 |      $bridge = bridge
 72 |    })
 73 |   }
 74 | 
 75 | // ==============device init operation end ============
 76 | 
 77 |   var VueBridgeWebView = {
 78 | 
 79 |     install: function(Vue) {
 80 |       Vue.prototype.$bridge = this
 81 |       Vue.bridge = this
 82 | 
 83 |       // config
 84 |       bridgeConfig.silent = Vue.config.silent
 85 |     },
 86 | 
 87 |     config : function(bridgeWebViewDelay,silent) {
 88 |       if(bridgeWebViewDelay) {
 89 |         bridgeConfig.bridgeWebViewDelay = bridgeWebViewDelay;
 90 |       }
 91 |       if(silent) {
 92 |         bridgeConfig.silent = silent;
 93 |       }
 94 |     },
 95 | 
 96 |     /**
 97 |      *  Android / IOS 调用JS,需要明确调用的`function名称` .
 98 |      *
 99 |      *
100 |      * @param name `function name`
101 |      * @param registerCallback 回调的响应事件
102 |      */
103 |     registerHandler : function(name, registerCallback){
104 |       if($bridge['registerHandler']){
105 | 
106 |         setTimeout(function(){
107 |           $bridge.registerHandler(name,registerCallback)
108 |         },bridgeConfig.bridgeWebViewDelay)
109 | 
110 |       }else{
111 |         console.log("don't built-in WebView invoking ",name,'{registerHandler}')
112 |       }
113 |     },
114 | 
115 |     /**
116 |      *  JS 调用 Android / IOS
117 |      *
118 |      *  name: 回调名称, android/ios 名称 ,eg: 'getUserInfo'
119 |      *  params 请求参数, eg: { 'userId' : 1}
120 |      *  callback: response(响应函数)
121 |      *
122 |      *  eg: this.$bridge.callHandler('getUserInfo',{'userId':1},function(data){...})
123 |      *
124 |      */
125 |     callHandler: function(name,params,callback){
126 | 
127 |         if($bridge['callHandler']){
128 | 
129 |           $bridge.callHandler(name,params,function(data){
130 |             if(typeof callback == 'function'){
131 |               /* 解决部分系统加载延迟导致 ios/android 不响应问题 */
132 |               setTimeout(function(){
133 |                 callback(data);
134 |               },bridgeConfig.bridgeWebViewDelay)
135 |             }
136 |           })
137 | 
138 |         }else {
139 |           console.log("don't built-in WebView invoking ",name,'{callHandler}')
140 |         }
141 |     }
142 |   }
143 | 
144 |   if (typeof exports == "object") {
145 |     module.exports = VueBridgeWebView;
146 |   } else if (typeof define == "function" && define.amd) {
147 |     define([], function(){ return VueBridgeWebView; })
148 |   } else if (window.Vue) {
149 |     window.$bridge = VueBridgeWebView
150 |     Vue.use(VueBridgeWebView);
151 |   }else{
152 |     window.$bridge = VueBridgeWebView
153 |   }
154 | 
155 | })()
156 | 


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