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

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

app中的翻頁(yè)常用的分為兩類，一種通過導(dǎo)航，一種直接跳

1、第一種 直接跳轉(zhuǎn) 思路大致就是new一個(gè)目的頁(yè)面，然后設(shè)置下頁(yè)面跳轉(zhuǎn)動(dòng)畫 中間還可以做點(diǎn)目的頁(yè)面的數(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，進(jìn)行跳轉(zhuǎn)；這種采用壓棧和出棧的方式，進(jìn)行Controller的管理。調(diào)用popViewControllerAnimated方法可以返回

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

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

而我們?cè)诰W(wǎng)頁(yè)中的跳轉(zhuǎn)就很直接，一個(gè)webview中轉(zhuǎn)換不同的URL，很明顯這樣的方法呈現(xiàn)給用戶的體驗(yàn)很差，所以得想辦法去優(yōu)化，最好的解決辦法就是去模仿原生的頁(yè)面跳轉(zhuǎn)。為此我查看了很多的知名app，但我發(fā)現(xiàn)大多數(shù)混合開發(fā)的app都只是某幾個(gè)頁(yè)面用的是網(wǎng)頁(yè)開發(fā)，然后再webview所在頁(yè)面加上進(jìn)度條，所以給用戶感覺不是很突兀，比如餓了么之類的。但這很明顯不適用于我們的APP，所以我當(dāng)時(shí)想的是這樣做的，加載一個(gè)UIScrollView,然后在ScrollView上去添加webview，每點(diǎn)擊一次webview里面的跳轉(zhuǎn)時(shí)，生成一個(gè)新的webview添加在第二屏的位置，以此類推每次進(jìn)入新頁(yè)面都可以用這種方式。

//初始化頁(yè)面的操作

-(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;//隱藏水平滾動(dòng)條

_scrollView.showsHorizontalScrollIndicator=NO;//隱藏垂直滾動(dòng)條

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

}

//進(jìn)入下一頁(yè)

-(void)nextWeb{//翻頁(yè)動(dòng)效

CGPoint offSet =self.scrollView.contentOffset;//在新頁(yè)面里創(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)化，于是我想到添加兩個(gè)數(shù)組去分別存儲(chǔ)新打開頁(yè)面的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]];

當(dāng)跳轉(zhuǎn)至頻道頁(yè)首頁(yè)的時(shí)候?qū)?shù)組清空，同時(shí)把當(dāng)前位置變?yōu)镾crollView的0位置，

NSString *resultStr = [webView stringByEvaluatingJavaScriptFromString:@"document.body.getAttribute(‘data‘)"];//頁(yè)面中含有頻道頁(yè)首頁(yè)標(biāo)記

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;

}

當(dāng)頁(yè)面返回時(shí)，把數(shù)組的最后一個(gè)數(shù)據(jù)移除，

//返回上一頁(yè)

-(void)lastWeb{//翻頁(yè)動(dòng)效

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)存損耗，同時(shí)保證了app頁(yè)面跳轉(zhuǎn)的平滑過渡，當(dāng)然如果想要想原生app中的手勢(shì)右劃返回，我們這個(gè)也同樣可以完成。

//滑動(dòng)手勢(shì)

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

[self lastWeb];

}

}

當(dāng)然，我只是提供我的一種思路，而且我們也是這樣做的，可能還會(huì)有更好的思路，希望能多補(bǔ)充，共同進(jìn)步。

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

總結(jié)

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

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