给产品经理讲技术丨网页与原生App如何交互

想想平时用的App，你非常确信在浏览一个，然而需要登录时，它却唤起了你手机里的或是，你不再需要输入帐号和密码就可以让你浏览的获取你的登录信息，这一切只发生在你指尖的两次点击。而在手机上，网页越来越炫酷，你都很难区分你在点击的是一个原生界面（指Native应用程序，说人话就是android app或ios应用）或仅仅是一个H5页面。你的操作一直穿梭在网页与原生界面之间，比如一个网页中的电话号码，点击就可以拨打电话，这种网页和app交互这一切是如何实现的呢？

这项能力在安卓中叫做Js2Java（ios上也提供类似的技术），很好理解，从Js到Java，从网页到app，他们是双向通信，可互相调用的，市面上大量的App程序，都在利用这项技术，更是本质上利用这项技术打造了公众帐号整个体系，使得创业者用一个简简单单的网页就打通了帐号、身份、支付、客服、售后等一系列操作，虽然简单，但是真的将移动互联网的Web生态囊括了更广阔的内容，也是移动互联网较PC互联网更优越、更猛烈的点之一。

以Android系统为例，Android手机上的App是使用Java语言编写的，而网页中则运行着一些Html、Javascript编写的代码，虽然Java和Javascript名字看起来像亲哥俩，但它们其实没有一毛钱关系，一个是编译型语言，一个是解释性语言，不多扩展，说不上哪天我就会写写编译型和解释性语言的区别。Android的App是通过WebView（请亲理解成一个组件，想象WebView就是一个没有任何操作按钮的浏览器，你输入baidu.com他就打开了百度的页面）来展示一个网页的，同时WebView为网页和原生App建立一个桥梁，让网页和原生App能够看到彼此暴露的一些方法，从而达到互相操作的目的。

当然，这些操作是需要前端页面和终端程序互相协商的。虽然很多App遵守了一些相同的原则，使网页在不同的APP中都能具备相同的能力，但是如果你看到同一个网页在一个App中能够调用一些安卓系统的能力，而在另一个APP中却没有对应的能力也不要觉得奇怪（找对应App的开发勾兑一下就好了）。

一个原生应用为网页开放的能力越多，网页对原生系统的操作能力就越强，就越能做出逼近原生应用的体验。但是，这却是一把双刃剑，因为原生App开放的能力有可能会被恶意的页面利用，对用户造成伤害，如何控制能力的开放，也是需要产品和开发一起思考的问题。例如微信是一个终端能力的宿主，拥有支付，登录，分享，获取App信息等能力，并以Js接口的形式提供给前端页面使用，前端开发则需要在微信申请对应的Js接口使用权限，才能够在微信中正常使用对应的能力。

最后总结一下，网页塑造界面的优势在于灵活，随时可以更新，而原生APP塑造的界面则能够提供更流畅的用户体验，但是却无法热更新，只能依靠发布版本来提供新功能。通过上面说的这种技术，就可以利用各自的优势，规避各自的劣势来提供更好用户体验，例如在微信中购物的展示是网页形式的，方便运营快速更新，通过Js接口调用起原生的支付界面，给用户更流畅的支付体验，提高支付成功率。