h5頁面與原生app頁面交互

兩端交互安卓：https://github.com/lzyzsd/JsBridge

IOS：https://github.com/marcuswestin/WebViewJavascriptBridge

兩者一起用的話會起沖突，需要判斷一下是什么終端，然后分別調用，

  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終端

以下為安卓和ios調用原生app端開通vip的頁面，‘AndroisVipFun’，‘IosisVipFun’這兩個為安卓和ios定義的函數名稱供web端頁面調用，（這里是不需要傳遞參數的）

 ...}else if(isAndroid){
            window.WebViewJavascriptBridge.callHandler('AndroisVipFun');
        }else if(isiOS){
          // alert('IOS不是VIP,跳去VIP頁面')
          this.setupWebViewJavascriptBridge(function(bridge) {
            bridge.callHandler('IosisVipFun',function(){
            })
          })
        }

如需要傳遞參數則可以把參數像下面定義好，（傳遞的格式雙方定義好即可）,參數根在函數名后面，后面也可以在跟一個回調函數

    var params =  {"orderCount": this.seleCardNum,"orderPrice":this.cardPrice,"orderAddress":this.detailAddress}
　　...
　　...

  window.WebViewJavascriptBridge.callHandler('AndroisVipFun',params);

app端調用web頁面函數操作

以下為ios必須要加入的一段代碼，上面調原生方法時有用到。

  setupWebViewJavascriptBridge:function(callback) {
      // ios處理
      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 = 'wvjbscheme://__BRIDGE_LOADED__';
      document.documentElement.appendChild(WVJBIframe);
      setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

安卓的則需要加入如下代碼：

  connectWebViewJavascriptBridge:function(callback) {
      //web調提供方法給app調用
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'
                , function() {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    },

 

當app原生端需要給我反回數據時則需要用到上面兩段代碼，web端定義函數供原生app端調用

下面為安卓調用，web定義了一個funParam函數名，告訴原生app凋，同時data接收傳過來的參數去獲取相應的數據

  if(isAndroid){
        this.connectWebViewJavascriptBridge(function(bridge) {
          //web定義一個funParam方法讓app調用data接收app傳過來的參數（uid token）
            bridge.registerHandler("funParam", function(data) {
                var arrData=[]
                arrData=data.split(',');
                _this.uid=arrData[1]
                _this.token=arrData[0]

                Vue.http.options.emulateJSON = true
                _this.$http.post(rootPathssb,ProductBasePara).then((res) => {
                  res = res.body
                  _this.isDredge=res.body.isDredge
                })
            });
        })
      }

ios則如下：接到到的參數處理方法相同，可以單拿出來寫個通用函數。

else{
        this.setupWebViewJavascriptBridge(function(bridge) {
          bridge.registerHandler("funParamIos", function(data) {
            var arrData=[]
             arrData=data.split(',');
             _this.uid=arrData[0]
             _this.token=arrData[1]
           
              Vue.http.options.emulateJSON = true
              _this.$http.post(rootPathssb,ProductBasePara).then((res) => {
                res = res.body
                _this.isDredge=res.body.isDredge
              })
          });
        })
      }