浅谈android、web混合开发

Html 5和Native的交互

WebView 本来就支持js和Java相互调用，你只需要开启 WebView 的JavaScript脚本执行，然后通过代码 mWebView.addJavascriptInterface(new JsBridge(), "bxbxbai"); 向Html 5页面时注入一个Java对象，然后就可以在Html 5页面中调用Native的功能

微信怎么做的

微信应该是Hybrid 开发做的最好的App之一，它是怎么做交互的呢？

答案就是 微信JS-SDK ，去微信开发者文档中可以看到，微信JS-SDK封装了各种微信的功能，比如分享到朋友圈，图像接口，音频接口，支付接口地理位置接口等等。开发者只需要调用微信JS-SDK中的函数，然后统一由JS-SDK来调用微信中的功能，这样好处就是我写了一个Html 5的应用或网页，在Android和iOS的微信中都可以正常运行了

那么网易云音乐是怎么做的呢？我用黑科技知道了上图云音乐的界面Activity是 CommonSubjectActivity （名字好奇怪，如果要我从代码里找，我肯定找不到，因为还有一个类叫做 EmbedBrowserActivity ），我就在反编译后的云音乐代码中找相应的功能实现代码，实在没找到。不过我拿到了那个Html 5页面的地址： http://music.163.com/m/topic/194001

用Chrome打开后发现和App中显示的不一样，然后我用Charles截了进入那个Html 5的请求，发现云音乐加载的地址是 http://music.163.com/m/topic/194001?type=android ，就是加了手机系统类型

然后在我自己的App中加载这个Html 5页面就可以看到下图， @小比比说 这样的文字是可以点击跳转到个人，点击播放按钮是可以播放音乐的

也就是说，当我点击一个用户名的时候就请求跳转到 orpheus://user/30868859 ，因为WebView可以拦截跳转的url，所以App在拦截每一个url，如果host是 orpheus 的话就启动用户首页

反编译代码后，在云音乐的代码中找到了 this.mWebView.setWebViewClient(new cf(this)); 这么一句代码，进入 cf 类，发现下面代码：