正文

h5與原生交互的幾種方式（h5與原生交互的幾種方式有哪些）

發(fā)布時(shí)間：2023-04-27 21:27:10 稿源：創(chuàng)意嶺閱讀： 281

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于h5與原生交互的幾種方式的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國(guó)，設(shè)計(jì)相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043，或微信：1454722008

本文目錄:

1、iOS和h5交互(WKWebView,UIWebView)
2、H5與小程序數(shù)據(jù)交互
3、H5&&Android交互
4、h5掉ios原生的方法

h5與原生交互的幾種方式（h5與原生交互的幾種方式有哪些）

一、iOS和h5交互(WKWebView,UIWebView)

app 混合開(kāi)發(fā)場(chǎng)景中常常涉及到h5 和原生數(shù)據(jù)通信，大致分為2類一個(gè)是原生向 h5 主動(dòng)通信，一個(gè)是 h5 主動(dòng)向原生通信。

iOS 中加載h5的控件有2種，UIWebView 和 WKWebView,目前新提交的app 必須使用WKWebView 才能提交審核。已經(jīng)上架審核成功的app 目前沒(méi)有強(qiáng)制要求必須用WKWebView。

原生通過(guò)監(jiān)聽(tīng)url 變化實(shí)現(xiàn)，當(dāng)url 變化的時(shí)候 ,會(huì)觸發(fā)

h5 主要邏輯如下

除了通過(guò)url 變化的監(jiān)聽(tīng)外，我們還有其他方法，比如通過(guò) JSContext 向webView 注入。具體步驟如下

原生邏輯：

第一步：新建1個(gè)繼承 JSExport 的代理，新建1個(gè)繼承該協(xié)議的類，協(xié)議中 opencame 為和前端約定好的通訊方法

第二步：webview 加載成功后，在 - (void)webViewDidFinishLoad:(UIWebView *)webView 注入,注入對(duì)象名稱為 cth5bridge

第三步：h5 調(diào)用方式如下，cth5bridge 為注入對(duì)象名稱，opencame 為約定的方法

假設(shè)1個(gè)場(chǎng)景，用戶訪問(wèn)h5 界面情況下，我們要通知用戶token 要更新

原生主要邏輯

h5 主要邏輯

假設(shè)1個(gè)場(chǎng)景，用戶點(diǎn)擊1個(gè)活動(dòng)baner,通知原生以一個(gè)新的界面打開(kāi)1個(gè)外部活動(dòng)h5界面

和上面類似，我們也可以在 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 通過(guò)監(jiān)聽(tīng) url 變化來(lái)實(shí)現(xiàn)

原生主要邏輯

h5 主要邏輯

我們也可以這么做

第一步原生注冊(cè) 監(jiān)聽(tīng)方法 showH5

第二步 H5 調(diào)用和原生約定好的方法 showH5，h5 處理的時(shí)候要區(qū)分 iOS 和 android，下面只是考慮iOS

第三步原生在 - (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message 進(jìn)行監(jiān)聽(tīng)

和上面類似，假設(shè)1個(gè)場(chǎng)景通知H5 刷新用戶token

updatetoken 是和前端H5 約定好的通信方法，123是傳遞的數(shù)據(jù)，一般以 json 字符串傳遞

原生主要邏輯

H5主要邏輯

需要在windows 上綁定方法

參考鏈接： https://blog.csdn.net/dolacmeng/article/details/79623708

二、H5與小程序數(shù)據(jù)交互

功能已通過(guò)原生+vue混合開(kāi)發(fā)的方式實(shí)現(xiàn)了，現(xiàn)需要將這個(gè)功能原封不動(dòng)的搬到微信小程序。綜合各方面評(píng)估，選擇了微信小程序套webview的方式實(shí)現(xiàn)（若時(shí)間允許，建議還是通過(guò)小程序?qū)崿F(xiàn)）。

采用小程序webview的方式，可以復(fù)用大部分H5頁(yè)面，但H5調(diào)用的原生方法還是需要重新實(shí)現(xiàn)。實(shí)現(xiàn)方式主要分以下幾種情況（當(dāng)然也可以通過(guò)jssdk的方式去實(shí)現(xiàn) https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3 ，但不在本文討論范圍內(nèi)）：

(1) 獲取照片，可通過(guò)html的input標(biāo)簽實(shí)現(xiàn)；

(2) 獲取經(jīng)緯度，可通過(guò)webview的url拼接參數(shù)實(shí)現(xiàn)；

(3) 人臉識(shí)別，可通過(guò)H5調(diào)起刷臉小程序的方式實(shí)現(xiàn)。

下面主要描述下第3種情況的實(shí)現(xiàn)方式。

H5與小程序交互所涉及的數(shù)據(jù)部分主要包括兩塊：

(1)H5如何將數(shù)據(jù)傳給小程序？

url參數(shù)拼接。

(2)小程序如何將數(shù)據(jù)傳給H5？

wx.setStorage及wx.getStorage。

詳細(xì)流程如圖所示。

webview小程序pageA調(diào)起人臉小程序pageB，pageB回退到pageA。因?yàn)閜ageA重新設(shè)置了webview的url，其所嵌套的H5與歷史H5頁(yè)面無(wú)法進(jìn)行數(shù)據(jù)共享，導(dǎo)致業(yè)務(wù)功能無(wú)法繼續(xù)。解決辦法就是調(diào)起人臉小程序之前，在H5頁(yè)面先將必要的信息通過(guò) localStorage.setItem 保存，人臉識(shí)別結(jié)束回到H5頁(yè)面時(shí)，再通過(guò) localStorage. getItem 獲取所需要的業(yè)務(wù)數(shù)據(jù)。

三、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)化；

四、h5掉ios原生的方法

方法如下：

之前也總結(jié)過(guò)h5調(diào)用原生的方法，但是寫(xiě)的不全。像調(diào)完原生之后，原生往往會(huì)有返回值，或者根據(jù)返回值的不同回調(diào)h5的方法。

1.判斷機(jī)型。

2.調(diào)取原生方法之后的回調(diào)方法（回調(diào)的方法名跟原生約定好，你們方法名需一致，譬如此處規(guī)定接收方法為getResult），在created里面注冊(cè)一下回調(diào)的方法。

以上就是關(guān)于h5與原生交互的幾種方式相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。