Hybrid APP混合开发(H5)

• 创建一个getRequest.js文件方便多次使用

/**
 *截取code
 */
export const  GetRequest = (data) => {
    var url = data // 获取url中"?"符后的字符串
    var theRequest = {}
    if (url.indexOf('?') !== -1) {
      var str = url.substr(1)
      var strs = str.split('&')
      for (var i = 0; i < strs.length; i++) {
        theRequest[strs[i].split('=')[0]] = (strs[i].split('=')[1])
      }
    }
    return theRequest.code
}
/**
 *判断ios还是安卓
 */
export const  browser = () => {
  var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
       //这个是安卓操作系统
       return true
    }
    if (isIOS) {
　　　　//这个是ios操作系统
      return false
    }
}
/**
 *判断微信浏览器还是外部浏览器
 */
export const  isWeiXin = () => {
  var ua = window.navigator.userAgent.toLowerCase();
  if(ua.match(/MicroMessenger/i) == 'micromessenger'){
      return true;
  }else{
    return false;
  }
}
  /**
   *安卓通信
  */
  // 安卓
  export const  connectWebViewJavascriptBridge = (callback) => {
    //web调提供方法给app调用
      if (window.WebViewJavascriptBridge) {
          callback(WebViewJavascriptBridge)
      } else {
          document.addEventListener(
              'WebViewJavascriptBridgeReady'
              , function() {
                  callback(WebViewJavascriptBridge)
              },
              false
          );
      }
  }
    // ios通信
  export const  setupWebViewJavascriptBridge = (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)
  }

• 当H5主动和app交互时

//先导入方法
import {
  connectWebViewJavascriptBridge,
  setupWebViewJavascriptBridge,
  browser,
  isWeiXin,
  GetRequest
} from '../../commons/getRequest';
//交互,需要用的时候触发方法
//使用回调bridge的callHandler方法
//params为传递过去的数据，IfShare为和app约好的交互key名
share () {
   let params = {
      type: 'activity_info_customization'
    }
    if (browser()) {
      connectWebViewJavascriptBridge(bridge => {
        bridge.callHandler('IfShare', params, data => {})
      })
    } else {
      setupWebViewJavascriptBridge(bridge => {
        bridge.callHandler('IfShare', params, data => {})
      })
    }
 }

• 当app主动和H5交互时

//先导入方法
import {
  connectWebViewJavascriptBridge,
  setupWebViewJavascriptBridge,
  browser,
  isWeiXin,
  GetRequest
} from '../../commons/getRequest';
//直接执行
//使用回调bridge的registerHandler方法
 if(browser()){
     connectWebViewJavascriptBridge(bridge => {
       // 初始化
       bridge.init((message, responseCallback) => {
         var data = {
           'Javascript Responds': 'Wee!'
         }
         responseCallback(data)
       })
       bridge.registerHandler("shareMajorSuitTop", data => {
         this.shareshow2 = !this.shareshow2
       });
     })
 }else{
   setupWebViewJavascriptBridge(bridge => {
     bridge.registerHandler('shareMajorSuitTop', data => {
       this.shareshow2 = !this.shareshow2
     })
   })

 }

• app和H5交互如果需要获取回调需init

connectWebViewJavascriptBridge(bridge => {
//需要bridge.init
 bridge.init((message, responseCallback) => {
   var data = {
     'Javascript Responds': 'Wee!'
   }
   responseCallback(data)
 })
 bridge.callHandler('IfShare', {}, data => {
   //data就是回调
 })
})