CN109634604A - 基于混合开发的iOS页面跳转方法及其系统 - Google Patents
基于混合开发的iOS页面跳转方法及其系统 Download PDFInfo
- Publication number
- CN109634604A CN109634604A CN201811451410.2A CN201811451410A CN109634604A CN 109634604 A CN109634604 A CN 109634604A CN 201811451410 A CN201811451410 A CN 201811451410A CN 109634604 A CN109634604 A CN 109634604A
- Authority
- CN
- China
- Prior art keywords
- page
- return
- html5
- ios
- higher level
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
- G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
本发明提出了一种基于混合开发的iOS页面跳转方法及其系统，基于滑动返回的页面跳转方法步骤如下：S1、禁用原生系统滑动返回功能；S2、创建滑动返回手势；S3、监听滑动返回手势；S4、判断上级页面类型；S5、调用html5页面返回方法返回上级html5页面；S6、调用原生返回方法返回原生页面。基于返回按键的页面跳转方法步骤如下：S1、监听页面返回按键；S2、点击按键，判断上级页面类型；S3、调用html5页面返回方法返回上级html5页面；S4、调用原生返回方法返回原生页面。本发明系统包括滑动返回模块、监听模块、判断模块、html5页面返回模块、iOS页面返回模块。采用本发明方法和系统可以快速且正确的返回上级页面，避免混合开发中多级页面返回错乱的情况。
Description
技术领域
本发明涉及混合开发的iOS软件中页面跳转的方法及其系统，属于APP混合开发领域。
背景技术
目前，APP开发由最初的本地化开发慢慢过渡到混合开发，混合开发的APP既有本地化APP的良好用户交互体验，又具有Web APP跨平台开发的优点。越来越多的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:self action:@selector(swipeGoBack:)];
swipeGesture.delegate = self; // 设置手势代理，拦截手势触发
swipeGesture.direction = UISwipeGestureRecognizerDirectionRight;
[clearView addGestureRecognizer:swipeGesture];
滑动
- (void)swipeGoBack:(UISwipeGestureRecognizer *)swipe
{
[_webViewBridge callHandler:@"goBack"];
}
步骤S4具体代码编写如下：
naticeService.registerHanler(@"goBack",function(data,responseCallback){
if($ionicHistory.backView() == null){
nativeService.nativeCall("goback");
}else{
$ionicHistory.goBack();
}})
步骤S6具体代码编写如下：
- (void)registerGoBackFunction
{
__weak typeof(self) weakSelf = self;
[_webViewBridge registerHandler:@"goback" handler:^(id data,WVJBResponseCallback responseCallback) {
[weakSelf.navigationController popViewControllerAnimated: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
{
__weak typeof(self) weakSelf = self;
[_webViewBridge registerHandler:@"goback" handler:^(id data,WVJBResponseCallback responseCallback) {
[weakSelf.navigationController popViewControllerAnimated:NO];
}];
}
在本发明中使用第三方库WebViewJavaScriptBridge进行iOS页面和html5页面的交互，html5中的页面返回方法的处理是采用的ionic。
如图2所示，一种基于混合开发的iOS页面跳转系统，包括滑动返回模块、监听模块、判断模块、html5页面返回模块和iOS页面返回模块。其中，滑动返回模块用于禁用原生系统的滑动返回功能并创建一个可识别的滑动返回手势；监听模块用于监听滑动返回模块创建的滑动返回手势和html5页面返回按键；判断模块用于判断上级页面类型，上级页面类型包括html5页面和iOS原生页面；html5页面返回模块用于调用html5页面返回方法返回上级html5页面；iOS页面返回模块用于调用iOS系统原生返回方法返回iOS原生页面。
上面结合附图对本发明的实施方式作了详细地说明，但是本发明并不局限于上述实施方式，在本领域普通技术人员所具备的知识范围内，还可以在不脱离本发明宗旨的前提下做出各种变化。
Claims (4)
1.基于混合开发中滑动返回的页面跳转方法，其特征在于，包括以下步骤：
S1、禁用原生系统的滑动返回功能；
S2、给WKWebview创建一个滑动返回手势；
S3、对S2中的滑动返回手势进行监听；
S4、在html5页面触发滑动返回手势，根据html5页面历史记录判断上级页面类型；
S5、当上级页面是html5页面，调用html5页面返回方法返回上级html5页面；
S6、当上级页面是iOS原生页面，调用iOS系统原生返回方法返回iOS原生页面。
2.基于混合开发中html5页面返回按键的页面跳转方法，其特征在于，包括以下步骤：
S1、监听html5页面返回按键；
S2、触发html5页面返回按键，根据html5页面历史记录判断上级页面类型；
S3、当上级页面是html5页面，调用html5页面返回方法返回上级html5页面；
S4、当上级页面是iOS原生页面，调用iOS系统原生返回方法返回iOS原生页面。
3.基于混合开发的iOS页面跳转系统，其特征在于，包括：
滑动返回模块，用于禁用原生系统的滑动返回功能并创建一个可识别的滑动返回手势；
监听模块，用于监听滑动返回模块创建的滑动返回手势和html5页面返回按键；
判断模块，用于判断上级页面类型；
html5页面返回模块，用于调用html5页面返回方法返回上级html5页面；
iOS页面返回模块，用于调用iOS系统原生返回方法返回iOS原生页面。
4.根据权利要求3所述的基于混合开发的iOS页面跳转系统，其特征在于，所述的上级页面类型包括html5页面和iOS原生页面。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811451410.2A CN109634604A (zh) | 2018-11-30 | 2018-11-30 | 基于混合开发的iOS页面跳转方法及其系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811451410.2A CN109634604A (zh) | 2018-11-30 | 2018-11-30 | 基于混合开发的iOS页面跳转方法及其系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109634604A true CN109634604A (zh) | 2019-04-16 |
Family
ID=66070417
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811451410.2A Pending CN109634604A (zh) | 2018-11-30 | 2018-11-30 | 基于混合开发的iOS页面跳转方法及其系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109634604A (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111459481A (zh) * | 2020-03-26 | 2020-07-28 | 平安普惠企业管理有限公司 | 页面侧滑方法、装置、电子设备和存储介质 |
| CN111831280A (zh) * | 2020-05-29 | 2020-10-27 | 大数金科网络技术有限公司 | 基于全局单例WebView容器的混合开发方法 |
| CN113703760A (zh) * | 2020-05-22 | 2021-11-26 | 北京沃东天骏信息技术有限公司 | 一种页面跳转控制方法和装置 |
| CN114064178A (zh) * | 2021-11-16 | 2022-02-18 | 平安付科技服务有限公司 | 页面的返回方法、装置、计算机设备及存储介质 |
| CN114518832A (zh) * | 2022-02-15 | 2022-05-20 | 网易（杭州）网络有限公司 | 触控终端的显示控制方法、装置及电子设备 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040221006A1 (en) * | 2003-04-30 | 2004-11-04 | International Business Machines Corporation | Method and apparatus for marking of web page portions for revisiting the marked portions |
| CN103984686A (zh) * | 2013-02-07 | 2014-08-13 | 阿里巴巴集团控股有限公司 | 页面切换方法及装置 |
| CN107305553B (zh) * | 2016-04-20 | 2020-02-07 | 北京京东尚科信息技术有限公司 | 一种基于Hybrid App中动态跳转Hybrid页面的方法及系统 |
-
2018
- 2018-11-30 CN CN201811451410.2A patent/CN109634604A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040221006A1 (en) * | 2003-04-30 | 2004-11-04 | International Business Machines Corporation | Method and apparatus for marking of web page portions for revisiting the marked portions |
| CN103984686A (zh) * | 2013-02-07 | 2014-08-13 | 阿里巴巴集团控股有限公司 | 页面切换方法及装置 |
| CN107305553B (zh) * | 2016-04-20 | 2020-02-07 | 北京京东尚科信息技术有限公司 | 一种基于Hybrid App中动态跳转Hybrid页面的方法及系统 |
Non-Patent Citations (2)
| Title |
|---|
| FLYING_IN_THE_WORLD: "iOS webView与H5的交互(返回页面的处理)", 《HTTPS://BLOG.CSDN.NET/FLYING_IN_THE_WORLD/ARTICLE/DETAILS/51882474》 * |
| 来者可追文过饰非关注: "iOS开发-WKWebView或者UIScrollView添加侧滑返回手势", 《HTTPS://WWW.JIANSHU.COM/P/EA7C695364BE》 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111459481A (zh) * | 2020-03-26 | 2020-07-28 | 平安普惠企业管理有限公司 | 页面侧滑方法、装置、电子设备和存储介质 |
| CN113703760A (zh) * | 2020-05-22 | 2021-11-26 | 北京沃东天骏信息技术有限公司 | 一种页面跳转控制方法和装置 |
| CN111831280A (zh) * | 2020-05-29 | 2020-10-27 | 大数金科网络技术有限公司 | 基于全局单例WebView容器的混合开发方法 |
| CN114064178A (zh) * | 2021-11-16 | 2022-02-18 | 平安付科技服务有限公司 | 页面的返回方法、装置、计算机设备及存储介质 |
| CN114518832A (zh) * | 2022-02-15 | 2022-05-20 | 网易（杭州）网络有限公司 | 触控终端的显示控制方法、装置及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109634604A (zh) | 基于混合开发的iOS页面跳转方法及其系统 | |
| EP3579104B1 (en) | Method and apparatus for establishing an application prediction model, storage medium and terminal | |
| CN108647055B (zh) | 应用程序预加载方法、装置、存储介质及终端 | |
| CN103365529B (zh) | 一种图标管理方法及移动终端 | |
| CN100504769C (zh) | 用于实现一般的应用程序接口的系统和方法 | |
| CN103440092B (zh) | 一种返回按键的处理方法、系统及移动终端 | |
| CN105320417B (zh) | 页面切换方法及客户端 | |
| CN108848142B (zh) | 消息推送方法、装置、计算机设备和存储介质 | |
| EP2885702A1 (en) | Method and device for controlling invocation of an application programming interface | |
| CN112130729B (zh) | 页面处理方法、装置、计算机设备和存储介质 | |
| CN102929925A (zh) | 一种基于浏览内容的搜索方法及装置 | |
| CN108121485A (zh) | 一种图标整理方法、终端及计算机可读存储介质 | |
| CN109740090A (zh) | 一种基于混合开发的android页面返回跳转方法及其系统 | |
| CN102893250B (zh) | 确定操作对象的方法和终端 | |
| CN110119290A (zh) | 应用程序备用页面切换方法、装置、计算机设备和存储介质 | |
| CN104598238A (zh) | 应用程序推送消息的屏蔽方法及智能终端 | |
| CN109782983B (zh) | 应用程序界面的视图布局调整方法和装置 | |
| CN103473013A (zh) | 一种应用界面调节的方法及移动终端 | |
| CN105224216A (zh) | 一种用户终端控制方法及用户终端 | |
| CN107220377B (zh) | 搜索方法、电子设备及计算机存储介质 | |
| CN104517049A (zh) | 一种终端解锁方法 | |
| CN106527903B (zh) | 触摸控制方法及装置 | |
| CN101884027A (zh) | 用于动态码扩展的方法和系统 | |
| CN107577611A (zh) | 应用调试装置与方法 | |
| CN113312122A (zh) | 虚拟键盘调用方法、装置、计算机存储介质及电子设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20190416 |
|
| WD01 | Invention patent application deemed withdrawn after publication |