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

標籤：baidu   網頁開發   資料   vertica   利用   大致   使用者   dism   send   

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

最佳化頁面跳轉功能

app中的翻頁常用的分為兩類，一種通過導航，一種直接跳

1、第一種 直接跳轉 思路大致就是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];

 

2、利用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;//在新頁面裡建立webviewUIWebView *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];}}

 

 

當然，我只是提供我的一種思路，而且我們也是這樣做的，可能還會有更好的思路，希望能多補充，共同進步。

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