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

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

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

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

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

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

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