Hybrid开发中关键问题是什么

想要在一个App中显示一个Html5网页的功能，其实很简单，只要一个WebView就可以了。你可以点击链接来跳转网页。像这样的功能就能叫做Hybrid开发了嘛？显然不是的。

我觉得一个Hybrid开发的App中必须要要有的功能就是Html 5页面和NativeApp怎么进行交互。比如，我点了一个Html 5页面上的一个按钮或链接，我能不能够跳转到NativeApp的某个页面；比如我点了Html 5页面上的分享按钮，我能不能调用NativeApp的分享功能；比如Html加载的时候能不能获取Native App的用户信息等等。

看下图，在网易云音乐中进入这个Html 5页面时，你点击作者：空虚小编你会进入他的主页，这个主页是Native页面，而你点击上面那个播放按钮时，云音乐会启动Native的播放界面播放音乐，你点击评论时，你会进入Native的评论页

Html 5和Native的交互

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

微信怎么做的

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

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

下面会详细讲到

网易云音乐怎么做的

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

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

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