System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() 页面跳转处理方法及电子设备技术_技高网

页面跳转处理方法及电子设备技术

技术编号:41184660 阅读:2 留言:0更新日期:2024-05-07 22:17
本申请实施例公开了页面跳转处理方法及电子设备,所述方法包括:响应于从应用程序的第一页面跳转到第二页面的请求,如果所述第一页面为原生页面,第二页面为非原生页面或混合开发页面,则确定所述第一页面中存在的与所述第二页面共享的页面内容;在加载所述第二页面的页面内容的过程中,利用原生技术栈,根据所述共享的页面内容生成转场过渡内容,并在第二页面的上层创建原生浮层,以便展示所述转场过渡内容;接收到所述第二页面中的目标内容加载完成的通知消息后,关闭所述原生浮层并结束转场过渡内容的展示,以展示所述第二页面中的目标内容。通过本申请实施例,能够在从原生页面向非原生页面跳转的过程中提供转场过渡内容,提升用户体验。

【技术实现步骤摘要】

本申请涉及页面跳转,特别是涉及页面跳转处理方法及电子设备


技术介绍

1、在混合开发的移动端应用(app)中,可以混合使用原生技术栈与非原生技术栈进行页面开发,这就使得app中会存在使用原生技术栈开发的页面(简称“原生页面”),使用非原生技术栈开发的页面(简称“非原生页面”),甚至还可能包括使用原生技术栈以及非原生技术栈进行混合开发的页面(简称“混合开发页面”)。

2、其中,原生技术栈指的是在移动端应用开发中,使用原生平台提供的api(application programming interface,应用程序编程接口)和技术进行开发的技术栈。非原生技术栈即指带在移动端上使用的h5(第五代html(hypertext markup language,超文本标记语言),是构建web内容的一种语言描述方式)、weex(用于构建移动端跨平台用户界面(ui)的框架)、flutter(也是一种用于构建ui的工具包)、react native(另一种跨平台移动应用开发框架)等技术栈。

3、一般来说,原生技术栈在性能方向更好,页面加载速度会更快,但是如果需要修改原生页面,则会涉及到整个应用的重新发版,会比较不方便;非原生技术栈在动态性方面更佳,可以随时进行页面修改,而不需要对应用进行重新发版,但是,性能方面相对欠佳,存在加载时间相对比较长,可能会在页面跳转过程中经历一段比较长的白屏等待页面加载时间,会影响用户体验。

4、例如,在商品信息服务系统的移动端app中,客户端首页等可能会属于原生页面,其中的资源位中可以展示出一些推荐商品的商品信息卡片等,通过点击这种商品信息卡片可以跳转到商品详情页面;而这种商品详情页面却可能是非原生页面,或者也可能是原生与非原生混合开发的页面。此时,在页面跳转过程中,就可能会出现长时间的白屏状态,才能展示出商品详情页面的内容,等等。


技术实现思路

1、本申请提供了页面跳转处理方法及电子设备,能够在从原生页面向非原生页面跳转的过程中提供转场过渡内容,提升用户体验。

2、本申请提供了如下方案:

3、一种页面跳转处理方法,包括:

4、响应于从应用程序的第一页面跳转到第二页面的请求,如果所述第一页面为原生页面,第二页面为非原生页面或混合开发页面,则根据所述第一页面与第二页面在页面内容设计方面的相关性,确定所述第一页面中存在的与所述第二页面共享的页面内容;

5、在加载所述第二页面的页面内容的过程中,利用原生技术栈,根据所述共享的页面内容生成转场过渡内容,并在第二页面的上层创建原生浮层,以便在所述原生浮层中展示所述转场过渡内容;

6、接收到所述第二页面中的目标内容加载完成的通知消息后,关闭所述原生浮层并结束转场过渡内容的展示,以展示所述第二页面中的目标内容。

7、其中,所述转场过渡内容包括转场过渡动画。

8、其中,所述方法还包括:

9、在所述第一页面中设置所述转场过渡动画的起点,以便在所述第一页面中接收到跳转请求时,触发专场过渡动画的生成,并基于所述第一页面对所述转场过渡动画进行播放;

10、在转场过渡动画播放到目标状态时,切换到基于所述第二页面的原生浮层进行播放,并在所述原生浮层中设置所述转场过渡动画的终点,以便通过所述原生浮层接收所述第二页面发出的关于目标内容加载完成的通知消息,并关闭所述浮层、结束转场过渡内容的展示。

11、其中,所述第二页面通过非原生页面与原生页面之间的双向通信机制,向所述原生浮层提供关于所述第二页面中的目标内容加载完成的通知消息。

12、其中,所述第一页面中存在的与所述第二页面共享的页面内容包括:如果所述第一页面中存在第一页面内容,所述第二页面的首屏展示范围内存在通过非原生技术栈开发的第二页面内容,且所述第一页面内容与所述第二页面内容相同或相似,则将所述第一页面内容确定为所述共享页面内容。

13、其中,所述第一页面内容包括第一图像和/或文本元素,所述第二页面包括第二图像和/或文本元素,所述第一图像和/或文本元素是根据所述第二图像和/或文本元素进行尺寸缩小处理后生成的;

14、所述转场过渡内容包括转场过渡动画,所述转场过渡动画是通过为所述第一图像和/或文本元素配置逐渐放大的动效后生成的。

15、其中,所述应用程序包括商品信息服务系统提供的客户端应用程序;

16、所述第一页面中包括多个资源位,所述资源位用于展示商品信息卡片,所述商品信息卡片中至少包括第一图像和/或文本元素;

17、所述第二页面包括:通过对所述第一页面中的其中一商品信息卡片进行触发操作后,跳转到的商品详情信息页面,所述商品详情信息页面的首屏展示范围内包括第二图像和/或文本元素。

18、其中,所述第二页面中的目标内容加载完成的通知消息包括:所述第二页面中位于首屏展示范围内的所述第二页面内容加载完成的通知消息。

19、一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现前述任一项所述的方法的步骤。

20、一种电子设备,包括:

21、一个或多个处理器;以及

22、与所述一个或多个处理器关联的存储器,所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时,执行前述任一项所述的方法的步骤。

23、根据本申请提供的具体实施例,本申请公开了以下技术效果:

24、通过本申请实施例,针对从第一页面(原生页面)向第二页面(非原生页面或混合开发页面)进行跳转过程中可能出现的白屏等待加载问题,可以根据第一页面与第二页面在页面内容设计方面的相关性,确定所述第一页面中存在的与所述第二页面共享的页面内容;在加载所述第二页面的页面内容的过程中,可以利用原生技术栈,根据共享的页面内容生成转场过渡内容,另外还可以在第二页面的上层创建原生浮层,以便在所述原生浮层中展示所述转场过渡内容。之后,接收到所述第二页面中的目标内容加载完成的通知消息后,关闭所述原生浮层并结束转场过渡内容的展示,以展示所述第二页面中的目标内容。通过这种方式,由于可以在加载第二页面中的页面内容的过程中,展示转场过渡内容,并且,这种转场过渡内容可以根据第一页面中存在的与所述第二页面共享的页面内容生成,因此,可以使得页面跳转前后以及跳转过程中等不同状态下,展示给用户的内容之间存在接续性;另外,由于可以基于原生技术栈生成转场过渡内容,还可以通过在第二页面上层创建原生浮层,并基于这种原生浮层对转场过渡内容进行展示,因此,还可以使得过渡的过程更流畅自然,从而提升用户体验。

25、另外,在优选的实现方式下,具体的转场过渡内容可以是转场过渡动画,可以在第一页面中设置所述转场过渡动画的起点,这样,可以在所述第一页面中接收到跳转请求时,触发专场过渡动画的生成,并基于所述第一页面对所述转场过渡动画进行播放;在转场过渡动画播放到目标状态(例如,转场过渡动画逐本文档来自技高网...

【技术保护点】

1.一种页面跳转处理方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,

3.根据权利要求2所述的方法,其特征在于,所述方法还包括:

4.根据权利要求3所述的方法,其特征在于,

5.根据权利要求1所述的方法,其特征在于,

6.根据权利要求5所述的方法,其特征在于,

7.根据权利要求6所述的方法,其特征在于,

8.根据权利要求5所述的方法,其特征在于,

9.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现权利要求1至8任一项所述的方法的步骤。

10.一种电子设备,其特征在于,包括:

【技术特征摘要】

1.一种页面跳转处理方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,

3.根据权利要求2所述的方法,其特征在于,所述方法还包括:

4.根据权利要求3所述的方法,其特征在于,

5.根据权利要求1所述的方法,其特征在于,

6.根据权利要求5所述的...

【专利技术属性】
技术研发人员:王小龙姚尧
申请(专利权)人:阿里巴巴中国网络技术有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1