jsBridge+fastclick

package-lock.json

@@ -4767,6 +4767,11 @@
       "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM=",
       "dev": true
     },
+    "fastclick": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/fastclick/-/fastclick-1.0.6.tgz",
+      "integrity": "sha1-FhYlsnsaWAZAWTa9qaLBkm0Gvmo="
+    },
     "faye-websocket": {
       "version": "0.10.0",
       "resolved": "https://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.10.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "babel-polyfill": "^6.26.0",
     "core-js": "^3.6.4",
     "dayjs": "^1.8.24",
+    "fastclick": "^1.0.6",
     "lib-flexible": "^0.3.2",
     "mescroll.js": "^1.4.2",
     "moment": "^2.24.0",

src/assets/js/JsBridge.js

+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(WebViewJavascriptBridge)
+            } else {
+                document.addEventListener(
+                    'WebViewJavascriptBridgeReady'
+                    , function () {
+                        callback(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('reloadTXLContact', function (data, responseCallback) {
+                //store.dispatch('changeTxlMember', data);
+                // data=JSON.parse(data);
+                // const date=Date.now();
+                // router.replace({ name: "addmembermanual", query: { name: data.name, linkway: data.linkway,date } });
+                responseCallback('received from native data:', data);
+            });
+        }
+
+        bridge.registerHandler('reloadTXLContact', function (data, responseCallback) {
+            //store.dispatch('changeTxlMember', data);
+            // data=JSON.parse(data);
+            // const date=Date.now();
+            // router.replace({ name: "addmembermanual", query: { name: data.name, linkway: data.linkway,date } });
+            responseCallback('received from native data:' + data);
+        });
+        readyCallback();
+    });
+}
+
+export default initJsBridge;
\ No newline at end of file

src/main.js

@@ -5,6 +5,8 @@ import store from './store'
 import 'lib-flexible/flexible'
 import './assets/css/index.css'
 import './utils/filter'
+import FastClick from 'fastclick'
+import initJsBridge from "./assets/js/JsBridge";
 
 Vue.config.productionTip = false
 
@@ -14,6 +16,45 @@ Vue.prototype.globalNavLeftArrowClick = function (callback) {
   };
 };
 
+FastClick.attach(document.body);
+
+FastClick.prototype.focus = function (targetElement) {
+  let length;
+  if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
+    length = targetElement.value.length;
+    targetElement.focus();
+    targetElement.setSelectionRange(length, length);
+  } else {
+    targetElement.focus();
+  }
+};
+
+Vue.prototype.setPageNavState = function () {
+  try {
+    initJsBridge(() => {
+      window.WebViewJavascriptBridge.callHandler("ready", null, function (
+        response
+      ) {
+        window.WebViewJavascriptBridge.callHandler(
+          "setPageNavState",
+          {
+            isShowClose: false,
+            isShowBack: false,
+            isCloseLeft: false,
+            isShowTitle: false,
+            isShowNav: false,
+            isCloseWebView: false
+          },
+          function (response) {
+            console.log("来自 ios/android的回传数据： ", response);
+          }
+        );
+      });
+    });
+  } catch (err) {
+    console.log("setPageNavState is error");
+  }
+};
 
 new Vue({
   store,

src/views/Bill/annualfee.vue

@@ -86,6 +86,7 @@ export default {
     }
   },
   mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
     this.getData();
   }

src/views/Bill/index.vue

@@ -398,14 +398,31 @@ export default {
             this.currentPerName = element.name;
             this.savePerBeginDate(element.beginDate);
             break;
-          }else{
+          } else {
             this.currentPerId = this.period[localPerIndex].id;
           }
         }
       }
+    },
+    closeWebView() {
+      try {
+        window.WebViewJavascriptBridge.callHandler(
+          "closeWebView",
+          null,
+          function(response) {
+            console.log("closeWebView 来自 ios/android的回传数据:", response);
+          }
+        );
+      } catch (err) {
+        console.log("closeWebView is error");
+      }
+    },
+    navLeftArrowClick() {
+      this.closeWebView();
     }
   },
   async mounted() {
+    this.globalNavLeftArrowClick(this.navLeftArrowClick);
     await this.loadPeriodData();
   }
 };

src/views/Bill/record.vue

@@ -97,6 +97,7 @@ export default {
     }
   },
   mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
     this.accountId = this.$route.query.accountId;
     this.title = dayjs(this.getBeginDate).format("M") + "月" + "资金记录";

src/views/Bill/sociallist.vue

@@ -113,6 +113,7 @@ export default {
     }
   },
   mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
     this.type = this.$route.query.type;
     this.currentPerId = this.$route.query.currentPerId;

src/views/Bill/socialpayment.vue

@@ -83,6 +83,7 @@ export default {
     }
   },
   mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
     this.getData();
   }

src/views/Bill/trusteeship.vue

@@ -215,6 +215,7 @@ export default {
     }
   },
   mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
     this.getData();
   }

src/views/More/detail.vue

@@ -41,6 +41,7 @@ export default {
     }
   },
   mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
     const index = parseInt(this.$route.query.index);
     const name = this.$route.query.name;

src/views/More/index.vue

@@ -103,6 +103,7 @@ export default {
     }
   },
   async mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
     await this.getData();
   }

src/views/More/record.vue

@@ -53,6 +53,7 @@ export default {
     }
   },
   mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
   }
 };

src/views/Other/detail.vue

@@ -54,6 +54,7 @@ export default {
     }
   },
   mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
     this.getData();
   }

src/views/Other/index.vue

@@ -107,6 +107,7 @@ export default {
     }
   },
   mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
     this.getData();
   }

src/views/ServiceFee/detail.vue

@@ -98,6 +98,7 @@ export default {
     }
   },
   mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
     this.getData();
   }

src/views/ServiceFee/index.vue

@@ -74,6 +74,7 @@ export default {
     }
   },
   mounted() {
+    this.setPageNavState();
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
   }
 };

src/views/test.vue

@@ -42,6 +42,7 @@ export default {
     // this.oidcCheckAccess(this.$route).then(hasAccess => {
     //   console.log("hasAccess=", hasAccess);
     // });
+    this.setPageNavState();
   },
   methods: {
     ...mapActions([

vue.config.js

 const path = require("path");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
-
 // gzip --start
 const CompressionWebpackPlugin = require("compression-webpack-plugin")
 const productionGzipExtensions = ["js", "css"]; // 需要gzip压缩的文件后缀
 
 module.exports = {
 
-    title:'业务账单',
+    title: '业务账单',
     // 部署应用时的基本 URL
     // baseUrl: process.env.NODE_ENV === "production" ? "192.168.60.110:8080" : "192.168.60.110:8080",
     publicPath: process.env.VUE_APP_PUBLIC_DIR,
@@ -44,18 +43,18 @@ module.exports = {
     // },
     pages: {
         app: {
-          entry: 'src/main.js',
-          template: 'public/index.html',
-          filename: 'index.html',
-          excludeChunks: ['silent-renew-oidc']
+            entry: 'src/main.js',
+            template: 'public/index.html',
+            filename: 'index.html',
+            excludeChunks: ['silent-renew-oidc']
         },
         silentrenewoidc: {
-          entry: 'src/silent-renew-oidc.js',
-          template: 'public/silent-renew-oidc.html',
-          filename: 'silent-renew-oidc.html',
-          excludeChunks: ['app']
+            entry: 'src/silent-renew-oidc.js',
+            template: 'public/silent-renew-oidc.html',
+            filename: 'silent-renew-oidc.html',
+            excludeChunks: ['app']
         }
-      },
+    },
 
     // 默认在生成的静态资源文件名中包含hash以控制缓存
     filenameHashing: true,
@@ -82,7 +81,7 @@ module.exports = {
     // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中
     // 如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象
     configureWebpack: config => {
-        
+
         if (process.env.NODE_ENV === "production") {
             config.plugins = config.plugins.concat([
                 new UglifyJsPlugin({
@@ -119,8 +118,8 @@ module.exports = {
                     "vue$": 'vue/dist/vue.common.js'
                 },
                 modules: [
-                    path.resolve(__dirname,'node_modules'),
-                    path.resolve(__dirname,'src/utils')
+                    path.resolve(__dirname, 'node_modules'),
+                    path.resolve(__dirname, 'src/utils')
                 ]
             }
         });