网页与原生App如何交互 | 36氪

本文来自微信公众号“给产品经理讲技术”（pm_teacher)，欢迎大家关注。

想想平时用的 App，你非常确信在浏览一个网页，然而需要登录时，它却唤起了你手机里的 QQ 或是微信，你不再需要输入帐号和密码就可以让你浏览的网页获取你的登录信息，这一切只发生在你指尖的两次点击。

而在手机上，网页越来越炫酷，你都很难区分你在点击的是一个原生界面（指 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 接口调用起原生的支付界面，给用户更流畅的支付体验，提高支付成功率。

原创文章，作者：给产品经理讲技术，如若转载，请注明出处：http://36kr.com/p/5041229.html

“看完这篇还不够？如果你也在创业，并且希望自己的项目被报道，请 戳这里 告诉我们！”