基于混合开发的iOS页面跳转方法及其系统与流程

本发明涉及混合开发的ios软件中页面跳转的方法及其系统，属于app混合开发领域。

背景技术：

目前，app开发由最初的本地化开发慢慢过渡到混合开发，混合开发的app既有本地化app的良好用户交互体验，又具有webapp跨平台开发的优点。越来越多的app选择使用混合开发，随之而来的问题也越来越多，混合开发软件页面跳转异常是常见的问题之一。

在做混合开发的时候，ios端使用wkwebview加载html页面，当html页面只有一级时，使用原生系统自带的滑动返回上一级功能可以正常通过右滑返回，当存在多级html页面时，有一定概率出现侧滑返回时直接返回到上级控制器，无法正常返回上一级html页面的情况，这是因为html页面的侧滑返回和导航控制器的侧滑返回发生冲突，系统无法准确识别到底是哪一种侧滑返回。

技术实现要素：

针对目前混合开发软件滑动返回时页面跳转异常的问题，本发明提出了一种基于混合开发的ios页面跳转方法及其系统，通过调用web端页面返回方法返回html上级页面，调用原生系统页面返回方法返回原生主页面。

为解决上述技术问题，本发明采用了如下技术手段：

基于混合开发中滑动返回的页面跳转方法，具体包括以下步骤：

s1、禁用原生系统的滑动返回功能；

s2、给wkwebview创建一个滑动返回手势；

s3、对s2中的滑动返回手势进行监听；

s4、在html5页面触发滑动返回手势，根据html5页面历史记录判断上级页面类型；

s5、当上级页面是html5页面，调用html5页面返回方法返回上级html5页面；

s6、当上级页面是ios原生页面，调用ios系统原生返回方法返回ios原生页面。

基于混合开发中html5页面返回按键的页面跳转方法，具体包括以下步骤：

s1、监听html5页面返回按键；

s2、触发html5页面返回按键，根据html5页面历史记录判断上级页面类型；

s3、当上级页面是html5页面，调用html5页面返回方法返回上级html5页面；

s4、当上级页面是ios原生页面，调用ios系统原生返回方法返回ios原生页面。

基于混合开发的ios页面跳转系统，包括：

滑动返回模块，用于禁用原生系统的滑动返回功能并创建一个可识别的滑动返回手势；

监听模块，用于监听滑动返回模块创建的滑动返回手势和html5页面返回按键；

判断模块，用于判断上级页面类型；

html5页面返回模块，用于调用html5页面返回方法返回上级html5页面；

ios页面返回模块，用于调用ios系统原生返回方法返回ios原生页面。

进一步的，所述的上级页面类型包括html5页面和ios原生页面。

采用以上技术手段后可以获得以下优势：

本发明公开了一种基于混合开发的ios页面跳转方法及其系统，在混合开发的app中，当存在多级html5页面时，用户滑动返回或者点击页面上的返回按钮，系统自动判断上级页面类型，调用html5页面返回方法返回上级html5页面，调用原生系统返回方法返回上级原生页面。采用本发明方法的系统，可以迅速有效的返回上级页面，避免了混合开发中页面跳转错误的情况，优化了混合开发app的用户体验，给用户的操作带来了很大的便利性。

附图说明

图1为本发明基于混合开发的ios页面跳转方法的步骤流程图。

图2为本发明基于混合开发的ios页面跳转系统的结构示意图。

具体实施方式

下面结合附图对本发明的技术方案作进一步说明：

本发明提出了一种基于混合开发的ios页面跳转方法及其系统，基于混合开发的ios页面跳转方法如图1所示，具体分为基于混合开发中滑动返回的页面跳转方法和基于混合开发中html5页面返回按键的页面跳转方法。

基于混合开发中滑动返回的页面跳转方法，包括以下步骤：

s1、禁用app原生系统的滑动返回功能；

s2、给wkwebview创建一个滑动返回手势；

s3、对s2中的滑动返回手势进行监听；

s4、在html5页面触发滑动返回手势，根据html5页面历史记录判断上级页面类型；

s5、当上级页面是html5页面，编写代码允许原生系统调用html5页面返回方法，返回到上级html5页面；

s6、当上级页面是ios原生页面，直接调用ios系统原生返回方法返回ios原生页面。

在本具体实施例中采用右滑手势作为滑动返回手势，步骤s1、s2、s3的代码编写如下：

self.navigationcontroller.interactivepopgesturerecognizer.enabled=no；

uiswipegesturerecognizer*swipegesture=[[uiswipegesturerecognizerallow]initwithtarget:selfaction:@selector(swipegoback:)];

swipegesture.delegate=self;//设置手势代理，拦截手势触发

swipegesture.direction=uiswipegesturerecognizerdirectionright;

[clearviewaddgesturerecognizer:swipegesture];

滑动

-(void)swipegoback:(uiswipegesturerecognizer*)swipe

{

[_webviewbridgecallhandler:@"goback"];

}

步骤s4具体代码编写如下：

naticeservice.registerhanler(@"goback",function(data,responsecallback){

if($ionichistory.backview()==null){

nativeservice.nativecall("goback");

}else{

$ionichistory.goback();

}})

步骤s6具体代码编写如下：

-(void)registergobackfunction

{

__weaktypeof(self)weakself=self;

[_webviewbridgeregisterhandler:@"goback"handler:^(iddata,wvjbresponsecallbackresponsecallback){

[weakself.navigationcontrollerpopviewcontrolleranimated:no];

}];

}

基于混合开发中html5页面返回按键的页面跳转方法，包括以下步骤：

s1、监听html5页面返回按键；

s2、触发html5页面返回按键，根据html5页面历史记录判断上级页面类型；

s3、当上级页面是html5页面，调用html5页面返回方法返回上级html5页面；

s4、当上级页面是ios原生页面，允许web端直接调用ios系统原生返回方法返回ios原生页面。

本具体实施例中基于混合开发中html5页面返回按键的页面跳转方法，步骤s1具体代码编写如下：

element.bind("click",function(){

if($ionichistory.backview()==null){

nativeservice.nativecall("goback");

}else{

4.$ionichistory.goback();

}});}

步骤s2具体代码编写如下：

naticeservice.registerhanler(@"goback",function(data,responsecallback){

if($ionichistory.backview()==null){

nativeservice.nativecall("goback");

}else{

$ionichistory.goback();

}});

步骤s4具体代码编写如下：

-(void)registergobackfunction

{

__weaktypeof(self)weakself=self;

[_webviewbridgeregisterhandler:@"goback"handler:^(iddata,wvjbresponsecallbackresponsecallback){

[weakself.navigationcontrollerpopviewcontrolleranimated:no];

}];

}

在本发明中使用第三方库webviewjavascriptbridge进行ios页面和html5页面的交互，html5中的页面返回方法的处理是采用的ionic。

如图2所示，一种基于混合开发的ios页面跳转系统，包括滑动返回模块、监听模块、判断模块、html5页面返回模块和ios页面返回模块。其中，滑动返回模块用于禁用原生系统的滑动返回功能并创建一个可识别的滑动返回手势；监听模块用于监听滑动返回模块创建的滑动返回手势和html5页面返回按键；判断模块用于判断上级页面类型，上级页面类型包括html5页面和ios原生页面；html5页面返回模块用于调用html5页面返回方法返回上级html5页面；ios页面返回模块用于调用ios系统原生返回方法返回ios原生页面。

上面结合附图对本发明的实施方式作了详细地说明，但是本发明并不局限于上述实施方式，在本领域普通技术人员所具备的知识范围内，还可以在不脱离本发明宗旨的前提下做出各种变化。