想想平時用的 App，你非常確信在瀏覽一個網(wǎng)頁，然而需要登錄時，它卻喚起了你手機里的 QQ 或是微信，你不再需要輸入帳號和密碼就可以讓你瀏覽的網(wǎng)頁獲取你的登錄信息，這一切只發(fā)生在你指尖的兩次點擊。
 

而在手機上，網(wǎng)頁越來越炫酷，你都很難區(qū)分你在點擊的是一個原生界面（指 Native 應用程序，說人話就是 android app 或 ios 應用）或僅僅是一個 H5 頁面。你的操作一直穿梭在網(wǎng)頁與原生界面之間，比如一個網(wǎng)頁中的電話號碼，點擊就可以撥打電話，這種網(wǎng)頁和 app 交互這一切是如何實現(xiàn)的呢？

這項能力在安卓中叫做 Js2Java（ios 上也提供類似的技術），很好理解，從 Js 到 Java，從網(wǎng)頁到 app，他們是雙向通信，可互相調(diào)用的，市面上大量的 App 程序，都在利用這項技術，微信更是本質(zhì)上利用這項技術打造了公眾帳號整個體系，使得創(chuàng)業(yè)者用一個簡簡單單的網(wǎng)頁就打通了帳號、身份、支付、客服、售后等一系列操作，雖然簡單，但是真的將移動互聯(lián)網(wǎng)的 Web 生態(tài)囊括了更廣闊的內(nèi)容，也是移動互聯(lián)網(wǎng)較 PC 互聯(lián)網(wǎng)更優(yōu)越、更猛烈的點之一。

以 Android 系統(tǒng)為例，Android 手機上的 App 是使用 Java 語言編寫的，而網(wǎng)頁中則運行著一些 Html、Javascript 編寫的代碼，雖然 Java 和 Javascript 名字看起來像親哥倆，但它們其實沒有一毛錢關系，一個是編譯型語言，一個是解釋性語言，不多擴展，說不上哪天我就會寫寫編譯型和解釋性語言的區(qū)別。Android 的 App 是通過 WebView（請親理解成一個組件，想象 WebView 就是一個沒有任何操作按鈕的瀏覽器，你輸入 baidu.com 他就打開了百度的頁面）來展示一個網(wǎng)頁的，同時 WebView 為網(wǎng)頁和原生 App 建立一個橋梁，讓網(wǎng)頁和原生 App 能夠看到彼此暴露的一些方法，從而達到互相操作的目的。

當然，這些操作是需要前端頁面和終端程序互相協(xié)商的。雖然很多 App 遵守了一些相同的原則，使網(wǎng)頁在不同的 APP 中都能具備相同的能力，但是如果你看到同一個網(wǎng)頁在一個 App 中能夠調(diào)用一些安卓系統(tǒng)的能力，而在另一個 APP 中卻沒有對應的能力也不要覺得奇怪（找對應 App 的開發(fā)勾兌一下就好了）。

一個原生應用為網(wǎng)頁開放的能力越多，網(wǎng)頁對原生系統(tǒng)的操作能力就越強，就越能做出逼近原生應用的體驗。但是，這卻是一把雙刃劍，因為原生 App 開放的能力有可能會被惡意的頁面利用，對用戶造成傷害，如何控制能力的開放，也是需要產(chǎn)品和開發(fā)一起思考的問題。例如微信是一個終端能力的宿主，擁有支付，登錄，分享，獲取 App 信息等能力，并以 Js 接口的形式提供給前端頁面使用，前端開發(fā)則需要在微信申請對應的 Js 接口使用權限，才能夠在微信中正常使用對應的能力

最后總結一下，網(wǎng)頁塑造界面的優(yōu)勢在于靈活，隨時可以更新，而原生 APP 塑造的界面則能夠提供更流暢的用戶體驗，但是卻無法熱更新，只能依靠發(fā)布版本來提供新功能。通過上面說的這種技術，就可以利用各自的優(yōu)勢，規(guī)避各自的劣勢來提供更好用戶體驗，例如在微信中購物的展示是網(wǎng)頁形式的，方便運營快速更新，通過 Js 接口調(diào)用起原生的支付界面，給用戶更流暢的支付體驗，提高支付成功率。