ios&h5混合开发项目仿app页面跳转优化

前言:本人原本是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];
}
}

当然,我只是提供我的一种思路,而且我们也是这样做的,可能还会有更好的思路,希望能多补充,共同进步。

时间: 2024-10-05 17:20:28

ios&h5混合开发项目仿app页面跳转优化的相关文章

入门移动端混合开发 实战京东 APP

第1章 课程介绍本章主要是向你介绍什么是混合开发,以及目前混合开发中的几种方案. 第2章 Hybrid 技术原理本章主要讲解 hybrid 技术原理与核心本质,让你对混合开发有更清楚的认识. 第3章 开发前的准备本章主要讲解核心代码开发前的准备知识,比如 Flex 布局.webpack 和 @vue/cli 的基础知识.scss 的基本应用和项目的初始化内容. 第4章 京东商城首页(上)本章主要使用 vue 开发商城首页,包括组件化思想.动态组件和异步组件的应用.axios的使用.swiper

能挣钱的微信JSSDK+H5混合开发

H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在大众创业就要从一个微信公众号开始,这个公众号可以有基本的1-3个功能,拿“悠泊停车”来说,刚开始就只有一个微信公众号,它代替了所有的Native APP功能,让“悠泊停车”迅速打开了市场,并拉来百万美元投资. 目前微信公众号开发已经遍地都是,但真正H5场景应用还少得可怜,大部分小企业都只有简单的菜单

web项目中实现页面跳转的两种方式

<a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> 跳转在网页本身,URL 改变 java web项目中实现页面跳转的主要方式有两种:第一种,<% response.sendRedirect("index.jsp");%>第二种<jsp:forward page="index.jsp"/>我做

原生Android结合H5混合开发小结

混合开发概述 微信,微博以及现在市面上大量的软件使用内嵌了H5页面:有些外包公司,为了节约成本,采用Android内嵌H5模式开发,便于在IOS上直接复用页面, 从而提高开发效率. 实现的原理: 本质是:Java代码和Javascript调用 H5页面,只是Html的扩展,Javascript用来处理页面的逻辑 Android和H5互调案例: 一.java调用js WebView的基本设置: private void initWebView() { webView = new WebView(t

H5混合开发二维码扫描以及调用本地摄像头

今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底,于是晚上回家开始网上各处找方案.以下是我对于H5扫描二维码以及调用本地摄像头的理解以及代码. 科普网址: H5如何生成安卓组件对象 H5调用安卓本地摄像头api 在线二维码图片生成器 二维码扫描:(使用的是mui的框架,下面是html代码) <!doctype html> <html>

9-10【H5混合实战】基于自定义WebView实现H5混合开发-3

封装好了WebView,下面来使用它.Nav里面每个图标点击会跳转到H5的页面. 跳转需要用到Navigator来push一个页面.然后里面使用MaterialPageRoute, 导入WebVIew这个widget 运行测试 点击 点击左侧的按钮可以返回. 点击返回,并没有返回到我们的首页,而是打开了另外一个H5页面 这个H5页面是携程的首页 怎么规避这个问题呢?接下俩就需要扩展我们的WebView来和H5之间进行一个混合. 在我们webView页面加载指定的url的时候.native做一些操

H5混合开发APP配置以及第一个工程--博客园老牛大讲堂

前段时间有人问我怎样用H5开发app,我恰好知道就把步骤粘出来,有不懂的地方给我留言,我再修改.--博客园老牛大讲堂 思想:首先用Hbuilder开发工程,把自己的工程粘贴到APICloud的工程里面.然后用网上的APICloud的内容打包内容. 环境:Hbuilder,夜神模拟器,APICloud开发工具. 提示:因为APICloud因为提示功能不好,所以建议如果想开发就用Hbuilder开发.开发完就把css,js,img粘里面就行了. 第一.首先下载一个APICloud开发环境(APICl

Android与H5混合开发

Android 和 H5 在移动开发应用中非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5在制作炫酷动画网页方面比较给力,且具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以App和H5页面相结合就显得尤为重要.而android和H5都不可能独立存在,而是相互影响的.例如,H5页面要获取App中的用户的基本信息,App端要操作H5页面等. 本文主要功能要点 1.webView如何加

9-9【H5混合实战】基于定义WebView实现H5混合开发-2

webview具体展示的内容,想让它撑满整个界面. 用Expanded这个widget 初始化加载的时候提示信息 目前WebView还有一个bug.即使我们默认让它隐藏,也设置了初始化加载的信息.但是 你会发现它是无效的.但是在不久的将来,它修复了这个bug ,就可以正常使用了. 状态栏的颜色的判断, 如果和String类型的颜色 转换成Color这个widget需要的参数 Color是接收一个int类型的颜色 首先需要知道颜色是6位还8位的.如果是6位的话就需要前面补两位.补0x表示16位,