正文

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

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

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

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計相關(guān)業(yè)務(wù)請撥打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 混合開發(fā)場景中常常涉及到h5 和原生數(shù)據(jù)通信，大致分為2類一個是原生向 h5 主動通信，一個是 h5 主動向原生通信。

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

原生通過監(jiān)聽url 變化實現(xiàn)，當url 變化的時候 ,會觸發(fā)

h5 主要邏輯如下

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

原生邏輯：

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

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

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

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

原生主要邏輯

h5 主要邏輯

假設(shè)1個場景，用戶點擊1個活動baner,通知原生以一個新的界面打開1個外部活動h5界面

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

原生主要邏輯

h5 主要邏輯

我們也可以這么做

第一步原生注冊監(jiān)聽方法 showH5

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

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

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

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

原生主要邏輯

H5主要邏輯

需要在windows 上綁定方法

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

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

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

采用小程序webview的方式，可以復(fù)用大部分H5頁面，但H5調(diào)用的原生方法還是需要重新實現(xiàn)。實現(xiàn)方式主要分以下幾種情況（當然也可以通過jssdk的方式去實現(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) 獲取照片，可通過html的input標簽實現(xiàn)；

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

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

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

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

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

url參數(shù)拼接。

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

wx.setStorage及wx.getStorage。

詳細流程如圖所示。

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

三、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工具類進行相互轉(zhuǎn)化；

四、h5掉ios原生的方法

方法如下：

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

1.判斷機型。

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

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