android與h5交互,android h5調(diào)用android

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

判斷設(shè)備

在利川等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒ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)營銷,成都外貿(mào)網(wǎng)站制作,利川網(wǎng)站建設(shè)費(fèi)用合理。

JS與IOS交互方式一：WKScriptMessageHandler

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

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

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

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

Android端交互

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

h5與APP交互方式

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

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

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

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

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

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

以onShare()方法為例：

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

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

里面可以傳參給APP 的

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

具體為

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

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

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

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

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

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

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

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

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

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

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

H5必知必會之與App交互

奇技指南

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

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

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

移動端網(wǎng)頁運(yùn)行在手機(jī)應(yīng)用內(nè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)頁的界面和接口（神奇的是，英文Interface，既可以翻譯成“界面”也可以翻譯成“接口”）。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)說一下用戶點(diǎn)擊“下一步”按鈕，App調(diào)用save_form的場景。此時也分兩種情況：

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

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

本文介紹了JS與App交互的幾種模式，而且只討論了JS端的實(shí)現(xiàn)。在開發(fā)實(shí)踐中，團(tuán)隊(duì)各端總會面臨哪一端主導(dǎo)的問題。本文展示的參考實(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ù)邏輯的變更不會蔓延到App。畢竟相對于H5，App的安裝部署模式會造成多版本共存問題，需要盡可能控制新版本。假如由App端主導(dǎo)，將邏輯封裝在App端，勢必造成版本不受控，給整個項(xiàng)目或產(chǎn)品埋下隱患。

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

H5&&Android交互

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

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

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

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

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

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

廣告

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