網(wǎng)頁與原生 app 如何交互
想想平時(shí)用的 App，你非常確信在瀏覽一個(gè)網(wǎng)頁，然而需要登錄時(shí)，它卻喚起了你手機(jī)里的 QQ 或是微信，你不再需要輸入帳號和密碼就可以讓你瀏覽的網(wǎng)頁獲取你的登錄信息，這一切只發(fā)生在你指尖的兩次點(diǎn)擊。
而在手機(jī)上，網(wǎng)頁越來越炫酷，你都很難區(qū)分你在點(diǎn)擊的是一個(gè)原生界面（指 Native 應(yīng)用程序，說人話就是 android app 或 ios 應(yīng)用）或僅僅是一個(gè) H5 頁面。你的操作一直穿梭在網(wǎng)頁與原生界面之間，比如一個(gè)網(wǎng)頁中的電話號碼，點(diǎn)擊就可以撥打電話，這種網(wǎng)頁和 app 交互這一切是如何實(shí)現(xiàn)的呢？
這項(xiàng)能力在安卓中叫做 Js2Java（ios 上也提供類似的技術(shù)），很好理解，從 Js 到 Java，從網(wǎng)頁到 app，他們是雙向通信，可互相調(diào)用的，市面上大量的 App 程序，都在利用這項(xiàng)技術(shù)，微信更是本質(zhì)上利用這項(xiàng)技術(shù)打造了公眾帳號整個(gè)體系，使得創(chuàng)業(yè)者用一個(gè)簡簡單單的網(wǎng)頁就打通了帳號、身份、支付、客服、售后等一系列操作，雖然簡單，但是真的將移動(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 語言編寫的，而網(wǎng)頁中則運(yùn)行著一些 Html、Javascript 編寫的代碼，雖然 Java 和 Javascript 名字看起來像親哥倆，但它們其實(shí)沒有一毛錢關(guān)系，一個(gè)是編譯型語言，一個(gè)是解釋性語言，不多擴(kuò)展，說不上哪天我就會(huì)寫寫編譯型和解釋性語言的區(qū)別。Android 的 App 是通過 WebView（請親理解成一個(gè)組件，想象 WebView 就是一個(gè)沒有任何操作按鈕的瀏覽器，你輸入 baidu.com 他就打開了百度的頁面）來展示一個(gè)網(wǎng)頁的，同時(shí) WebView 為網(wǎng)頁和原生 App 建立一個(gè)橋梁，讓網(wǎng)頁和原生 App 能夠看到彼此暴露的一些方法，從而達(dá)到互相操作的目的。
當(dāng)然，這些操作是需要前端頁面和終端程序互相協(xié)商的。雖然很多 App 遵守了一些相同的原則，使網(wǎng)頁在不同的 APP 中都能具備相同的能力，但是如果你看到同一個(gè)網(wǎng)頁在一個(gè) App 中能夠調(diào)用一些安卓系統(tǒng)的能力，而在另一個(gè) APP 中卻沒有對應(yīng)的能力也不要覺得奇怪（找對應(yīng) App 的開發(fā)勾兌一下就好了）。
一個(gè)原生應(yīng)用為網(wǎng)頁開放的能力越多，網(wǎng)頁對原生系統(tǒng)的操作能力就越強(qiáng)，就越能做出逼近原生應(yīng)用的體驗(yàn)。但是，這卻是一把雙刃劍，因?yàn)樵?App 開放的能力有可能會(huì)被惡意的頁面利用，對用戶造成傷害，如何控制能力的開放，也是需要產(chǎn)品和開發(fā)一起思考的問題。例如微信是一個(gè)終端能力的宿主，擁有支付，登錄，分享，獲取 App 信息等能力，并以 Js 接口的形式提供給前端頁面使用，前端開發(fā)則需要在微信申請對應(yīng)的 Js 接口使用權(quán)限，才能夠在微信中正常使用對應(yīng)的能力
最后總結(jié)一下，網(wǎng)頁塑造界面的優(yōu)勢在于靈活，隨時(shí)可以更新，而原生 APP 塑造的界面則能夠提供更流暢的用戶體驗(yàn)，但是卻無法熱更新，只能依靠發(fā)布版本來提供新功能。通過上面說的這種技術(shù)，就可以利用各自的優(yōu)勢，規(guī)避各自的劣勢來提供更好用戶體驗(yàn)，例如在微信中購物的展示是網(wǎng)頁形式的，方便運(yùn)營快速更新，通過 Js 接口調(diào)用起原生的支付界面，給用戶更流暢的支付體驗(yàn)，提高支付成功率。
