CN112052064B - 小程序页面跳转方法、装置、设备与计算机可读存储介质 - Google Patents
小程序页面跳转方法、装置、设备与计算机可读存储介质 Download PDFInfo
- Publication number
- CN112052064B CN112052064B CN202011045129.6A CN202011045129A CN112052064B CN 112052064 B CN112052064 B CN 112052064B CN 202011045129 A CN202011045129 A CN 202011045129A CN 112052064 B CN112052064 B CN 112052064B
- Authority
- CN
- China
- Prior art keywords
- page
- applet
- jump
- path
- data request
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 118
- 230000009191 jumping Effects 0.000 title claims abstract description 26
- 238000009877 rendering Methods 0.000 claims abstract description 63
- 230000006870 function Effects 0.000 claims description 164
- 230000008569 process Effects 0.000 claims description 34
- 230000009466 transformation Effects 0.000 claims description 27
- 238000001514 detection method Methods 0.000 claims description 10
- 230000001960 triggered effect Effects 0.000 claims description 10
- 239000003086 colorant Substances 0.000 claims description 5
- 238000002407 reforming Methods 0.000 claims 1
- 230000009471 action Effects 0.000 abstract description 5
- 238000004891 communication Methods 0.000 description 6
- 238000005516 engineering process Methods 0.000 description 6
- 230000036316 preload Effects 0.000 description 4
- 238000013459 approach Methods 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 238000003672 processing method Methods 0.000 description 2
- 230000002159 abnormal effect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
Classifications
-
- 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
-
- 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/445—Program loading or initiating
- G06F9/44568—Immediately runnable code
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明公开了一种小程序页面跳转方法，包括：若检测到页面跳转指令，则确定所述页面跳转指令对应的路径，并确定所述路径对应的页面加载方式；若所述页面加载方式为并行加载，则调用对应的异步数据请求函数加载所述路径对应的页面结构，同时，请求所述路径对应的页面数据；检测所述页面结构和所述页面数据是否满足渲染条件；若满足，则对所述页面数据和所述页面结构进行渲染，以跳转显示对应的目标页面。本发明还公开了一种小程序页面跳转装置、设备和计算机可读存储介质。本发明通过将页面加载以及数据请求两个动作并行进行，使得小程序页面在等待数据通知时出现的白屏时间减少为两动作的最大值，加快了小程序页面的跳转速度。
Description
技术领域
本发明涉及金融科技(Fintech)技术领域，尤其涉及小程序页面跳转方法、装置、设备与计算机可读存储介质。
背景技术
近年来，随着金融科技(Fintech)，尤其是互联网金融的不断发展，小程序技术被引入银行等金融机构的日常服务中。在银行等金融机构的日常服务过程中，为满足业务需要，常常需要使用一些不需要下载和安装即可使用的应用——小程序。而随着小程序不断迭代升级，小程序体积越来越大，使得小程序页面之间的跳转耗时变长，因此，如何快速跳转小程序页面是当前技术人员需要攻克的技术问题。
现有技术中，为了让体积比较大的小程序可以实现页面间的快速跳转，提供了一种名为“分包”的技术方案，其原理是将一定功能独立的页面配置到独立分包中，由于独立分包不依赖主包即可运行，也即在启动分包页面时，不需要下载主包，可以很大程度提升分包页面的跳转速度，同时，通过“分包预下载”，技术人员可以配置进入某个页面时预下载可能会用到的分包，避免页面切换时，出现“白屏”状态，使得小程序页面可以快速跳转。
然而，此种方式仅限于预加载包内资源(包括页面逻辑文件)，而预加载包内资源仅是初始的页面组成，小程序页面中的许多数据是基于在页面逻辑文件中向服务端请求的函数方法得到的，仅仅通过分包预加载无法把绝大多数需要进入页面后运行的请求逻辑给预先执行。也即，现有技术中，通过页面缓存的方式来加快小程序页面的打开，但是缓存的页面由于分包的局限性，使得在得到缓存的页面之后，还得进一步渲染才可以显示出来；并且，一次性预加载太多体积大的分包，同样会给小程序带来一定的性能问题。
可见，现有小程序页面跳转方式还不够智能快速。
发明内容
本发明的主要目的在于提出一种小程序页面跳转方法、装置、设备与计算机可读存储介质，旨在实现小程序页面的快速跳转。
为实现上述目的，本发明提供一种小程序页面跳转方法，所述小程序页面跳转方法包括如下步骤：
若检测到页面跳转指令，则确定所述页面跳转指令对应的路径，并确定所述路径对应的页面加载方式；
若所述页面加载方式为并行加载，则调用对应的异步数据请求函数加载所述路径对应的页面结构，同时，请求所述路径对应的页面数据；
检测所述页面结构和所述页面数据是否满足渲染条件；
若满足，则对所述页面数据和所述页面结构进行渲染，以跳转显示对应的目标页面。
优选地，所述确定所述路径对应的页面加载方式的步骤包括：
确定所述路径是否在预设路径数组内；
若是，则确定所述页面加载方式为并行加载。
优选地，所述小程序页面跳转方法还包括：
若检测到页面跳转改造指令，则将所述页面跳转改造指令对应的改造页面添加进小程序的预加载路由管理对象中；
在所述预加载路由管理对象中，确定所述改造页面对应的异步数据请求函数，以覆盖所述改造页面原有的数据请求函数，并将所述改造页面的路径添加进预设路径数组中。
优选地，所述在所述预加载路由管理对象中，确定所述改造页面对应的异步数据请求函数，以覆盖所述改造页面原有的数据请求函数的步骤包括：
在所述预加载路由管理对象中，取出所述改造页面原有的数据请求函数，并为所述数据请求函数添加异步数据请求函数属性，以得到所述改造页面的异步数据请求函数；
基于所述改造页面的异步数据请求函数，确定所述改造页面的页面跳转方法，并以所述页面跳转方法接管所述改造页面原有的页面跳转方法。
优选地，所述检测所述页面结构和所述页面数据是否满足渲染条件的步骤包括：
检测是否存在基于所述页面结构触发的生命周期函数，并检测所述异步数据请求函数的函数状态；
若检测到所述生命周期函数，且所述异步数据请求函数的函数状态为已处理，则确定所述页面结构和所述页面数据满足渲染条件。
优选地，所述检测是否存在基于所述页面结构触发的生命周期函数，并检测所述异步数据请求函数的函数状态的步骤之后，所述小程序页面跳转方法还包括：
若检测到所述生命周期函数，但所述异步数据请求函数的函数状态为处理中，则显示所述页面结构对应的骨架页面；
在检测到所述函数状态为已处理时，基于所述页面数据，对所述骨架页面进行渲染，以跳转显示对应的目标页面。
优选地，所述显示所述页面结构对应的骨架页面的步骤包括：
创建所述页面结构对应的骨架结构；
确定所述骨架结构中需要显示页面数据的目标元素，并确定所述目标元素对应的背景色；
为所述目标元素增加所述背景色，以得到所述骨架页面。
此外，为实现上述目的，本发明还提供一种小程序页面跳转装置，所述小程序页面跳转装置包括：
检测确定模块，用于若检测到页面跳转指令，则确定所述页面跳转指令对应的路径，并确定所述路径对应的页面加载方式；
调用加载模块，用于若所述页面加载方式为并行加载，则调用对应的异步数据请求函数加载所述路径对应的页面结构，同时，请求所述路径对应的页面数据；
检测判断模块，用于检测所述页面结构和所述页面数据是否满足渲染条件；
渲染显示模块，用于若满足，则对所述页面数据和所述页面结构进行渲染，以跳转显示对应的目标页面。
优选地，所述检测确定模块还用于：
确定所述路径是否在预设路径数组内；
若是，则确定所述页面加载方式为并行加载。
优选地，所述小程序页面跳转装置还包括添加改造模块，添加改造模块用于：
若检测到页面跳转改造指令，则将所述页面跳转改造指令对应的改造页面添加进小程序的预加载路由管理对象中；
在所述预加载路由管理对象中，确定所述改造页面对应的异步数据请求函数，以覆盖所述改造页面原有的数据请求函数，并将所述改造页面的路径添加进预设路径数组中。
优选地，所述添加改造模块还用于：
在所述预加载路由管理对象中，取出所述改造页面原有的数据请求函数，并为所述数据请求函数添加异步数据请求函数属性，以得到所述改造页面的异步数据请求函数；
基于所述改造页面的异步数据请求函数，确定所述改造页面的页面跳转方法，并以所述页面跳转方法接管所述改造页面原有的页面跳转方法。
优选地，所述检测判断模块还用于：
检测是否存在基于所述页面结构触发的生命周期函数，并检测所述异步数据请求函数的函数状态；
若检测到所述生命周期函数，且所述异步数据请求函数的函数状态为已处理，则确定所述页面结构和所述页面数据满足渲染条件。
优选地，所述渲染显示模块还用于：
若检测到所述生命周期函数，但所述异步数据请求函数的函数状态为处理中，则显示所述页面结构对应的骨架页面；
在检测到所述函数状态为已处理时，基于所述页面数据，对所述骨架页面进行渲染，以跳转显示对应的目标页面。
优选地，所述渲染显示模块还用于：
创建所述页面结构对应的骨架结构；
确定所述骨架结构中需要显示页面数据的目标元素，并确定所述目标元素对应的背景色；
为所述目标元素增加所述背景色，以得到所述骨架页面。
此外，为实现上述目的，本发明还提供一种小程序页面跳转设备，所述小程序页面跳转设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的小程序页面跳转程序，所述小程序页面跳转程序被所述处理器执行时实现如上所述的小程序页面跳转方法的步骤。
此外，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有小程序页面跳转程序，所述小程序页面跳转程序被处理器执行时实现如上所述的小程序页面跳转方法的步骤。
本发明提出的小程序页面跳转方法，若检测到页面跳转指令，则确定所述页面跳转指令对应的路径，并确定所述路径对应的页面加载方式；若所述页面加载方式为并行加载，则调用对应的异步数据请求函数加载所述路径对应的页面结构，同时，请求所述路径对应的页面数据；检测所述页面结构和所述页面数据是否满足渲染条件；若满足，则对所述页面数据和所述页面结构进行渲染，以跳转显示对应的目标页面。本发明不需要预先加载页面，而是通过将页面加载以及数据请求两个动作并行进行，使得小程序页面在等待数据通知时出现的白屏时间减少为两动作的最大值，从而加快小程序页面的跳转速度，避免因预先加载而造成的性能问题，实现小程序页面的智能快速跳转。
附图说明
图1是本发明实施例方案涉及的硬件运行环境的设备结构示意图；
图2为本发明小程序页面跳转方法第一实施例的流程示意图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
如图1所示，图1是本发明实施例方案涉及的硬件运行环境的设备结构示意图。
本发明实施例设备可以是移动终端或服务器设备。
如图1所示，该设备可以包括：处理器1001，例如CPU，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。
本领域技术人员可以理解，图1中示出的设备结构并不构成对设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及小程序页面跳转程序。
其中，操作系统是管理和控制小程序页面跳转设备与软件资源的程序，支持网络通信模块、用户接口模块、小程序页面跳转程序以及其他程序或软件的运行；网络通信模块用于管理和控制网络接口1002；用户接口模块用于管理和控制用户接口1003。
在图1所示的小程序页面跳转设备中，所述小程序页面跳转设备通过处理器1001调用存储器1005中存储的小程序页面跳转程序，并执行下述小程序页面跳转方法各个实施例中的操作。
基于上述硬件结构，提出本发明小程序页面跳转方法实施例。
参照图2，图2为本发明小程序页面跳转方法第一实施例的流程示意图，所述方法包括：
步骤S10，若检测到页面跳转指令，则确定所述页面跳转指令对应的路径，并确定所述路径对应的页面加载方式；
步骤S20，若所述页面加载方式为并行加载，则调用对应的异步数据请求函数加载所述路径对应的页面结构，同时，请求所述路径对应的页面数据；
步骤S30，检测所述页面结构和所述页面数据是否满足渲染条件；
步骤S40，若满足，则对所述页面数据和所述页面结构进行渲染，以跳转显示对应的目标页面。
本实施例小程序页面跳转方法运用于理财机构或者银行等金融机构的小程序页面跳转设备中，小程序页面跳转设备可以是终端、机器人或者PC设备等，为描述方便，小程序页面跳转设备以跳转设备简称。跳转设备安装有各类应用，如微信应用等，并在应用中运行小程序，如微信小程序等。在下述描述中，以微信小程序为例进行描述。需要说明的是，小程序由界面、配置和逻辑组成，其中，界面和配置组成了页面的渲染层，逻辑单独为页面的逻辑层。不同的小程序页面对应渲染层里面不同的webview(网页视图，一个基于webkit引擎、展现web页面的控件)，而所有的小程序页面共享一个逻辑层。
在实际应用中，每次在小程序打开新页面，都会启动一个新的webview来渲染页面，webview启动加载页面结构，到接收页面数据，再到渲染的过程会有一定的时间延迟，启动页面后，逻辑层在页面onLoad(微信小程序生命周期函数，页面创建时执行的函数)或是onShow(同onLoad)的回调函数中通过网络请求加载页面数据，再通知渲染层进行数据渲染，在这个过程中新页面都会是白屏的状态，也即，打开一个新页面到页面渲染的时间主要消耗在webview启动加载页面结构和页面数据的请求上，此外，页面数据的请求需要依赖webview启动后的生命周期函数通知才能触发，因此小程序页面之间的跳转所需时间是页面结构加载时间与页面数据请求时间之和。
为此，本实施例通过重写覆盖小程序页面跳转加载方式，将页面结构的加载，以及页面数据的请求两个动作并行进行，在渲染层初始化webview加载页面结构的时候就在逻辑层中请求页面数据，并将页面数据维持在内存中，等到页面触发onLoad的时候取出来通知给逻辑层，使得等待数据通知的白屏时间就减少为两者的最大值。
以下将对各个步骤进行详细说明：
步骤S10，若检测到页面跳转指令，则确定所述页面跳转指令对应的路径，并确定所述路径对应的页面加载方式；
在本实施例中，用户使用跳转设备操作跳转设备中的小程序时，可通过点击等操作切换小程序页面，从而触发小程序页面跳转指令。
若跳转设备检测到页面跳转指令，则先确定页面跳转指令对应的路径，也即即将跳转显示的目标页面的路径地址，再确定该路径对应的页面加载方式，也即确定即将跳转显示的目标页面采用何种加载方式进行页面的加载。
在一实施例中，确定页面加载方式的过程包括：
步骤a1，确定所述路径是否在预设路径数组内；
在一实施例中，事先定义一个路径数组，并定义路径数组内的路径所对应的页面都采用并行加载的页面加载方式进行加载，也即，预设路径数组指的是页面加载方式为并行加载的路径的集合，因此，跳转设备可将当前路径与预设路径数组中的路径进行比较，判断当前路径是否在预设路径数组内。
在具体实施时，可由开发人员自行定义需要采用并行加载的路径。
在另一实施例中，步骤a1包括：
确定所述路径对应的页面数据的数据大小，并确定所述数据大小是否大于预设大小；
若是，则确定所述路径在预设路径数组内。
在另一实施例中，在判断当前路径是否在预设路径数组内时，通过判断当前路径对应的页面数据的数据大小，从而判断当前路径是否在预设路径数组内，可以理解的，当前路径对应的页面数据越大，其请求的时间越长，也即“白屏”的时间会越长，因此，可事先设一数据大小，在当前路径对应的页面数据的数据大小大于预设的数据大小时，判定即将请求的页面数据的请求时间会比较长，因此，应当采用并行加载的页面加载方式，也即判定当前路径在预设路径数组内。
此外，在其他实施方式中，跳转设备还可以通过判断当前路径对应的目标页面的页面类型，来判断当前路径是否在预设路径数组内，具体确定当前路径对应的目标页面的页面类型是否为支付页面或者信息采集页面等关键页面(具体可根据实际情况定义关键页面)，若是，则确定当前路径在预设路径数组内等。
步骤a2，若是，则确定所述页面加载方式为并行加载。
若确定当前路径在预设路径数组内，则确定即将跳转显示的目标页面的页面加载方式为并行加载，使得目标页面可以快速跳转显示。
步骤S20，若所述页面加载方式为并行加载，则调用对应的异步数据请求函数加载所述路径对应的页面结构，同时，请求所述路径对应的页面数据。
在本实施例中，若确定目标页面的页面加载方式为并行加载，跳转设备则调用预加载路由管理对象，具体调用预加载路由管理对象中对应的异步数据请求函数，并按照异步数据请求函数中的规定，同时加载当前路径对应的页面结构，以及当前路径对应的页面数据。
具体的，跳转设备初始化webview，以加载页面结构，与此同时，跳转设备按照异步数据请求函数的规定，通知数据请求模块，也即逻辑层，请求当前路径对应的页面数据，并保存在内存中，其中，数据请求模块提供两个方法，一个用于缓存数据请求的方法preLoadRequest，一个是用于获取页面数据的方法takeRequest。
步骤S30，检测所述页面结构和所述页面数据是否满足渲染条件；
在本实施例中，跳转设备在执行并行操作后，实时检测加载的页面结构和请求的页面数据是否满足渲染条件。
其中，在一实施例中，步骤S30包括：
步骤b1检测是否存在基于所述页面结构触发的生命周期函数，并检测所述异步数据请求函数的函数状态；
在一实施例中，跳转设备通过检测是否存在生命周期函数，从而确定页面结构是否加载完毕，可以理解的，渲染层加载完页面结构之后，会触发生命周期函数，从而通知逻辑层；而页面数据是否请求完毕，则通过异步数据请求函数的函数状态确定，在本实施例中，利用Promise对象的状态管理以及AJAX的方式实现，以便根据数据请求的不同函数状态在请求到响应后把结果赋值，其中，Promise对象是一个代理对象(代理一个值)，其允许异步操作的成功和失败分别绑定相应的处理方法(handlers)，这让异步方法可以像同步方法那样返回值，也即不同的函数状态。
一个Promise有以下几种状态：
pending:初始状态，既不是成功，也不是失败状态。
fulfilled:意味着操作成功完成。
rejected:意味着操作失败。
pending状态的Promise对象可能会变为fulfilled状态并传递一个值给相应的状态处理方法，也可能变为失败状态(rejected)并传递失败信息。当其中任一种情况出现时，Promise对象的then方法绑定的处理方法(handlers)就会被调用(then方法包含两个参数：onfulfilled和onrejected，它们都是Function类型。当Promise状态为fulfilled时，调用then的onfulfilled方法，当Promise状态为rejected时，调用then的onrejected方法，所以在异步操作的完成和绑定处理方法之间不存在竞争)在本实施例中，onfulfilled方法可对应已处理的函数状态，onrejected方法可对应处理中的函数状态。
而AJAX(Asynchronous JavaScript And XML)是一种使用XMLHttpRequest技术构建更复杂，动态的网页的编程实践。AJAX允许异步工作，这意味着当页面的一部分正试图重新加载时，其他部分的代码可以继续运行。
也即，在一实施例中，跳转设备通知数据请求模块进行页面数据的请求时，通过异步数据请求函数的函数状态记录请求状态，如函数状态为处理中，则意味中页面数据还在请求中，若函数状态为已处理，则表示页面数据已请求完毕，可以直接从内存中取出。
在具体实施时，跳转设备通过异步数据请求函数，向对应的服务器请求当前路径对应的页面数据，也即页面数据为跳转设备外的外部数据，当然，页面数据还可以是跳转设备中的本地数据，在此不做具体限定。
此外，还需要说明的是，若数据请求模块在请求页面数据过程中出现异常，如当前路径对应的页面数据为无效数据等，跳转设备则输出相应的提示信息，以提示用户进行相应的操作，如重试操作等。
步骤b2，若检测到所述生命周期函数，且所述异步数据请求函数的函数状态为已处理，则确定所述页面结构和所述页面数据满足渲染条件。
在一实施例中，跳转设备若检测到生命周期函数，也即页面结构加载完毕，且，异步数据请求函数的函数状态为已处理，也即页面数据请求完毕，已存储在内存中，此时，则确定页面结构和页面数据满足渲染条件。
需要解释的是，在小程序中，在渲染层webview启动后才能接受页面数据setData通知(微信小程序中用于将页面数据从逻辑层发送到渲染层的函数)，因此，在页面结构加载完成，页面数据请求完毕后，才能进行页面渲染。
步骤S40，若满足，则对所述页面数据和所述页面结构进行渲染，以跳转显示对应的目标页面。
在本实施例中，若确定页面结构和页面数据满足渲染条件，则对页面数据和页面结构进行渲染，从而得到目标页面，最后跳转显示该目标页面。
渲染过程主要是在渲染层，宿主环境(也即小程序的宿主应用客户端)会把页面数据转化成对应的JS对象；接着，将JS对象转成DOM树，交由渲染层线程渲染，最后更新UI界面，由于渲染技术为现有技术，在此不再具体赘述。
本实施例若检测到页面跳转指令，则确定所述页面跳转指令对应的路径，并确定所述路径对应的页面加载方式；若所述页面加载方式为并行加载，则调用对应的异步数据请求函数加载所述路径对应的页面结构，同时，请求所述路径对应的页面数据；检测所述页面结构和所述页面数据是否满足渲染条件；若满足，则对所述页面数据和所述页面结构进行渲染，以跳转显示对应的目标页面。本发明不需要预先加载页面，而是通过将页面加载以及数据请求两个动作并行进行，使得小程序页面在等待数据通知时出现的白屏时间减少为两动作的最大值，从而加快小程序页面的跳转速度，避免因预先加载而造成的性能问题，实现小程序页面的智能快速跳转。
进一步地，基于本发明小程序页面跳转方法第一实施例，提出本发明小程序页面跳转方法第二实施例。
小程序页面跳转方法的第二实施例与小程序页面跳转方法的第一实施例的区别在于，小程序页面跳转方法还包括：
步骤c，若检测到页面跳转改造指令，则将所述页面跳转改造指令对应的改造页面添加进小程序的预加载路由管理对象中；
步骤d，在所述预加载路由管理对象中，确定所述改造页面对应的异步数据请求函数，以覆盖所述改造页面原有的数据请求函数，并将所述改造页面的路径添加进预设路径数组中。
本实施例通过对原小程序页面的页面跳转方式进行重写覆盖，使得小程序员页面的页面跳转过程中，可以并行执行页面结构的加载，以及页面数据的请求。
以下将对各个步骤进行详细说明：
步骤c，若检测到页面跳转改造指令，则将所述页面跳转改造指令对应的改造页面添加进小程序的预加载路由管理对象中。
在本实施例中，在小程序中自定义一个预加载路由管理对象，用于接管原小程序跳转接口，使得在进行小程序页面跳转过程中，原本调用原小程序接口的动作，改变成调用预加载路由管理对象。
在本实施例中，预加载路由管理对象提供三个接口，分别为：
Add接口：添加页面对象；用于取出其中的数据请求函数，从而给页面增加preload(预加载)的异步数据请求函数属性(类似于小程序中的生命周期函数)；还用于把页面对象的路径添加到统一管理的路径数组中；
navigateTo接口：接管小程序原有的navigateTo方法(小程序中用于保留当前页面，跳转到应用内的某个页面的方法)，在跳转页面时，同时异步请求页面数据并让底层小程序机制，也即渲染层，加载新页面结构。
redirectTo接口：接管微信小程序的redirectTo方法(微信小程序中用于关闭当前页面，跳转到应用内的某个页面的方法)，在重定向页面之后，同时异步请求页面数据并让底层小程序机制，也即渲染层，加载新页面结构。
因此，若跳转设备检测到页面跳转改造指令，则将页面跳转改造指令对应的改造页面添加进小程序的预加载路由管理对象中，具体将改造页面添加到Add接口。
步骤d，在所述预加载路由管理对象中，确定所述改造页面对应的异步数据请求函数，以覆盖所述改造页面原有的数据请求函数，并将所述改造页面的路径添加进预设路径数组中。
之后，跳转设备在预加载路由管理对象中，确定改造页面对应的异步数据请求函数，以覆盖改造页面原有的数据请求函数，其中，异步数据请求函数可以是开发人员自定义的路由方法，在实际操作过程中，只需将自定义的navigateTo和redirectTo注入预加载路由管理对象中即可，也即，异步数据请求函数包括navigateTo和redirectTo，最后，将改造页面的路径添加进预设路径数组中，作为判断改造页面并行加载的依据。
在一实施例中，步骤d包括：
步骤d1，在所述预加载路由管理对象中，取出所述改造页面原有的数据请求函数，并为所述数据请求函数添加异步数据请求函数属性，以得到所述改造页面的异步数据请求函数；
在一实施例中，跳转设备将改造页面添加进预加载路由管理对象中后，通过Add接口，取出改造页面在小程序中原有的数据请求函数，并为该数据请求函数添加异步数据请求函数属性，从而得到异步数据请求函数，其中，异步数据请求函数属性可以是开发人员手动实时输入的，也可以是预存在跳转设备本地，跳转设备从本地获取的。
需要说明的是，异步数据请求函数的实现核心是在定义页面时在页面上定义preload(预加载)的异步数据请求函数属性，这个函数返回一个异步结果，小程序的跳转接口调用之前将需要异步数据请求函数给到数据请求模块。
步骤d2，基于所述改造页面的异步数据请求函数，确定所述改造页面的页面跳转方法，并以所述页面跳转方法接管所述改造页面原有的页面跳转方法。
之后，根据改造页面的异步数据请求函数，确定改造页面的页面跳转方法，其中，页面跳转方法包括保留跳转(navigateTo)和关闭跳转(redirectTo)，然后，以确定跳转方法，接管改造页面原有的页面跳转方法，从而实现页面跳转加载方式的重写覆盖，使得原来串行的过程，可以并行处理。
本实施例通过对原小程序页面的页面跳转方式进行重写覆盖，使得小程序员页面的页面跳转过程中，由于异步数据请求函数的存在，可以并行执行页面结构的加载，以及页面数据的请求，使得页面加载时间为页面结构加载时间和页面数据请求时间的最大值，大大缩短页面的跳转时间，实现页面的快速跳转。
进一步地，基于本发明小程序页面跳转方法第一、第二实施例，提出本发明小程序页面跳转方法第三实施例。
小程序页面跳转方法的第三实施例与小程序页面跳转方法的第一、第二实施例的区别在于，所述检测是否存在基于所述页面结构触发的生命周期函数，并检测所述异步数据请求函数的函数状态的步骤之后，小程序页面跳转方法还包括：
步骤e，若检测到所述生命周期函数，但所述异步数据请求函数的函数状态为处理中，则显示所述页面结构对应的骨架页面；
步骤f，在检测到所述函数状态为已处理时，基于所述页面数据，对所述骨架页面进行渲染，以跳转显示对应的目标页面。
本实施例若页面结构先加载完成，可先在跳转设备的显示界面显示出来对应的骨架页面，避免显示界面长时间“白屏”，再在页面数据请求完毕之后，渲染骨架页面，得到目标页面，从而跳转显示目标页面。
以下将对各个步骤进行详细说明：
步骤e，若检测到所述生命周期函数，但所述异步数据请求函数的函数状态为处理中，则显示所述页面结构对应的骨架页面。
在本实施例中，跳转设备若检测到生命周期函数，说明页面结构加载完毕，但异步数据请求函数的函数状态为处理中，说明页面数据还未请求完毕，此时，跳转设备先显示页面结构对应的骨架页面，从而避免跳转设备的显示界面长时间“白屏”。
其中，显示骨架页面的过程具体为：
创建所述页面结构对应的骨架结构；
在一实施例，跳转设备先根据页面结构，创建对应的骨架结构，具体可根据页面结构的布局，搭建类似的骨架结构。
确定所述骨架结构中需要显示页面数据的目标元素，并确定所述目标元素对应的背景色；
接着，确定骨架结构中需要显示页面数据的目标元素，其中，目标元素为显示页面数据的区域，并确定目标元素对应的背景色，在一实施例中，背景色可为统一的颜色，如橙色等，在另一实施例中，背景色与目标页面的页面类型一一对应，如支付页面对应蓝色等。
为所述目标元素增加所述背景色，以得到所述骨架页面。
最后，为目标元素增加背景色，从而得到骨架页面，可以理解的，骨架页面展示了目标页面的大致框架，并且还显示了背景色，可有效缓解“白屏”问题。
步骤f，在检测到所述函数状态为已处理时，基于所述页面数据，对所述骨架页面进行渲染，以跳转显示对应的目标页面。
在本实施中，等到异步数据请求函数的函数状态为已处理时，跳转设备再根据已请求完毕的页面数据，对骨架页面进行渲染，从而得到目标页面，从而跳转显示目标页面。
本实施例先简单堆砌出页面结构，也即骨架结构，再使用背景色，修改页面样式配置，从而得到骨架页面，避免显示界面长时间“白屏”，再在页面数据请求完毕之后，渲染骨架页面，得到目标页面，从而跳转显示目标页面，使得页面跳转过程中“白屏”问题被消除。
本发明还提供一种小程序页面跳转装置。本发明小程序页面跳转装置包括：
检测确定模块，用于若检测到页面跳转指令，则确定所述页面跳转指令对应的路径，并确定所述路径对应的页面加载方式；
调用加载模块，用于若所述页面加载方式为并行加载，则调用对应的异步数据请求函数加载所述路径对应的页面结构，同时，请求所述路径对应的页面数据；
检测判断模块，用于检测所述页面结构和所述页面数据是否满足渲染条件；
渲染显示模块，用于若满足，则对所述页面数据和所述页面结构进行渲染，以跳转显示对应的目标页面。
优选地，所述检测确定模块还用于：
确定所述路径是否在预设路径数组内；
若是，则确定所述页面加载方式为并行加载。
优选地，所述小程序页面跳转装置还包括添加改造模块，添加改造模块用于：
若检测到页面跳转改造指令，则将所述页面跳转改造指令对应的改造页面添加进小程序的预加载路由管理对象中；
在所述预加载路由管理对象中，确定所述改造页面对应的异步数据请求函数，以覆盖所述改造页面原有的数据请求函数，并将所述改造页面的路径添加进预设路径数组中。
优选地，所述添加改造模块还用于：
在所述预加载路由管理对象中，取出所述改造页面原有的数据请求函数，并为所述数据请求函数添加异步数据请求函数属性，以得到所述改造页面的异步数据请求函数；
基于所述改造页面的异步数据请求函数，确定所述改造页面的页面跳转方法，并以所述页面跳转方法接管所述改造页面原有的页面跳转方法。
优选地，所述检测判断模块还用于：
检测是否存在基于所述页面结构触发的生命周期函数，并检测所述异步数据请求函数的函数状态；
若检测到所述生命周期函数，且所述异步数据请求函数的函数状态为已处理，则确定所述页面结构和所述页面数据满足渲染条件。
优选地，所述渲染显示模块还用于：
若检测到所述生命周期函数，但所述异步数据请求函数的函数状态为处理中，则显示所述页面结构对应的骨架页面；
在检测到所述函数状态为已处理时，基于所述页面数据，对所述骨架页面进行渲染，以跳转显示对应的目标页面。
优选地，所述渲染显示模块还用于：
创建所述页面结构对应的骨架结构；
确定所述骨架结构中需要显示页面数据的目标元素，并确定所述目标元素对应的背景色；
为所述目标元素增加所述背景色，以得到所述骨架页面。
本发明还提供一种计算机可读存储介质。
本发明计算机可读存储介质上存储有小程序页面跳转程序，所述小程序页面跳转程序被处理器执行时实现如上所述的小程序页面跳转方法的步骤。
其中，在所述处理器上运行的小程序页面跳转程序被执行时所实现的方法可参照本发明小程序页面跳转方法各个实施例，此处不再赘述。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书与附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (9)
1.一种小程序页面跳转方法，其特征在于，所述小程序页面跳转方法包括如下步骤：
若检测到页面跳转指令，则确定所述页面跳转指令对应的路径，并确定所述路径对应的页面加载方式；
若所述页面加载方式为并行加载，则调用对应的异步数据请求函数加载所述路径对应的页面结构，同时，请求所述路径对应的页面数据；
检测所述页面结构和所述页面数据是否满足渲染条件；
若满足，则对所述页面数据和所述页面结构进行渲染，以跳转显示对应的目标页面；
所述小程序页面跳转方法还包括：
若检测到页面跳转改造指令，则将所述页面跳转改造指令对应的改造页面添加进小程序的预加载路由管理对象中；
在所述预加载路由管理对象中，确定所述改造页面对应的异步数据请求函数，以覆盖所述改造页面原有的数据请求函数，并将所述改造页面的路径添加进预设路径数组中。
2.如权利要求1所述的小程序页面跳转方法，其特征在于，所述确定所述路径对应的页面加载方式的步骤包括：
确定所述路径是否在预设路径数组内；
若是，则确定所述页面加载方式为并行加载。
3.如权利要求1所述的小程序页面跳转方法，其特征在于，所述在所述预加载路由管理对象中，确定所述改造页面对应的异步数据请求函数，以覆盖所述改造页面原有的数据请求函数的步骤包括：
在所述预加载路由管理对象中，取出所述改造页面原有的数据请求函数，并为所述数据请求函数添加异步数据请求函数属性，以得到所述改造页面的异步数据请求函数；
基于所述改造页面的异步数据请求函数，确定所述改造页面的页面跳转方法，并以所述页面跳转方法接管所述改造页面原有的页面跳转方法。
4.如权利要求1-3任一项所述的小程序页面跳转方法，其特征在于，所述检测所述页面结构和所述页面数据是否满足渲染条件的步骤包括：
检测是否存在基于所述页面结构触发的生命周期函数，并检测所述异步数据请求函数的函数状态；
若检测到所述生命周期函数，且所述异步数据请求函数的函数状态为已处理，则确定所述页面结构和所述页面数据满足渲染条件。
5.如权利要求4所述的小程序页面跳转方法，其特征在于，所述检测是否存在基于所述页面结构触发的生命周期函数，并检测所述异步数据请求函数的函数状态的步骤之后，所述小程序页面跳转方法还包括：
若检测到所述生命周期函数，但所述异步数据请求函数的函数状态为处理中，则显示所述页面结构对应的骨架页面；
在检测到所述函数状态为已处理时，基于所述页面数据，对所述骨架页面进行渲染，以跳转显示对应的目标页面。
6.如权利要求5所述的小程序页面跳转方法，其特征在于，所述显示所述页面结构对应的骨架页面的步骤包括：
创建所述页面结构对应的骨架结构；
确定所述骨架结构中需要显示页面数据的目标元素，并确定所述目标元素对应的背景色；
为所述目标元素增加所述背景色，以得到所述骨架页面。
7.一种小程序页面跳转装置，其特征在于，所述小程序页面跳转装置包括：
检测确定模块，用于若检测到页面跳转指令，则确定所述页面跳转指令对应的路径，并确定所述路径对应的页面加载方式；
调用加载模块，用于若所述页面加载方式为并行加载，则调用对应的异步数据请求函数加载所述路径对应的页面结构，同时，请求所述路径对应的页面数据；
检测判断模块，用于检测所述页面结构和所述页面数据是否满足渲染条件；
渲染显示模块，用于若满足，则对所述页面数据和所述页面结构进行渲染，以跳转显示对应的目标页面；
所述小程序页面跳转装置还包括：添加改造模块，
所述添加改造模块用于：
若检测到页面跳转改造指令，则将所述页面跳转改造指令对应的改造页面添加进小程序的预加载路由管理对象中；
在所述预加载路由管理对象中，确定所述改造页面对应的异步数据请求函数，以覆盖所述改造页面原有的数据请求函数，并将所述改造页面的路径添加进预设路径数组中。
8.一种小程序页面跳转设备，其特征在于，所述小程序页面跳转设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的小程序页面跳转程序，所述小程序页面跳转程序被所述处理器执行时实现如权利要求1至6中任一项所述的小程序页面跳转方法的步骤。
9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有小程序页面跳转程序，所述小程序页面跳转程序被处理器执行时实现如权利要求1至6中任一项所述的小程序页面跳转方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011045129.6A CN112052064B (zh) | 2020-09-28 | 2020-09-28 | 小程序页面跳转方法、装置、设备与计算机可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011045129.6A CN112052064B (zh) | 2020-09-28 | 2020-09-28 | 小程序页面跳转方法、装置、设备与计算机可读存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112052064A CN112052064A (zh) | 2020-12-08 |
| CN112052064B true CN112052064B (zh) | 2024-04-09 |
Family
ID=73604992
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011045129.6A Active CN112052064B (zh) | 2020-09-28 | 2020-09-28 | 小程序页面跳转方法、装置、设备与计算机可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112052064B (zh) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112559086B (zh) * | 2020-12-25 | 2023-07-25 | 北京百度网讯科技有限公司 | 小程序页面渲染方法、装置、电子设备及可读存储介质 |
| CN113392353A (zh) * | 2021-06-18 | 2021-09-14 | 网易（杭州）网络有限公司 | 网站页面的加载方法、装置、电子设备及存储介质 |
| CN113342450B (zh) * | 2021-06-29 | 2023-04-25 | 建信金融科技有限责任公司 | 页面处理的方法、装置、电子设备及计算机可读介质 |
| CN113986409A (zh) * | 2021-09-14 | 2022-01-28 | 阿里巴巴（中国）有限公司 | 信息交互方法、装置、设备及存储介质 |
| CN113849248B (zh) * | 2021-09-28 | 2023-09-26 | 北京京东振世信息技术有限公司 | 小程序加载方法、设备、存储介质及程序产品 |
| CN114416247A (zh) * | 2021-12-31 | 2022-04-29 | 北京五八信息技术有限公司 | 一种数据处理方法、装置、电子设备及存储介质 |
| CN114816637B (zh) * | 2022-04-27 | 2024-03-01 | 瀚云科技有限公司 | 一种嵌入小程序上的应用显示方法、装置及系统 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107368560A (zh) * | 2017-07-07 | 2017-11-21 | 腾讯科技（深圳）有限公司 | 移动应用的页面实现方法和装置、计算机可读存储介质 |
| CN109284454A (zh) * | 2018-08-02 | 2019-01-29 | 平安科技（深圳）有限公司 | 页面渲染方法、装置、计算机设备及存储介质 |
| CN111414562A (zh) * | 2020-02-26 | 2020-07-14 | 平安普惠企业管理有限公司 | 应用程序页面api接口前置方法、装置及存储介质 |
| CN111552473A (zh) * | 2020-04-27 | 2020-08-18 | 腾讯科技（深圳）有限公司 | 一种应用程序的处理方法、装置及设备 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109800369A (zh) * | 2018-12-14 | 2019-05-24 | 平安普惠企业管理有限公司 | Hybrid app页面加载方法、装置和计算机设备 |
-
2020
- 2020-09-28 CN CN202011045129.6A patent/CN112052064B/zh active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107368560A (zh) * | 2017-07-07 | 2017-11-21 | 腾讯科技（深圳）有限公司 | 移动应用的页面实现方法和装置、计算机可读存储介质 |
| CN109284454A (zh) * | 2018-08-02 | 2019-01-29 | 平安科技（深圳）有限公司 | 页面渲染方法、装置、计算机设备及存储介质 |
| CN111414562A (zh) * | 2020-02-26 | 2020-07-14 | 平安普惠企业管理有限公司 | 应用程序页面api接口前置方法、装置及存储介质 |
| CN111552473A (zh) * | 2020-04-27 | 2020-08-18 | 腾讯科技（深圳）有限公司 | 一种应用程序的处理方法、装置及设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112052064A (zh) | 2020-12-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112052064B (zh) | 小程序页面跳转方法、装置、设备与计算机可读存储介质 | |
| JP6740373B2 (ja) | ページコンポーネント動的レイアウト | |
| US9009334B1 (en) | Remote browsing session management | |
| US11706331B2 (en) | Information processing method and apparatus, storage medium, and electronic device | |
| US20090031243A1 (en) | Method and apparatus for controlling display of windows | |
| CN108304234B (zh) | 一种页面展示方法及装置 | |
| KR20060082353A (ko) | 실행가능 웹 컨텐트 제공 및 처리 시스템 및 방법 | |
| US20140208326A1 (en) | File presenting method and apparatus for a smart terminal | |
| US20120227032A1 (en) | Method, apparatus, and system for invoking widget | |
| US20140317537A1 (en) | Browser based application program extension method and device | |
| CN110377360A (zh) | webview快速加载的方法、显示终端及计算机可读存储介质 | |
| CN111367518A (zh) | 页面布局方法、装置、计算设备及计算机存储介质 | |
| US8578276B2 (en) | Dynamic adaptive cross-site custom interface | |
| US8370862B1 (en) | Communicating between software environments | |
| CN113157270A (zh) | 一种页面适配方法和装置 | |
| US20110055318A1 (en) | Thin client system with round trip reduction using client side code generation | |
| CN111880952A (zh) | 应用程序跳转方法、装置、电子设备和存储介质 | |
| CN110493644A (zh) | 电视应用升级方法、电视终端及服务器 | |
| JP5643449B1 (ja) | 端末装置に表示画面を表示させるサーバ及び方法 | |
| CN115282598A (zh) | 数据处理系统及方法 | |
| CN115186207A (zh) | 加载页面资源的方法及装置、电子设备 | |
| CN113971073A (zh) | 数据调用方法、装置、电子设备及计算机存储介质 | |
| CN112612531A (zh) | 应用程序启动方法、装置、电子设备及存储介质 | |
| CN111638914A (zh) | 一种对终端功能的设置方法、设备及存储介质 | |
| CN111367597A (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |