前言:本人原本是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; //在新页面里创建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]; } }
当然,我只是提供我的一种思路,而且我们也是这样做的,可能还会有更好的思路,希望能多补充,共同进步。