ios&h5混合開發項目仿app頁面跳轉優化

前言：本人本來是ios開發工程師，但因爲現今H5的興起，行內颳起了一陣混合開發的風氣，趁着這股勁，我也學了前端開發，不說研究的多深，但也能勝任平常的開發工做。長話短說，現今的混合開發應該還處於摸索階段，咱們的項目主要頁面都是由網頁作的，只有一些IM、支付、分享、推送、上傳照片這些用的是原生功能，你們都知道ios原生app的體驗一直是很好的，如今改爲了混合開發，無疑中就有些捨棄了ios原生的用戶體驗，而這個做爲一個向來以用戶體驗爲先的開發人員來講，這個真的是難以忍受，因此開始了以優化用戶體驗的爲目標的各類嘗試。

優化頁面跳轉功能

app中的翻頁經常使用的分爲兩類，一種經過導航，一種直接跳

一、第一種 直接跳轉 思路大體就是new一個目的頁面，而後設置下頁面跳轉動畫 中間還能夠作點目的頁面的數據初始化:

 1 ValueInputView *valueView = [[ValueInputView alloc] initWithNibName:@"ValueInputView"bundle:[NSBundle mainBundle]];
 2 
 3 valueView.delegate = self;
 4 
 5 [valueView setModalTransitionStyle:UIModalTransitionStyleCoverVertical];
 6 
 7 [self presentModalViewController:valueView animated:YES];
 8 
 9 //返回
10 
11 [self dismissModalViewControllerAnimated:YES];

 

二、利用UINavigationController，調用pushViewController，進行跳轉；這種採用壓棧和出棧的方式，進行Controller的管理。調用popViewControllerAnimated方法能夠返回

PickImageViewController *ickImageViewController = [[PickImageViewController alloc] init];

[self.navigationController pushViewController: ickImageViewController animated:true];

 

而咱們在網頁中的跳轉就很直接，一個webview中轉換不一樣的URL，很明顯這樣的方法呈現給用戶的體驗不好，因此得想辦法去優化，最好的解決辦法就是去模仿原生的頁面跳轉。爲此我查看了不少的知名app，但我發現大多數混合開發的app都只是某幾個頁面用的是網頁開發，而後再webview所在頁面加上進度條，因此給用戶感受不是很突兀，好比餓了麼之類的。但這很明顯不適用於咱們的APP，因此我當時想的是這樣作的，加載一個UIScrollView,而後在ScrollView上去添加webview，每點擊一次webview裏面的跳轉時，生成一個新的webview添加在第二屏的位置，以此類推每次進入新頁面均可以用這種方式。

//初始化頁面的操做

-(void)initView{

_scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 20, kWidth, kHeight-20)];

_scrollView.backgroundColor = [UIColor whiteColor];

_scrollView.contentSize = CGSizeMake(60*kWidth, kHeight);

_scrollView.pagingEnabled = YES;

_scrollView.scrollEnabled = NO;

_scrollView.bounces = NO;

//隱藏水平滾動條

_scrollView.showsHorizontalScrollIndicator = NO;

//隱藏垂直滾動條

_scrollView.showsVerticalScrollIndicator = NO;

_scrollView.contentOffset = CGPointMake(0, 0);

//建立初始的WebView

_myWebView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, kWidth, kHeight-20)];

_myWebView.backgroundColor = [UIColor grayColor];

//地址是我亂寫的

NSString *urlString = @"http://www.baidu.com"

NSURL *url = [NSURL URLWithString:urlString];

NSURLRequest *request = [NSURLRequest requestWithURL:url];

_myWebView.scrollView.bounces = NO;

_myWebView.scalesPageToFit = NO;

_myWebView.delegate = self;

[_myWebView loadRequest:request];

[self.scrollView addSubview:_myWebView];

[self.view addSubview:_scrollView];

//執行交互操做

[self mutualOCwithJS];

}

 

//進入下一頁
-(void)nextWeb{

//翻頁動效
CGPoint offSet = self.scrollView.contentOffset;
//在新頁面裏建立webview
UIWebView *webView = [[UIWebView alloc]initWithFrame:CGRectMake(offSet.x+kWidth, 0, kWidth, kHeight-20)];
webView.backgroundColor = [UIColor grayColor];
NSString *urlString = _urlWeb;
NSURL *url = [NSURL URLWithString:urlString];
_lastoffset = offSet.x;
NSURLRequest *request = [NSURLRequest requestWithURL:url];

webView.scrollView.bounces = NO;
webView.scalesPageToFit = YES;
webView.delegate = self;
[webView loadRequest:request];

[self.scrollView addSubview:webView];

offSet.x += kWidth;
[self.scrollView setContentOffset:offSet animated:YES];

//寫入字典
[_webArray addObject:webView];
[_urlArray addObject:urlString];
_count++;
[_webDict setObject:_webArray[_count] forKey:_urlArray[_count]];

// [self startAnimation];
//執行交互操做
[self mutualOCwithJS];

}

但這種方式帶來的問題是內存暴漲，顯然還須要優化，因而我想到添加兩個數組去分別存儲新打開頁面的url和webview，

//初始化數組和字典

_webArray = [[NSMutableArray alloc]init];

[_webArray addObject:_myWebView];

_urlArray = [[NSMutableArray alloc]init];

[_urlArray addObject:urlString];

_webDict = [NSMutableDictionary dictionary];

[_webDict setObject:_webArray[_count] forKey:_urlArray[_count]];

 

當跳轉至頻道頁首頁的時候將數組清空，同時把當前位置變爲ScrollView的0位置，

NSString *resultStr = [webView stringByEvaluatingJavaScriptFromString:@"document.body.getAttribute('data')"];
//頁面中含有頻道頁首頁標記
if (![resultStr isEqualToString:@""]) {

for (int i = 0; i<_count; i++) {

[_webDict removeObjectForKey:_urlArray[0]];
[_webArray[0] stopLoading];
[_webArray[0] removeFromSuperview];
[_webArray removeObjectAtIndex:0];

[_urlArray removeObjectAtIndex:0];

}
_count = _webArray.count-1;

}

當頁面返回時，把數組的最後一個數據移除，

//返回上一頁
-(void)lastWeb{

//翻頁動效
CGPoint offSet = self.scrollView.contentOffset;
if (offSet.x==0) {
return;
}
offSet.x -= kWidth;
[self.scrollView setContentOffset:offSet animated:YES];


//銷燬不用的webView
[_webArray[_count] stopLoading];
[_webArray[_count] removeFromSuperview];

//刪除字典
[_webDict removeObjectForKey:_urlArray[_count]];
[_webArray removeObjectAtIndex:_count];
[_urlArray removeObjectAtIndex:_count];
_count--;

[self mutualOCwithJS];

}

 

這兩條措施都有效下降內存損耗，同時保證了app頁面跳轉的平滑過渡，固然若是想要想原生app中的手勢右劃返回，咱們這個也一樣能夠完成。

//滑動手勢
- (void)handleSwipes:(UISwipeGestureRecognizer *)sender{

if (sender.direction == UISwipeGestureRecognizerDirectionRight) {
[self lastWeb];
}
}

 

 

固然，我只是提供個人一種思路，並且咱們也是這樣作的，可能還會有更好的思路，但願能多補充，共同進步。