修改iodex.html用于测试jsbridge 02

c5111d9b · 展昭 · 7659e25c · c5111d9b
Commit c5111d9b authored Aug 28, 2020 by 展昭
Showing with 189 additions and 20 deletions
public/index.html
--- a/public/index.html
+++ b/public/index.html
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport"
-    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>业务账单</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div>
-      业务账单
-    </div>
-    <!-- <div id="app"></div> -->
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+<html>
+
+<head>
+  <title>JSBridge Test</title>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
+  <script type="text/javascript" src="eruda.js"></script>
+  <script>eruda.init();</script>
+  <style type="text/css">
+    .btn {
+      background-color: #aaa;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #444444;
+      text-decoration: none;
+      margin-top: 10px;
+    }
+
+    #response {
+      background: #eeeeee;
+      word-wrap: break-word;
+      display: block;
+      outline: 1px solid #ccc;
+      padding: 5px;
+      margin: 5px;
+    }
+  </style>
+</head>
+
+<body>
+  <p style="color: red">嵌入页区域</p>
+  <p>以JSBridge的方式实现</p>
+  <button class="btn" id="getOS">setPageNavState</button>
+  <button onclick="call('setPageNavState',{
+    isShowClose: true,
+    isShowBack: false,
+    isCloseLeft: true,
+    isShowTitle: true,
+    isShowNav: true,
+    isCloseWebView: true
+  })">call method</button>
+  <pre id="response"></pre>
+
+  
+  <script type="text/javascript">
+
+    // 获取android/ios上WebViewJavascriptBridge
+    function initWebViewJSBridge(callback) {
+      if (window.WebViewJavascriptBridge) {
+        callback(window.WebViewJavascriptBridge);
+      } else {
+        document.addEventListener('WebViewJavascriptBridgeReady',
+          () => callback(window.WebViewJavascriptBridge), false);
+      }
+    }
+
+    // 获取WebViewJavascriptBridge的Promise版
+    function getWebViewJSBridge() {
+      return new Promise((resolve) => {
+        initWebViewJSBridge((bridge) => resolve(bridge));
+      });
+    }
+
+
+    // JS端调用Native方法
+    // methodName: Native暴露给JS端的方法名
+    // param: 调用Native方法时的参数
+    // 返回值: Native方法实际返回值
+    async function call(methodName, param) {
+      const bridge = await getWebViewJSBridge();
+      return new Promise((resolve) => {
+        bridge.callHandler(methodName, JSON.stringify(param), (ret) => {
+          alert(ret);
+          resolve(ret);
+        });
+      });
+    }
+
+
+
+
+
+    
+    /**
+     * 初始化jsbridge
+     * @param readyCallback 初始化完成后的回调
+     */
+    function initJsBridge(readyCallback) {
+      var u = navigator.userAgent;
+      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
+      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+
+      // 注册jsbridge
+      function connectWebViewJavascriptBridge(callback) {
+        if (isAndroid) {
+          if (window.WebViewJavascriptBridge) {
+            callback(window.WebViewJavascriptBridge)
+          } else {
+            document.addEventListener(
+              'WebViewJavascriptBridgeReady'
+              , function () {
+                callback(window.WebViewJavascriptBridge)
+              },
+              false
+            );
+          }
+          return;
+        }
+        
+
+        if (isiOS) {
+          if (window.WebViewJavascriptBridge) {
+            return callback(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)
+          }, 0)
+        }
+      }
+
+      // 调用注册方法
+      connectWebViewJavascriptBridge(function (bridge) {
+        if (isAndroid) {
+          bridge.init(function (message, responseCallback) {
+            console.log('JS got a message', message);
+            responseCallback(data);
+          });
+        }
+
+        bridge.registerHandler('jsbridge_showMessage', function (data, responseCallback) {
+          showResponse(data);
+        });
+
+        bridge.registerHandler('jsbridge_getJsMessage', function (data, responseCallback) {
+          showResponse(data);
+          responseCallback('native 传过来的是：' + data);
+        });
+
+        readyCallback();
+      });
+    }
+
+    /**
+     * 显示响应信息
+     * @param response 响应信心
+     */
+    function showResponse(response) {
+      $('#response').text(response);
+    }
+
+    /**
+     * jQuery
+     */
+    $(function () {
+      // 首先调用JSBridge初始化代码，完成后再设置其他
+      initJsBridge(function () {
+        $("#getOS").click(function () {
+          // 通过JsBridge调用原生方法，写法固定，第一个参数时方法名，第二个参数时传入参数，第三个参数时响应回调
+          window.WebViewJavascriptBridge.callHandler('setPageNavState', {
+            isShowClose: true,
+            isShowBack: false,
+            isCloseLeft: true,
+            isShowTitle: true,
+            isShowNav: true,
+            isCloseWebView: true
+          }, function (response) {
+            alert(response);
+            showResponse(response);
+          });
+        });
+      })
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file