H5頁面與原生App（安卓，IOS）交互

?在客戶端項目中，同一個app會開發成兩個版本，一個是安卓版本，一個IOS版本，公司必須有兩個開發團隊（一個安卓團隊，一個IOS團隊）來進行開發，這樣一來，開發成本非常之高。所以，往往在實際項目-中，會嵌套很多H5頁面，一個H5頁面同時兼容安卓和IOS兩個系統 ，這樣一來，大大減少了開發成本，前端開發頁面就必須和原生進行交互。

專注于為中小企業提供網站制作、網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業新巴爾虎右免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了數千家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

1. 頁面開發 ? ? ?—— 前端開發人員將所有的頁面按照移動webappp進行開發，做好不同屏幕的適配（寬度100%,視口為移動端視口 (快捷方式meta:vp ?tap），字體適配rem單位，設置html根標簽的font-size然后根據媒體查詢判斷設備屏幕大小進而設置html根標簽的不同fontsize，去除移動端高亮顯示；小圖標要善于使用字體圖標（常用的字體圖標庫有阿里巴巴矢量圖），改變input標簽的默認樣式可以采用隱藏input,然后通過字體圖標來控制前面的圖標，就可以做成自己想要的圖標效果）

2.前端頁面部署 —— 設置好入口文件（原生一進來就進入的頁面，命名為index.html），部署到對應的服務器上，通過網址就能夠訪問到頁面，將網址給app客戶端開發人員，他們將app配置好環境后講頁面嵌套在app中。

3.進行數據對接：兩種對接方式（1）.前端頁面自己通過ajax去后臺拉數據，然后自己在頁面上使用再提交給后臺。前提是原生需要將對應的設備號，加密方式，請求數據所需要的各種參數通過回調函數傳遞給H5頁面，H5頁面拿到這些數據后直接調后臺的借口、獲取到數據。（2）.前端頁面不用自己去后臺拉取數據，而是通過回調函數，獲取到原生app拉取的數據，前端頁面將這些數據處理后又通過回調函數交給app，再又app發送給后臺。兩種調用的優劣比較：如果H5頁面及數據不是很多，使用第二種方式比較合理，不用H5頁面請求數據（不用封裝請求，不用加密數據），不使用框架，大大減少了頁面的大小，提高性能及用戶體驗。如果涉及到的前端頁面非常多，數據交互比較復雜的話，就必須使用第一種對接方式了，app只需要將設備號，加密規則，參數傳遞給H5，H5根據頁面需求自己向后臺拉去和請求數據，直接交互，不再通過app進行轉接，減小復雜程度。

iOS APP與H5交互的三種方法

這種方法是利用攔截webView響應的url，對url進行處理，同時把需要執行的方法名和參數都放入url中，實現app和H5之前的方法交互：

這個屬性是WKWebView才有的屬性，主要是通過WKScriptMessageHandler的代理方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 進行交互。

注意：

這兩個方法是成對出現的，每次調用了add就必須調用remove。

1.建立 WebViewJavaScriptBridge 和 WebView 之間的關系。

_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];

2.方法調用

1)oc調js方法（通過data可以傳值，通過 response可以接受js那邊的返回值 ）

2)js調oc方法（可以通過data給oc方法傳值，使用responseCallback將值再返回給js）

最后：iOS調用H5方法

UIWebView： NSString *result = [webView stringByEvaluatingJavaScriptFromString:@"javascript:add(3,5);"];

WKWebView: [self.webView evaluateJavaScript:@"show()" completionHandler:^(id _Nullable response, NSError * _Nullable error) { //TODO }];

iOS前端交互篇-H5全嵌套

有時候項目小,為了省事,是會App內全嵌套H5的,但為了使用戶體驗更好,App內也會做一些修改

1.在webView初始化時則循環去掉水平及豎直滑動條

2.每次頁面加載完成,均會調用webViewDidFinishLoad代理方法,在此判斷鏈接是否是首頁,如果是首頁則不顯示左上角按鈕,否則顯示

這里非常卡頓,尤其是界面第一次加載時特別緩慢,造成的用戶使用效果就是:界面顯示出好一會了,左上角的按鈕才會出現或者消失

3.在點擊左上角返回按鈕時,判斷當前WebView是否可以返回,如果可以直接返回,如果不可以直接跳回首頁面

區別

1.需要導入頭文件

2.沒有獲取title,是自己寫死的

1.因為后續涉及了分享,分享出去的標題不能是寫死的,需要獲取H5的title

2.需要有進度條

3.當用戶初次安裝打開首頁的時候(此時H5已經請求了),會彈出是否使用數據,當你未選擇的時候,H5是停止請求的空白的頁面,當選擇了允許,但H5已經停止了請求,所以必須加一個下拉刷新

4.H5中有跳轉AppStore的鏈接,WKWebView不會自動識別并去跳轉

1.為對象屬性注冊觀察者

observer: 觀察者對象

keyPath: 被觀察的屬性，其不能為nil

options: 設定通知觀察者時傳遞的屬性值，是傳改變前的呢，還是改變后的

context: 一些其他的需要傳遞給觀察者的上下文信息，通常設置為nil

2.觀察者接收通知,并做出處理:觀察者通過實現下面的方法，完成對屬性改變的響應

keyPath: 被觀察的屬性，其不能為nil.

object: 被觀察者的對象.

change: 屬性值，根據上面提到的Options設置，給出對應的屬性值

context: 上面傳遞的context對象。

3.移除觀察者

當前名稱：ios開發h5交互,ios h5交互
新聞來源：http://www.yijiale78.com/article0/dschdio.html

成都網站建設公司_創新互聯，為您提供軟件開發、搜索引擎優化、定制開發、ChatGPT、網頁設計公司、定制網站

廣告

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