WebView和H5的那點事

在iOS開發中好多時候，原生的app會很大的限制，也會有好多難以實現的東西。那就須要與H5進行混合開發，那就使用到了webView。
1、首先簡單介紹一下webView：
一、三種加載方式：

- (void)loadRequest:(NSURLRequest *)request;//這是加載網頁最經常使用的一種方式，經過一個網頁URL來進行加載，這個URL能夠是遠程的也能夠是本地的
- (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;//這個方法須要將httml文件讀取爲字符串，其中baseURL是咱們本身設置的一個路徑，用於尋找html文件中引用的圖片等素材。
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;//這個方式使用的比較少，但也更加自由，其中data是文件數據，MIMEType是文件類型，textEncodingName是編碼類型，baseURL是素材資源路徑。複製代碼

二、一些經常使用的屬性和變量

@property (nonatomic,assign)id 
  
  
  

 
  
  delegate;//設置webView的代理 @property (nonatomic,readonly,retain)UIScrollView *scrollView;//內置的scrollView @property (nonatomic,readonly,retain)NSURLRequest *request;//URL請求 - (void)reload;//從新加載數據 - (void)stopLoading;//中止加載數據 - (void)goBack;//返回上一級 - (void)goForward;//跳轉下一級 @property (nonatomic,readonly,getter=canGoBack)BOOL canGoBack;//獲取可否返回上一級 @property (nonatomic,readonly,getter=canGoForward)BOOL canGoForward;//獲取可否跳轉下一級 @property (nonatomic,readonly,getter=isLoading)BOOL loading;//獲取是否正在加載數據 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;//經過JavaScript操做web數據 @property (nonatomic)BOOL scalesPageToFit;//設置是否縮放到適合屏幕大小 @property (nonatomic)UIDataDetectorTypes dataDetectorTypesNS_AVAILABLE_IOS(3_0);//設置某些數據變爲連接形式，這個枚舉能夠設置如電話號，地址，郵箱等轉化爲連接 @property (nonatomic)BOOL allowsInlineMediaPlaybackNS_AVAILABLE_IOS(4_0);//設置是否使用內聯播放器播放視頻 @property (nonatomic)BOOL mediaPlaybackRequiresUserActionNS_AVAILABLE_IOS(4_0);//設置視頻是否自動播放 @property (nonatomic)BOOL mediaPlaybackAllowsAirPlayNS_AVAILABLE_IOS(5_0);//設置音頻播放是否支持ari play功能 @property (nonatomic)BOOL suppressesIncrementalRenderingNS_AVAILABLE_IOS(6_0);//設置是否將數據加載如內存後渲染界面 @property (nonatomic)BOOL keyboardDisplayRequiresUserActionNS_AVAILABLE_IOS(6_0);//設置用戶交互模式 

 複製代碼

@property (nonatomic)UIWebPaginationMode paginationModeNS_AVAILABLE_IOS(7_0);

    typedef NS_ENUM(NSInteger, UIWebPaginationMode) {
        UIWebPaginationModeUnpaginated,//不使用翻頁效果
        UIWebPaginationModeLeftToRight,//將網頁超出部分分頁，從左向右進行翻頁
        UIWebPaginationModeTopToBottom,//將網頁超出部分分頁，從上向下進行翻頁
        UIWebPaginationModeBottomToTop,//將網頁超出部分分頁，從下向上進行翻頁
        UIWebPaginationModeRightToLeft//將網頁超出部分分頁，從右向左進行翻頁
    };

//這個屬性用來設置一種模式，當網頁的大小超出view時，將網頁以翻頁的效果展現，枚舉以下：

@property (nonatomic)CGFloat pageLengthNS_AVAILABLE_IOS(7_0);//設置每一頁的長度

@property (nonatomic)CGFloat gapBetweenPagesNS_AVAILABLE_IOS(7_0);//設置每一頁的間距

@property (nonatomic,readonly)NSUInteger pageCountNS_AVAILABLE_IOS(7_0);//獲取分頁數複製代碼

三、webView協議中的方法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;//準備加載內容時調用的方法，經過返回值來進行是否加載的設置

- (void)webViewDidStartLoad:(UIWebView *)webView;//開始加載時調用的方法

- (void)webViewDidFinishLoad:(UIWebView *)webView;//結束加載時調用的方法

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;//加載失敗時調用的方法複製代碼

以上就是webView的屬性、方法以及代理方法的簡單解釋。
2、簡單給出一個例子：（加載一個京東的界面），直接上代碼：

self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    self.webView.delegate = self;
    [self.view addSubview:self.webView];
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.jd.com"]];
    [self.webView loadRequest:request];複製代碼

這裏webView的加載請求，也能夠像平時作網絡請求同樣進行設置「GET」或「POST」請求，這須要根據後臺的需求。例如一個是用post請求的例子：
注：這裏的HTTP_AFNETWORKING_POST_URL 和 URL_Detail_H5([userManage key], _record_type, _record_id) 都是實際項目中的宏定義。

_webView.frame = CGRectMake(0, 0, SCREEN_W, 0);
    _webView.delegate = self;
    NSURL *url = [NSURL URLWithString: HTTP_AFNETWORKING_POST_URL];
    NSString *body = URL_Detail_H5([userManage key], _record_type, _record_id);
    NSMutableURLRequest *request = [[NSMutableURLRequest alloc]initWithURL: url];
    [request setHTTPMethod: @"POST"];
    [request setHTTPBody: [body dataUsingEncoding: NSUTF8StringEncoding]];
    [self.webView loadRequest:request];複製代碼

3、不少時候，webView加載了H5界面以後，若是H5界面過長，webView能進行滾動，可是有時須要進行讓webView自適應，自適應的方法以下：
在網頁加載完成的時候，使用stringByEvaluatingJavaScriptFromString實現UIWebView與JavaScript之間的交互，很方便的操做UIWebview中的頁面元素。獲取Html的高度。
雖然這個方法能使webView高度爲顯示的HTML實際高度，但效果並非太好，當高度超出屏幕時，沒法滾動下拉。可是這種方法與scrollview一塊兒使用能夠很好的控制滾動。

-(void)webViewDidFinishLoad:(UIWebView *)webView{
    NSInteger height = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] integerValue];
    self.webView.frame=CGRectMake(0, 0, self.view.frame.size.width,height);
}複製代碼

或者使用監聽：

[_webView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];

 //監聽
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    if ([keyPath isEqualToString:@"contentSize"]) {
        NSInteger height = [[_webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] integerValue];
        self.webView.frame=CGRectMake(0, 0, self.view.frame.size.width,height);
        [self setUILayout];

    }
}複製代碼

4、最後說與網頁的交互。
不少時候咱們須要監聽用戶點擊了網頁上的內容咱們進行相應的跳轉到原生的界面上，這裏就使用到了webView代理方法中的

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType複製代碼

這個方法。網頁中的每個請求都會被觸發這個方法，返回NO表明不執行這個請求(經常使用於JS與iOS之間通信）。
仍是以京東首頁爲例子，首先load一個京東界面，而後監聽京東界面的京東超市那個請求，當發出這個請求，而後跳轉到咱們本身的原生界面。
效果圖：

這裏寫圖片描述

這裏寫圖片描述

直接上代碼：

#import "ViewController.h"
#import "aaa.h"

@interface ViewController ()
  
  
  

 
  
  @property (strong, nonatomic) UIWebView *webView; @property (strong, nonatomic) UIActivityIndicatorView *activityIndicatorView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)]; self.webView.delegate = self; [self.view addSubview:self.webView]; NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.jd.com"]]; [self.webView loadRequest:request]; self.activityIndicatorView = [[UIActivityIndicatorView alloc]initWithFrame:CGRectMake(0, 0, 32, 32)]; self.activityIndicatorView.center = self.view.center; [self.activityIndicatorView setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhiteLarge]; [self.view addSubview:self.activityIndicatorView]; } #pragma mark - **************** delegate /** * 開始加載網頁 * * @param webView */ -(void)webViewDidStartLoad:(UIWebView *)webView{ NSLog(@"webViewDidStartLoad"); [self.activityIndicatorView startAnimating]; } /** * 網頁加載完成的時候調用 * * @param webView */ -(void)webViewDidFinishLoad:(UIWebView *)webView{ NSLog(@"webViewDidFinishLoad"); [self.activityIndicatorView stopAnimating]; } /** * 網頁加載出錯的時候調用 * * @param webView * @param error */ -(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{ if (error != nil) { NSLog(@"%@",[error description]); } [self.activityIndicatorView stopAnimating]; } /** * 網頁中的每個請求都會被觸發這個方法，返回NO表明不執行這個請求(經常使用於JS與iOS之間通信） * * @param webView * @param request * @param navigationType * * @return */ - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSLog(@"ssss%@",request); if ([request.URL.absoluteString isEqualToString:@"http://pro.m.jd.com/2hqsQcyM5bEUVSStkN3BwrBHqVLd/index.html"] ) { aaa *aa = [[aaa alloc]init]; [self presentViewController:aa animated:YES completion:nil]; return NO; } return YES; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end 

 複製代碼

以上就是對webView的簡單實用的總結。若有錯誤，請留言指出，將感激涕零。

微信公衆號：不靠譜程序猿 微信公衆號：Sheffi_Programmer
Github：Sheffi（github.com/goingmyway1… 新浪微博：Sheffi567
掘金：Sheffi（gold.xitu.io/user/57c137…