JSBridge

hybrid存在的意义

1. 可以快速迭代开发
2. 体验流畅
3. 减少开发成本，双端共用一套代码

webview

webview是app的一个组件，用来加载h5页面，即一个小型的浏览器内核

JS和客户端通信的基本形式

JS访问客户端能力，传递参数和回调函数
客户端通过回调函数返回内容

手写一个JsBridege

var jwl
!function(e, n) {
    n(e)
}(window, function(e) {
// 不用理解都是调用开源的WebViewJavascriptBridge
function setupWebViewJavascriptBridge(callback) {
    if (e.WebViewJavascriptBridge) {
      return callback(e.WebViewJavascriptBridge);
    }
    if (e.WVJBCallbacks) {
      return e.WVJBCallbacks.push(callback);
    }
    e.WVJBCallbacks = [callback];

    var iframe = doc.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    doc.documentElement.appendChild(iframe);
    setTimeout(function() {
      doc.documentElement.removeChild(iframe)
    }, 0)
  }
  // 不用理解都是调用开源的WebViewJavascriptBridge
  function invoke(fun, params, cb) {
    if (!params) params = {}
    setupWebViewJavascriptBridge(function(bridge) {
      bridge.callHandler(fun, params, function(res) {
        cb && cb(res)
      })
    })
  }
  
  var doc = e.document,
    ua = navigator.userAgent.toLowerCase(),
    isAndroid = -1 != ua.indexOf("android"),
    isIOS = -1 != ua.indexOf("iphone") || -1 != ua.indexOf("ipad"),
    apiList = {
        isAndroid,
        isIOS,
        // 显示右上角菜单
        showOptionMenu: function(e) {
          invoke('showOptionMenu', {
            menuList: e.menuList
          })
        },
    }
  return apiList    
})

JS调用

// 显示app菜单
jwl.showOptionMenu({
  menuList: [
    'menuItem:share:appMessage',
    'menuItem:share:timeline',
    'menuItem:refresh'
  ]
})