前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作。长话短说,现今的混合开发应该还处于摸索阶段,我们的项目主要页面都是由网页做的,只有一些IM、支付、分享、推送、上传照片这些用的是原生功能,大家都知道ios原生app的体验一直是很好的,现在改成了混合开发,无疑中就有些舍弃了ios原生的用户体验,而这个作为一个向来以用户体验为先的开发人员来说,这个真的是难以忍受,所以开始了以优化用户体验的为目标的各种尝试。

优化页面跳转功能

app中的翻页常用的分为两类,一种通过导航,一种直接跳

1、第一种 直接跳转 思路大致就是new一个目的页面,然后设置下页面跳转动画 中间还可以做点目的页面的数据初始化:

 ValueInputView *valueView = [[ValueInputView alloc] initWithNibName:@"ValueInputView"bundle:[NSBundle mainBundle]];

 valueView.delegate = self;

 [valueView setModalTransitionStyle:UIModalTransitionStyleCoverVertical];

 [self presentModalViewController:valueView animated:YES];

 //返回

 [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(, , kWidth, kHeight-)];

_scrollView.backgroundColor = [UIColor whiteColor];

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

_scrollView.pagingEnabled = YES;

_scrollView.scrollEnabled = NO;

_scrollView.bounces = NO;

//隐藏水平滚动条

_scrollView.showsHorizontalScrollIndicator = NO;

//隐藏垂直滚动条

_scrollView.showsVerticalScrollIndicator = NO;

_scrollView.contentOffset = CGPointMake(, );

//创建初始的WebView

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

_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, , kWidth, kHeight-)];
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 = ; i<_count; i++) { [_webDict removeObjectForKey:_urlArray[]];
[_webArray[] stopLoading];
[_webArray[] removeFromSuperview];
[_webArray removeObjectAtIndex:]; [_urlArray removeObjectAtIndex:]; }
_count = _webArray.count-; }

当页面返回时,把数组的最后一个数据移除,

//返回上一页
-(void)lastWeb{ //翻页动效
CGPoint offSet = self.scrollView.contentOffset;
if (offSet.x==) {
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页面跳转优化的更多相关文章

  1. 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面

    PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...

  2. H5混合开发app常用代码

    1.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器(高性能webkit内核浏览器),一部分原生的功能改为Html 5来开发.然后这个浏览器又封装 ...

  3. Android H5混合开发(1):构建Cordova 项目

    Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...

  4. Android H5混合开发(3):原生Android项目里嵌入Cordova

    前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...

  5. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  6. Vue仿微信app页面跳转动画

    10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...

  7. 基于ionic+angulajs的混合开发实现地铁APP

    基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...

  8. Android H5混合开发(2):自定义Cordova插件

    前言 Cordova虽然定义了很多基础的插件,供H5端使用原生设备的功能. 但是,如果业务相关的功能,需要提供给H5端使用,那么,就需要我们自定义插件了. 这个"自定义"不是指由A ...

  9. Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova

    近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲 ...

随机推荐

  1. shell脚本,防止sshd被暴力破解

    1.tail -f /var/log/secure 你会发现有很多的登录 错误.这说明你的机器正在被暴力破解. 2.新建 一个 shell脚 本 保存退出. 3.加入定时crontab -e 我这里每 ...

  2. cef3 获得js 返回值, 以及js 指挥delphi 函数的 总结参考

     cef3  如何加载 本地html 文件.   请教老师[吐槽]常忘<run_fan@qq.com>  22:21:45@lazarus 下载cef3中的范例中就有  [吐槽]常忘< ...

  3. vmware 10 e1000e e1000e_cyclecounter_read 挂机解法

    http://ehc.ac/p/e1000/mailman/message/34100875/In the e1000e_cyclecounter_read function, if incvalue ...

  4. 简答哈希实现 (nyoj 138 找球号2)

    例题链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=138 代码目的:复习哈希用 代码实现: #include "stdio.h&qu ...

  5. Qt获得网页源码

    1.工程中添加网络模块 打开你的.pro文件插入以下代码 QT += network 2.添加代码 CodeQString NetWork::getWebSource(QUrl url) { QNet ...

  6. 【转】O&#39;Reilly Java系列书籍建议阅读顺序(转自蔡学庸)

    Learning Java the O'Reilly's Way (Part I) Java 技术可以说是越来越重要了,不但可以用在计算机上,甚至连电视等家电用品,行动电话.个人数字助理(PDA)等电 ...

  7. VS中监视窗口,即时窗口和输出窗口的使用

    一.监视窗口 1.配置应用程序,使应用程序处于调试状态. 2.点击“调试”----“窗口”----“监视”----“监视1”,打开监视窗口. 3.在监视窗口中“名称”栏中输入变量名称或html元素id ...

  8. 【转】SQL Server 2008 新类型介绍之Date和Time

     转自CSDN TJVictor专栏:http://blog.csdn.net/tjvictor/archive/2009/07/13/4344429.aspx   SQL Server 2008除了 ...

  9. for循环查找元素怎么跳出for循环

    应用场景: 当我们通过for循环来循环对象或者数组时,当找到符合条件的数据时,想要跳出这个循环,不在执行循环继续往后面查找. 解决方法: for循环里面使用return没有效果,于是,我们回到最初控制 ...

  10. JS判断浏览器种类

    function myBrowser() {                        var userAgent = navigator.userAgent; //取得浏览器的userAgent ...