H5與原生APP交互方式 (IOS及安卓)

判斷設(shè)備

在利川等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站設(shè)計(jì),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,成都全網(wǎng)營(yíng)銷,成都外貿(mào)網(wǎng)站制作,利川網(wǎng)站建設(shè)費(fèi)用合理。

JS與IOS交互方式一：WKScriptMessageHandler

WKWebView有一個(gè)內(nèi)容交互控制器，該對(duì)象提供了通過(guò)JS向WKWebView發(fā)送消息的途徑。需要設(shè)置MessageHandler，大家把這個(gè)功能簡(jiǎn)稱為MessageHandler。

IOS具體實(shí)現(xiàn)參考： 鏈接

這里只說(shuō)js調(diào)用

JS與IOS交互方式二：WebViewJavascriptBridge交互 攔截url做事件處理，如果要傳參數(shù)，不建議用這種

Android端交互

冒號(hào)前面區(qū)分是什么功能，冒號(hào)后面是接收的參數(shù)

h5與APP交互方式

舉個(gè)簡(jiǎn)單的例子，有個(gè)需求是要和APP交互的，h5頁(yè)面里面有個(gè)分享按鈕，點(diǎn)擊之后需要調(diào)用APP原生的分享功能

app那邊寫好了一個(gè)方法是onShare( )

第一步：就是點(diǎn)擊分享好友觸發(fā)

第二步：定義onShare方法調(diào)用APP方法

isAndroid_ios（）這個(gè)函數(shù)是判斷是否是安卓或者是ios

因?yàn)榘沧亢蚷os的調(diào)用方法不同

以onShare()方法為例：

安卓：window.AndroidFunction.onShare('1'); // android

IOS：window.webkit.messageHandlers.onShare.postMessage(’1‘); //ios

里面可以傳參給APP 的

這個(gè)h5這邊很簡(jiǎn)單，只需要把方法掛載到window上，APP就能調(diào)用

具體為

H5調(diào)用Android和ios原生方法(react)

混合開(kāi)發(fā)中需要web需要和原生交互方式。

原生需要寫方法來(lái)讓H5調(diào)用，H5在window中獲取方法。

ios殼中方法全部放在webkit.messageHandlers對(duì)象中，前端調(diào)用只需要

Android中調(diào)用方法，直接在window中調(diào)用安卓給的對(duì)象

H5調(diào)用原生方法后，原生怎么回調(diào)給H5?

跟原生一樣，H5需要寫好方法，讓原生調(diào)用，這里調(diào)用就是原生直接調(diào)用了H5的方法，當(dāng)然這個(gè)方法是要全局的方法，在window對(duì)象中的。

在react中寫原生調(diào)用的方法，需要在調(diào)用的組件中componentDidMount里面添加方法：

原生方法可能多個(gè)地方使用，每次都去判斷系統(tǒng)，然后分別調(diào)用不同方法很麻煩，不是前端該有范兒。應(yīng)該在一個(gè)文件中統(tǒng)一處理，其他頁(yè)面只需要調(diào)用處理好的方法就好。

例如獲取當(dāng)前設(shè)備號(hào)，原生封裝好方法后，統(tǒng)一在一個(gè)文件中處理：

這樣在其他頁(yè)面就可以直接使用getDeviceId就可以得到得到設(shè)備號(hào)，才不管你是哪個(gè)系統(tǒng)呢。

H5必知必會(huì)之與App交互

奇技指南

2018年11月26日發(fā)表的“360 AI音箱H5開(kāi)發(fā)實(shí)踐”一文中，曾簡(jiǎn)單提到“與Native交互”。本文將就此主題深入探討H5與App交互的幾種常見(jiàn)模式。

本文內(nèi)容如下：

H5，在中國(guó)被專門用來(lái)指代開(kāi)發(fā)內(nèi)嵌于手機(jī)應(yīng)用中的網(wǎng)頁(yè)的技術(shù)，外國(guó)好像并沒(méi)有這個(gè)說(shuō)法。從技術(shù)上講，H5是HTML5即Hyper Text Markup Language（超文本標(biāo)記語(yǔ)言）第5版的簡(jiǎn)稱。而HTML只是開(kāi)發(fā)網(wǎng)頁(yè)要用到的多種技術(shù)之一。除了HTML，還要用CSS設(shè)計(jì)界面，用JavaScript實(shí)現(xiàn)交互，甚至要用Node.js實(shí)現(xiàn)服務(wù)端邏輯。為什么H5會(huì)被用來(lái)籠統(tǒng)地指代這些技術(shù)呢？我猜一是因?yàn)樗?jiǎn)單，二是移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)又恰好需要這么一個(gè)概念。

移動(dòng)端網(wǎng)頁(yè)運(yùn)行在手機(jī)應(yīng)用內(nèi)嵌的瀏覽器引擎中，這個(gè)沒(méi)有UI的內(nèi)核容器統(tǒng)稱WebView，即iPhone的UIWebView（iOS 2.0–12.0）、WKWebView（iOS 8.0+，macOS 10.10+）和Android的WebView。總之，WebView就是在手機(jī)應(yīng)用中運(yùn)行和展示網(wǎng)頁(yè)的界面和接口（神奇的是，英文Interface，既可以翻譯成“界面”也可以翻譯成“接口”）。

H5與原生應(yīng)用的交互都是通過(guò)原生應(yīng)用中的WebView實(shí)現(xiàn)的。通過(guò)這個(gè)環(huán)境，H5可以調(diào)用原生應(yīng)用注入其中的原生對(duì)象的方法，原生應(yīng)用也可以調(diào)用H5暴露在這個(gè)環(huán)境中的JavaScript對(duì)象的方法，從而實(shí)現(xiàn)指令與數(shù)據(jù)的傳輸。

比如，在Android應(yīng)用中，WebView類有一個(gè)公有方法addJavascriptInterface，簽名為：

調(diào)用這個(gè)方法可以向WebView中以指定的名稱name注入指定的Java對(duì)象object。這樣，WebView中的JavaScript就可以通過(guò)name調(diào)用object的方法。比如：

在iOS或macOS中，需要通過(guò)創(chuàng)建WKWebView類的實(shí)例在應(yīng)用中嵌入網(wǎng)頁(yè)，交互過(guò)程類似。

所謂基礎(chǔ)接口，就是首先要規(guī)定原生應(yīng)用和JS分別在WebView里注入/暴露一個(gè)什么對(duì)象：

并約定在這兩個(gè)對(duì)象上分別可以調(diào)用什么方法：

顧名思義，NativeBridge.callNative是由JS調(diào)用向Native傳遞指令或數(shù)據(jù)的方法，而JSBridge.callJS則是由Native調(diào)用向JS傳遞指令或數(shù)據(jù)的方法。方法簽名中的參數(shù)含義如下：

基礎(chǔ)接口只有兩個(gè)對(duì)象和兩個(gè)方法，JS與App間的互操作則通過(guò)action和params來(lái)擴(kuò)展和定義。

對(duì)于JS而言，雖然這里只定義了一個(gè)對(duì)象一個(gè)方法，但實(shí)踐中，可以把a(bǔ)ction對(duì)應(yīng)方法的實(shí)現(xiàn)附加到JSBridge上，只要把callJS實(shí)現(xiàn)為一個(gè)分發(fā)方法即可，比如：

這樣，所有對(duì)callJS的調(diào)用，都會(huì)轉(zhuǎn)化成對(duì)JSBridge上相應(yīng)action方法的調(diào)用，優(yōu)點(diǎn)是只需一行代碼。

另一種實(shí)現(xiàn)方式是通過(guò)switch...case語(yǔ)句實(shí)現(xiàn)調(diào)用分發(fā)，比如:

這樣實(shí)現(xiàn)的優(yōu)點(diǎn)是所有方法一目了然，當(dāng)然同樣也是把所有相關(guān)接口都附加到同一個(gè)JSBridge對(duì)象上。

以上兩種實(shí)現(xiàn)模式各有利弊。

由JS發(fā)起的單向調(diào)用App的操作，主要涉及加載URL和切換到原生界面，可對(duì)應(yīng)如下action：

loadUrl調(diào)用的參考協(xié)議如下：

這里NativeBridge是App的原生對(duì)象，其callNative方法被調(diào)用時(shí)，會(huì)收到一個(gè)對(duì)象（字典/映射）參數(shù)。根據(jù)這個(gè)參數(shù)的action屬性的值，App可知需要執(zhí)行的操作是加載URL。于是再取得params屬性中的url，發(fā)送請(qǐng)求即可。

loadContent調(diào)用的參考協(xié)議如下：

同上，這里通過(guò)params向App傳遞了必要參數(shù)，App負(fù)責(zé)切換到相應(yīng)的原生界面。

由App發(fā)起的單向調(diào)用JS的操作，主要涉及用戶點(diǎn)擊后退按鈕（），可對(duì)應(yīng)如下action：

can_back調(diào)用的參考協(xié)議如下：

此調(diào)用返回的值示例如下：

顧名思義，can_back用于App詢問(wèn)JS：在返回上一級(jí)界面前，是否彈窗提示用戶？

返回值中的can如果是true，則直接返回，不提示；如果是false，則彈出一個(gè)確認(rèn)框，請(qǐng)用戶確認(rèn)。另一個(gè)值target是與App約定的返回目標(biāo)，比如prev表示返回上一級(jí)，top表示返回頂級(jí)，等等。

雙向調(diào)用是JS先調(diào)用App，然后App在完成操作后再調(diào)用JS，雙向通常都需要傳遞數(shù)據(jù)。雙向調(diào)用主要涉及JS調(diào)用App原生組件和用戶點(diǎn)擊右上角按鈕，可對(duì)應(yīng)如下action：

loadComponent的參考協(xié)議如下：

在這個(gè)例子中，涉及JS調(diào)用App顯示其實(shí)現(xiàn)的城市選擇組件：type: 'location'，用戶選擇完城市之后，App再調(diào)用set_location，將用戶選擇的城市名稱傳給JS：

JS根據(jù)拿到的值更新界面，完成一次雙向調(diào)用。另一個(gè)例子是JS調(diào)用原生的日期選擇組件，與此類似。

為什么叫displayNextButton？因?yàn)楦鶕?jù)具體業(yè)務(wù)場(chǎng)景，可能存在如下三種情況：

displayNextButton協(xié)議的參考實(shí)現(xiàn)如下：

以上代碼示例表明，JS調(diào)用App，告訴App顯示“下一步”按鈕，但是要禁用變灰，因?yàn)閑nable: false。如果傳遞的是enable: true，那么用戶就可以點(diǎn)擊“下一步”按鈕了。點(diǎn)擊之后，App再調(diào)用JS的save_form。最后，如果不想顯示按鈕，可以傳遞name: ''。

下面重點(diǎn)說(shuō)一下用戶點(diǎn)擊“下一步”按鈕，App調(diào)用save_form的場(chǎng)景。此時(shí)也分兩種情況：

如果是JS通過(guò)App保存數(shù)據(jù)——可能因?yàn)锳pp端實(shí)現(xiàn)了數(shù)據(jù)寫入必需的加密機(jī)制——那么，JS可以在App調(diào)用save_form時(shí)將約定好的數(shù)據(jù)返回給App，由App去保存數(shù)據(jù)。

如果是JS直接保存數(shù)據(jù)，比如通過(guò)Ajax，那么在保存完數(shù)據(jù)之后，則還需要調(diào)用前面所說(shuō)的App暴露的loadUrl或loadComponent方法，以告知App切換界面。當(dāng)然這種情況下會(huì)出現(xiàn)第三次調(diào)用，但仍然屬于雙向調(diào)用。

本文介紹了JS與App交互的幾種模式，而且只討論了JS端的實(shí)現(xiàn)。在開(kāi)發(fā)實(shí)踐中，團(tuán)隊(duì)各端總會(huì)面臨哪一端主導(dǎo)的問(wèn)題。本文展示的參考實(shí)現(xiàn)就是H5端主導(dǎo)的一種實(shí)現(xiàn)形式。H5主導(dǎo)的特點(diǎn)是把主要業(yè)務(wù)邏輯都封裝到WebView中，App主要協(xié)同配合，而優(yōu)點(diǎn)是業(yè)務(wù)邏輯的變更不會(huì)蔓延到App。畢竟相對(duì)于H5，App的安裝部署模式會(huì)造成多版本共存問(wèn)題，需要盡可能控制新版本。假如由App端主導(dǎo)，將邏輯封裝在App端，勢(shì)必造成版本不受控，給整個(gè)項(xiàng)目或產(chǎn)品埋下隱患。

當(dāng)然，事無(wú)絕對(duì)。具體情況還要具體分析。而且，哪方主導(dǎo)有時(shí)候也取決多方面因素。實(shí)踐中還是要因人、因時(shí)、因勢(shì)制宜。

H5&&Android交互

JS調(diào)用Android原生方法，參數(shù)須是Java的內(nèi)置類型：int、String等，若是JavaScript對(duì)象，需字符串化，否則Android無(wú)法正確接收；

JS調(diào)用Android原生方法，返回值是內(nèi)置類型：int、String等，JS能夠正確接收。若是Java自定義類型，則JS接收不到正確數(shù)據(jù)；

JS可以通過(guò)Android原生方法的返回值獲取內(nèi)置類型的參數(shù)，如String

若需要互傳復(fù)雜類型的對(duì)象，雙方須以String對(duì)媒介，以各自語(yǔ)言的Json工具類進(jìn)行相互轉(zhuǎn)化；

分享題目：android與h5交互,android h5調(diào)用android
本文URL：http://chinadenli.net/article22/dseeecc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、營(yíng)銷型網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、微信公眾號(hào)、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)