?在客戶端項(xiàng)目中，同一個(gè)app會(huì)開發(fā)成兩個(gè)版本，一個(gè)是安卓版本，一個(gè)IOS版本，公司必須有兩個(gè)開發(fā)團(tuán)隊(duì)（一個(gè)安卓團(tuán)隊(duì)，一個(gè)IOS團(tuán)隊(duì)）來進(jìn)行開發(fā)，這樣一來，開發(fā)成本非常之高。所以，往往在實(shí)際項(xiàng)目-中，會(huì)嵌套很多H5頁面，一個(gè)H5頁面同時(shí)兼容安卓和IOS兩個(gè)系統(tǒng) ，這樣一來，大大減少了開發(fā)成本，前端開發(fā)頁面就必須和原生進(jìn)行交互。
專注于為中小企業(yè)提供網(wǎng)站制作、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)新巴爾虎右免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
1. 頁面開發(fā) ? ? ?—— 前端開發(fā)人員將所有的頁面按照移動(dòng)webappp進(jìn)行開發(fā)，做好不同屏幕的適配（寬度100%,視口為移動(dòng)端視口 (快捷方式meta:vp ?tap），字體適配rem單位，設(shè)置html根標(biāo)簽的font-size然后根據(jù)媒體查詢判斷設(shè)備屏幕大小進(jìn)而設(shè)置html根標(biāo)簽的不同fontsize，去除移動(dòng)端高亮顯示；小圖標(biāo)要善于使用字體圖標(biāo)（常用的字體圖標(biāo)庫有阿里巴巴矢量圖），改變input標(biāo)簽的默認(rèn)樣式可以采用隱藏input,然后通過字體圖標(biāo)來控制前面的圖標(biāo)，就可以做成自己想要的圖標(biāo)效果）
2.前端頁面部署 —— 設(shè)置好入口文件（原生一進(jìn)來就進(jìn)入的頁面，命名為index.html），部署到對(duì)應(yīng)的服務(wù)器上，通過網(wǎng)址就能夠訪問到頁面，將網(wǎng)址給app客戶端開發(fā)人員，他們將app配置好環(huán)境后講頁面嵌套在app中。
3.進(jìn)行數(shù)據(jù)對(duì)接：兩種對(duì)接方式（1）.前端頁面自己通過ajax去后臺(tái)拉數(shù)據(jù)，然后自己在頁面上使用再提交給后臺(tái)。前提是原生需要將對(duì)應(yīng)的設(shè)備號(hào)，加密方式，請(qǐng)求數(shù)據(jù)所需要的各種參數(shù)通過回調(diào)函數(shù)傳遞給H5頁面，H5頁面拿到這些數(shù)據(jù)后直接調(diào)后臺(tái)的借口、獲取到數(shù)據(jù)。（2）.前端頁面不用自己去后臺(tái)拉取數(shù)據(jù)，而是通過回調(diào)函數(shù)，獲取到原生app拉取的數(shù)據(jù)，前端頁面將這些數(shù)據(jù)處理后又通過回調(diào)函數(shù)交給app，再又app發(fā)送給后臺(tái)。兩種調(diào)用的優(yōu)劣比較：如果H5頁面及數(shù)據(jù)不是很多，使用第二種方式比較合理，不用H5頁面請(qǐng)求數(shù)據(jù)（不用封裝請(qǐng)求，不用加密數(shù)據(jù)），不使用框架，大大減少了頁面的大小，提高性能及用戶體驗(yàn)。如果涉及到的前端頁面非常多，數(shù)據(jù)交互比較復(fù)雜的話，就必須使用第一種對(duì)接方式了，app只需要將設(shè)備號(hào)，加密規(guī)則，參數(shù)傳遞給H5，H5根據(jù)頁面需求自己向后臺(tái)拉去和請(qǐng)求數(shù)據(jù)，直接交互，不再通過app進(jìn)行轉(zhuǎn)接，減小復(fù)雜程度。
這種方法是利用攔截webView響應(yīng)的url，對(duì)url進(jìn)行處理，同時(shí)把需要執(zhí)行的方法名和參數(shù)都放入url中，實(shí)現(xiàn)app和H5之前的方法交互：
這個(gè)屬性是WKWebView才有的屬性，主要是通過WKScriptMessageHandler的代理方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 進(jìn)行交互。
注意：
這兩個(gè)方法是成對(duì)出現(xiàn)的，每次調(diào)用了add就必須調(diào)用remove。
1.建立 WebViewJavaScriptBridge 和 WebView 之間的關(guān)系。
_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
2.方法調(diào)用
1)oc調(diào)js方法（通過data可以傳值，通過 response可以接受js那邊的返回值 ）
2)js調(diào)oc方法（可以通過data給oc方法傳值，使用responseCallback將值再返回給js）
最后：iOS調(diào)用H5方法
UIWebView： NSString *result = [webView stringByEvaluatingJavaScriptFromString:@"javascript:add(3,5);"];
WKWebView: [self.webView evaluateJavaScript:@"show()" completionHandler:^(id _Nullable response, NSError * _Nullable error) { //TODO }];
有時(shí)候項(xiàng)目小,為了省事,是會(huì)App內(nèi)全嵌套H5的,但為了使用戶體驗(yàn)更好,App內(nèi)也會(huì)做一些修改
1.在webView初始化時(shí)則循環(huán)去掉水平及豎直滑動(dòng)條
2.每次頁面加載完成,均會(huì)調(diào)用webViewDidFinishLoad代理方法,在此判斷鏈接是否是首頁,如果是首頁則不顯示左上角按鈕,否則顯示
這里非?？D,尤其是界面第一次加載時(shí)特別緩慢,造成的用戶使用效果就是:界面顯示出好一會(huì)了,左上角的按鈕才會(huì)出現(xiàn)或者消失
3.在點(diǎn)擊左上角返回按鈕時(shí),判斷當(dāng)前WebView是否可以返回,如果可以直接返回,如果不可以直接跳回首頁面
區(qū)別
1.需要導(dǎo)入頭文件
2.沒有獲取title,是自己寫死的
1.因?yàn)楹罄m(xù)涉及了分享,分享出去的標(biāo)題不能是寫死的,需要獲取H5的title
2.需要有進(jìn)度條
3.當(dāng)用戶初次安裝打開首頁的時(shí)候(此時(shí)H5已經(jīng)請(qǐng)求了),會(huì)彈出是否使用數(shù)據(jù),當(dāng)你未選擇的時(shí)候,H5是停止請(qǐng)求的空白的頁面,當(dāng)選擇了允許,但H5已經(jīng)停止了請(qǐng)求,所以必須加一個(gè)下拉刷新
4.H5中有跳轉(zhuǎn)AppStore的鏈接,WKWebView不會(huì)自動(dòng)識(shí)別并去跳轉(zhuǎn)
1.為對(duì)象屬性注冊(cè)觀察者
observer: 觀察者對(duì)象
keyPath: 被觀察的屬性，其不能為nil
options: 設(shè)定通知觀察者時(shí)傳遞的屬性值，是傳改變前的呢，還是改變后的
context: 一些其他的需要傳遞給觀察者的上下文信息，通常設(shè)置為nil
2.觀察者接收通知,并做出處理:觀察者通過實(shí)現(xiàn)下面的方法，完成對(duì)屬性改變的響應(yīng)
keyPath: 被觀察的屬性，其不能為nil.
object: 被觀察者的對(duì)象.
change: 屬性值，根據(jù)上面提到的Options設(shè)置，給出對(duì)應(yīng)的屬性值
context: 上面?zhèn)鬟f的context對(duì)象。
3.移除觀察者
重慶分公司
重慶分公司
