AndroidJSBridge的原理与实现.pdfVIP

AndroidJSBridge的原理与实现 在Android中，JSBridge已经不是什么新鲜的事物了，各家的实现⽅式也略有差异。⼤多数⼈都知道WebView存在⼀个漏洞，见，虽然该 漏洞已经在Android 4.2上修复了，即使⽤@JavascriptInterface代替addJavascriptInterface，但是由于兼容性和安全性问题，基本上 我们不会再利⽤Android系统为我们提供的addJavascriptInterface⽅法或者@JavascriptInterface注解来实现，所以我们只能另辟蹊 径，去寻找既安全，⼜能实现兼容Android各个版本的⽅案。 ⾸先我们来了解⼀下为什么要使⽤JSBridge，在开发中，为了追求开发的效率以及移植的便利性，⼀些展⽰性强的页⾯我们会偏向于使⽤ h5来完成，功能性强的页⾯我们会偏向于使⽤native来完成，⽽⼀旦使⽤了h5，为了在h5中尽可能的得到native的体验，我们native层需 要暴露⼀些⽅法给js 调⽤，⽐如，弹Toast提醒，弹Dialog，分享等等，有时候甚⾄把h5的⽹络请求放着native去完成，⽽JSBridge做得好 的⼀个典型就是微信，微信给开发者提供了JSSDK，该SDK中暴露了很多微信native层的⽅法，⽐如⽀付，定位等。 那么，怎么去实现⼀个兼容Android各版本⼜具有⼀定安全性的JSBridge呢？我们知道，在WebView中，如果java要 调⽤js的⽅法，是⾮ 常容易做到的，使⽤WebView.loadUrl( “javascript:function() ”)即可，这样，就做到了JSBridge的native层调⽤h5层的单向通信，但 是h5层如何调native层呢，我们需要寻找这么⼀个通道，仔细回忆⼀下，WebView有⼀个⽅法，叫setWebChromeClient，可以设置 WebChromeClient对象，⽽这个对象中有三个⽅法，分别是onJsAlert,onJsConfirm,onJsPrompt，当js 调⽤window对象的对应的⽅ 法，即window.alert，window.confirm，window.prompt，WebChromeClient对象中的三个⽅法对应的就会被触发，我们是不是可以利 ⽤这个机制，⾃⼰做⼀些处理呢？答案是肯定的。 ⾄于js这三个⽅法的区别，可以详见w3c 。⼀般来说，我们是不会使⽤onJsAlert的，为什么呢？因为js中alert使⽤的频率还是⾮常⾼的， ⼀旦我们占⽤了这个通道，alert的正常使⽤就会受到影响，⽽confirm和prompt的使⽤频率相对alert来说，则更低⼀点。那么到底是选择 confirm还是prompt呢，其实confirm的使⽤频率也是不低的，⽐如你点⼀个链接下载⼀个⽂件，这时候如果需要弹出⼀个提⽰进⾏确 认，点击确认就会下载，点取消便不会下载，类似这种场景还是很多的，因此不能 占⽤confirm。⽽prompt则不⼀样，在Android中，⼏ 乎不会使⽤到这个⽅法，就是⽤，也会进⾏⾃定义，所以我们完全可以使⽤这个⽅法。该⽅法就是弹出⼀个输⼊框，然后让你输⼊，输⼊完 成后返回输⼊框中的内容。因此，占⽤prompt是再完美不过了。 到这⼀步，我们已经找到了JSBridge双向通信的⼀个通道了，接下来就是如何实现的问题了。本⽂中实现的只是⼀个简单的demo，如果要 在⽣产环境下使⽤，还需要⾃⼰做⼀层封装。 jsbridge://className:port/methodName?jsonObj 有⼈会问，这个port⽤来⼲嘛，其实js层调⽤native层⽅法后，native需要将执⾏结果返回给js 层，不过你会觉得通过WebChromeClient 对象的onJsPrompt⽅法将返回值返回给js不 就好了吗，其实不然，如果这么做，那么这个过程就是同步的，如果native执⾏异步操作的 话，返回值怎么返回呢？这时候port就发挥了它应有的作⽤，我们在js中调⽤native⽅法的时候，在js中注册⼀个callback，然后将该 callback在指定的位置上缓存起来，然后native层执⾏完毕对应⽅法后通过WebView.loadUrl调⽤js中的⽅法，回调对应的callback。那么 js 怎么知道调⽤哪个callback呢？于是我们需要将callback的⼀个存储位置传递过去，那么就需要native层调⽤js中的⽅法的时候将存储位 置回传给js，js再 调⽤对应存储位置上的callback，进⾏回调。于是，