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

優(yōu)化頁面跳轉(zhuǎn)功能

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

1、第一種 直接跳轉(zhuǎn) 思路大致就是new一個目的頁面，然后設(shè)置下頁面跳轉(zhuǎn)動畫 中間還可以做點目的頁面的數(shù)據(jù)初始化:

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，調(diào)用pushViewController，進行跳轉(zhuǎn)；這種采用壓棧和出棧的方式，進行Controller的管理。調(diào)用popViewControllerAnimated方法可以返回

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

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

而我們在網(wǎng)頁中的跳轉(zhuǎn)就很直接，一個webview中轉(zhuǎn)換不同的URL，很明顯這樣的方法呈現(xiàn)給用戶的體驗很差，所以得想辦法去優(yōu)化，最好的解決辦法就是去模仿原生的頁面跳轉(zhuǎn)。為此我查看了很多的知名app，但我發(fā)現(xiàn)大多數(shù)混合開發(fā)的app都只是某幾個頁面用的是網(wǎng)頁開發(fā)，然后再webview所在頁面加上進度條，所以給用戶感覺不是很突兀，比如餓了么之類的。但這很明顯不適用于我們的APP，所以我當時想的是這樣做的，加載一個UIScrollView,然后在ScrollView上去添加webview，每點擊一次webview里面的跳轉(zhuǎn)時，生成一個新的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);//創(chuàng)建初始的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];//執(zhí)行交互操作

[self mutualOCwithJS];

}

//進入下一頁

-(void)nextWeb{//翻頁動效

CGPoint offSet =self.scrollView.contentOffset;//在新頁面里創(chuàng)建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];//執(zhí)行交互操作

[self mutualOCwithJS];

}

但這種方式帶來的問題是內(nèi)存暴漲，顯然還需要優(yōu)化，于是我想到添加兩個數(shù)組去分別存儲新打開頁面的url和webview，

//初始化數(shù)組和字典

_webArray=[[NSMutableArray alloc]init];

[_webArray addObject:_myWebView];

_urlArray=[[NSMutableArray alloc]init];

[_urlArray addObject:urlString];

_webDict=[NSMutableDictionary dictionary];

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

當跳轉(zhuǎn)至頻道頁首頁的時候?qū)?shù)組清空，同時把當前位置變?yōu)镾crollView的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;

}

當頁面返回時，把數(shù)組的最后一個數(shù)據(jù)移除，

//返回上一頁

-(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];

}

這兩條措施都有效降低內(nèi)存損耗，同時保證了app頁面跳轉(zhuǎn)的平滑過渡，當然如果想要想原生app中的手勢右劃返回，我們這個也同樣可以完成。

//滑動手勢

- (void)handleSwipes:(UISwipeGestureRecognizer *)sender{if (sender.direction ==UISwipeGestureRecognizerDirectionRight) {

[self lastWeb];

}

}

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

原文：http://www.cnblogs.com/keynowu/p/5997698.html

總結(jié)

以上是生活随笔為你收集整理的h5 移动开发 html页面跳转,iosh5混合开发项目仿app页面跳转优化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。