CN113609417A - 移动端页面的处理方法、装置、设备及介质 - Google Patents
移动端页面的处理方法、装置、设备及介质 Download PDFInfo
- Publication number
- CN113609417A CN113609417A CN202110845595.0A CN202110845595A CN113609417A CN 113609417 A CN113609417 A CN 113609417A CN 202110845595 A CN202110845595 A CN 202110845595A CN 113609417 A CN113609417 A CN 113609417A
- Authority
- CN
- China
- Prior art keywords
- event
- page
- hook function
- target
- hook
- 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
- 238000000034 method Methods 0.000 title claims abstract description 64
- 238000012545 processing Methods 0.000 title claims abstract description 45
- 238000012544 monitoring process Methods 0.000 claims abstract description 56
- 238000009877 rendering Methods 0.000 claims abstract description 15
- 230000006870 function Effects 0.000 claims description 230
- 238000004891 communication Methods 0.000 claims description 24
- 230000008569 process Effects 0.000 claims description 13
- 238000004806 packaging method and process Methods 0.000 claims description 9
- 238000004590 computer program Methods 0.000 claims description 7
- 230000001419 dependent effect Effects 0.000 claims description 7
- 238000002347 injection Methods 0.000 claims description 6
- 239000007924 injection Substances 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 15
- 238000012423 maintenance Methods 0.000 abstract description 10
- 230000000694 effects Effects 0.000 description 13
- 238000003672 processing method Methods 0.000 description 6
- 230000001960 triggered effect Effects 0.000 description 6
- 238000005538 encapsulation Methods 0.000 description 5
- 230000009471 action Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 238000001914 filtration Methods 0.000 description 4
- 238000005259 measurement Methods 0.000 description 3
- 238000012856 packing Methods 0.000 description 3
- 239000000243 solution Substances 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 238000013075 data extraction Methods 0.000 description 2
- 238000000605 extraction Methods 0.000 description 2
- 238000001514 detection method Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003997 social interaction Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- 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/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/542—Event management; Broadcasting; Multicasting; Notifications
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Multimedia (AREA)
- Stored Programmes (AREA)
Abstract
本申请涉及一种移动端页面的处理方法、装置、设备及介质，该方法包括：依据应用程序的依赖包，在所述应用程序的页面端注入钩子函数；依据监听事件触发所述钩子函数对应的窗口线程；通过所述窗口线程获取所述钩子函数对应的目标事件，所述目标事件为原生系统依据目标钩子函数的数据操作结果生成的事件，所述目标钩子函数与所述钩子函数相关；依据所述目标事件携带的数据对象进行页面渲染。本申请解决了App在不同系统平台上的页面不一致的问题，降低移动端App的页面开发、维护成本。
Description
技术领域
本申请涉及移动端应用程序(Application，App)技术领域，尤其涉及一种移动端页面的处理方法、装置、设备及介质。
背景技术
随着诸如智能手机等移动设备的普及，人们在沟通、社交、娱乐等活动中越来越依赖于安装在移动设备中的移动端App。
目前，App的主体页面都是基于各个系统平台的原生编程语言编写的，编写起来考验技术人员的开发语言使用和页面编排功底。例如，若App需要安装到安卓(Android)系统的智能手机，则需要采用Android系统平台的原生编程语言java来编写该App的主体页面；又如，若App需要安装到iOS系统的智能手机，则需要采用iOS系统平台的原生编程语言ObjectC来编写该App的主体页面。各个系统平台使用的编程语言不相同，且各个系统平台使用的页面长度计量单位也不同，如Android系统使用的页面长度计量单位为iOS系统使用的页面长度计量单位的3倍，再加上使用不同编程语言的开发人员的页面开发风格不同，这导致相同App在不同系统平台上的页面不一致的问题。
发明内容
有鉴于此，本申请提供了一种移动端页面的处理方法、装置、设备及介质，以解决相同App在不同系统平台上的页面不一致的问题，降低移动端App的页面开发、维护成本。
第一方面，本申请提供了一种移动端页面的处理方法，包括：
依据应用程序的依赖包，在所述应用程序的页面端注入钩子函数；
依据监听事件触发所述钩子函数对应的窗口线程；
通过所述窗口线程获取所述钩子函数对应的目标事件，所述目标事件为原生系统依据目标钩子函数的数据操作结果生成的事件，所述目标钩子函数与所述钩子函数相关；
依据所述目标事件携带的数据对象进行页面渲染。
可选的，所述依据应用程序的依赖包，在所述应用程序的页面端注入钩子函数，包括：
在浏览器初始化过程中，获取应用程序的依赖包；
基于所述依赖包携带的钩子名称，将钩子函数初始化到页面端，所述页面端用于展示所述应用程序的页面。
可选的，移动端页面的处理方法还包括：
获取所述应用程序的页面端添加的监听事件钩子；
通过移动端的原生系统对所述监听事件钩子进行封装，得到目标钩子函数；
依据所述目标钩子函数和所述监听事件钩子进行打包，得到所述应用程序的依赖包。
可选的，所述通过所述窗口线程获取所述钩子函数对应的目标事件，包括：
通过所述窗口线程，监测所述原生系统的对象事件；
若所述对象事件的事件名与所述钩子函数的钩子名称相匹配，则将所述对象事件确定为所述钩子函数对应的目标事件。
可选的，所述将所述对象事件确定为所述钩子函数对应的目标事件之前，还包括：
基于所述钩子函数的钩子名称和/或所述监听事件的事件名，生成获取请求事件；
通过应用程序接口向所述原生系统传输所述获取请求事件，所述获取请求事件用于触发所述原生系统调用所述目标钩子函数进行数据操作。
可选的，所述依据监听事件触发所述钩子函数对应的窗口线程之前，还包括：
获取用户操作；
基于所述用户操作确定业务需求；
根据所述业务需求确定监听事件。
可选的，移动端页面的处理方法还包括：
检测所述应用程序的本地页面版本号；
若所述本地页面版本号与目标版本号不一致，则通过后台线程下载所述目标版本号对应的新页面，所述目标版本号为所述应用程序在服务器中所配置的页面版号；
在所述应用程序重新启动时，依据所述目标版本号对应的新页面进行展示。
第二方面，本申请提供了一种移动端页面的处理装置，包括：
钩子函数注入模块，用于依据应用程序的依赖包，在所述应用程序的页面端注入钩子函数；
窗口线程触发模块，用于依据监听事件触发所述钩子函数对应的窗口线程；
目标事件获取模块，用于通过所述窗口线程获取所述钩子函数对应的目标事件，所述目标事件为原生系统依据目标钩子函数的数据操作结果生成的事件，所述目标钩子函数与所述钩子函数相关；
页面渲染模块，用于依据所述目标事件携带的数据对象进行页面渲染。
第三方面，本申请提供了一种移动设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；
存储器，用于存放计算机程序；
处理器，用于执行存储器上所存放的程序时，实现第一方面任一项所述的移动端页面的处理方法的步骤。
第四方面，本申请提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面任一项所述的移动端页面的处理方法的步骤。
本申请实施例通过依据应用程序的依赖包，在应用程序的页面端注入钩子函数，并依据监听事件触发钩子函数对应的窗口线程，以通过该窗口线程获取钩子函数对应的目标事件，且该目标事件为原生系统依据目标钩子函数的数据操作结果生成的事件，随后依据目标事件携带的数据对象进行页面渲染，以渲染出需要展示的页面内容，实现与原生系统一样的控制效果，能够从根本上杜绝相同应用程序在不同系统平台上的页面不一致的问题，降低移动端页面的开发、维护成本。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的一种移动端页面的处理方法的步骤流程图；
图2为本申请一个可选实施例提供的一种移动端页面的处理方法的步骤流程图；
图3为本申请一个示例中的一种移动端页面的处理流程示意图；
图4为本申请实施例中的一种移动端页面的处理装置的结构框图；
图5为本申请实施例提供的一种移动端页面的处理设备的结构示意图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请的一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。
现有移动端App相关技术均是基于各个系统平台的原生语言编写App的主体页面，如某一App的主体页面是基于Android的原生语言编写的,，编写起来考验开发的语言使用和页面的编排功底，同时页面编写能够实现的效果有限，难以做到丰富绚丽的页面动态效果，增加页面开发周期。此外，不同开发人员的页面开发风格不同，使得相同App的不同系统平台上的页面不一致，导致不同系统平台的相同页面给用户的体验会有一定程度上的差别，增加页面维护成本。
本申请实施例的核心构思之一在于，提出了一种移动端页面的处理方法，通过注入钩子函数到应用程序的浏览页面，使得应用程序的页面端调用的方法可以作用于原生系统的语言函数，实现与原生系统一样的控制效果，同时可以从根本上杜绝相同App在不同系统平台上的页面不一致的问题，降低移动端App的页面开发、维护成本。
参照图1，示出了本申请实施例提供的一种移动端页面的处理方法的步骤流程图。本申请提供的移动端页面的处理方法具体可以包括如下步骤：
步骤101，依据应用程序的依赖包，在所述应用程序的页面端注入钩子函数。
具体的，应用程序的依赖包可以包含有钩子函数信息，如钩子名称、钩子参数、钩子运行的线程信息等，具体可以用于对搭建的页面进行函数注入，以依赖包中所包含的钩子名称将钩子名称对应的钩子函数注入到应用程序的页面端中，使得应用程序的页面端调用的方法可以作用于原生系统的语言函数。例如，在应用程序通过浏览器显示页面的情况下，可以根据应用程序的依赖包中携带的钩子名称，将该钩子名称对应的钩子函数挂到浏览器的窗口线程，以将钩子函数注入到应用程序的页面端，使得应用程序的页面端主体可以基于该钩子函数与原生系统进行通讯。其中，钩子运行的线程线程信息可以用于确定钩子函数运行时所需要挂靠的窗口线程，该窗口线程可以在后台运行。
步骤102，依据监听事件触发所述钩子函数对应的窗口线程。
在本申请实施例中，监听事件与钩子函数相关联，如在页面端添加监听事件的钩子函数时，可以将事件名添加到钩子函数中，使得该事件名对应的监听事件与钩子函数相关。其中，监听事件可以是指监听到的事件，如可以是应用程序的页面端监听到的登录事件等，本申请实施例对此不作具体限制。钩子函数对应的窗口线程可以是指钩子函数所挂靠的窗口线程。
步骤103，通过所述窗口线程获取所述钩子函数对应的目标事件，所述目标事件为原生系统依据目标钩子函数的数据操作结果生成的事件，所述目标钩子函数与所述钩子函数相关。
具体而言，在应用程序运行过程中，可以基于应用程序的页面端的监听事件确定出与该监听事件关联的钩子函数，并可触发该钩子函数所挂靠的窗口线程，以通过该窗口线程来调用钩子函数，从而可以通过该钩子函数“钩中”原生系统产生的事件，以作为钩子函数对应的目标事件。例如，在调用钩子函数后，可以通过调用该钩子函数的窗口线程监测原生系统产生的事件是否是与该钩子函数对应的目标事件，如可以通过判断监测到的事件的事件名与钩子函数的事件名进行匹配；若监测到的事件的事件名与钩子函数的事件名相匹配，则可以将当前监测到的事件确定为该钩子函数对应的目标事件；若监测到的事件的事件名与钩子函数的事件名不匹配，则可以确定当前监测到的事件不是钩子函数对应的目标事件。其中，监测到的事件可以包括原始系统产生的对象事件；该对象事件可以是由原生系统将目标钩子函数的数据操作结果封装为一个对象后所产生的事件；数据操作结果可以是指目标钩子函数完成数据的抽取、封装、过滤等操作后产生的操作结果。
步骤104，依据所述目标事件携带的数据对象进行页面渲染。
具体的，本申请实施例在获取到的钩子函数对应的目标事件后，可以通过钩子函数对该目标事件进行解析，如可以根据该钩子函数的钩子参数对目标事件进行解析，得到该目标事件中携带的数据对象，以根据该目标事件中携带的数据对象进行页面渲染，从而可以渲染出需要展示的页面内容，保证页面运行效率。
可见，本申请实施例通过依据应用程序的依赖包，在应用程序的页面端注入钩子函数，并依据监听事件触发钩子函数对应的窗口线程，以通过该窗口线程获取钩子函数对应的目标事件，且该目标事件为原生系统依据目标钩子函数的数据操作结果生成的事件，随后依据目标事件携带的数据对象进行页面渲染，以渲染出需要展示的页面内容，实现与原生系统一样的控制效果，可以从根本上杜绝相同应用程序在不同系统平台上的页面不一致的问题，降低移动端页面的开发、维护成本。
在具体实现中，应用程序的浏览页面可以通过浏览器进行显示。本申请实施例可以在浏览器初始化过程中，获取应用程序的依赖包，以依据该依赖包将钩子函数注入到应用程序的页面端，从而可以通过初始化的钩子函数，实现页面端到原生系统端的控制链路，使得应用程序的页面端调用的方法可以作用于原生系统的语言函数实现，与原生系统一样的控制效果。可选的，在上述例地基础上，本申请实施例依据应用程序的依赖包，在所述应用程序的页面端注入钩子函数，具体可以包括：在浏览器初始化过程中，获取应用程序的依赖包；基于所述依赖包携带的钩子名称，将钩子函数初始化到页面端，所述页面端用于展示所述应用程序的页面内容。
在实际处理中，可以基于诸如H5语言等页面标记语言，在应用程序的页面端添加监听事件钩子，随后可在原生系统将该监听事件钩子封装成同名的目标钩子函数，使得目标钩子函数与该钩子函数关联，以作为页面端和原生系统通讯的工具桥，从而可以通过该钩子函数和与该钩子函数相关的目标钩子函数实现了页面端到原生系统的控制链路。进一步而言，在上述例地基础上，本申请实施例提供的移动端页面的处理方法还可以包括：获取应用程序的页面端添加的监听事件钩子；通过移动端的原生系统对所述监听事件钩子进行封装，得到目标钩子函数；依据所述目标钩子函数和所述监听事件钩子进行打包，得到所述应用程序的依赖包。
具体的，在应用程序的页面搭建过程中，可以根据钩子以及事件的名称，在应用程序的页面显示端添加监听事件的钩子函数，以作监听事件钩子。该监听事件钩子可以包含有诸如钩子名称、钩子参数以及监听事件的事件名等信息，本申请实施例对此不作具体限制。
参照图2，示出了本申请一个可选实施例提供的一种移动端页面的处理方法的步骤流程图。本申请实施例提供的移动端页面的处理方法可以适用移动端页面的处理情况，如适用于基于移动端App的云化界面开发和配置情况，具体可以包括如下步骤：
步骤201，获取应用程序的页面端添加的监听事件钩子。
其中，所述应用程序的页面端可以用于展示应用程序的页面内容，如可以是利用用于展示应用程序页面的JS端，且该JS端可以利用使用上手成本较低的H5语言实现动效更加丰富的页面；监听事件钩子可以是指监听事件的钩子，且该监听事件钩子的钩子名称可以与监听事件的事件名相同，使得监听事件钩子与其对应的监听事件相关。
步骤202，通过移动端的原生系统对所述监听事件钩子进行封装，得到目标钩子函数。
具体的，本申请实施例在目标页面端添加监听事件钩子后，可以针对该监听事件钩子在原生系统端封装成一个与该监听事件钩子同名的函数，以作为与该监听事件钩子相关的目标钩子函数，以便后续可以在该目标钩子函数中完成数据的抽取、封装、过滤等操作，并可将该数据操作结果封装为一个数据对象发送到事件当中，使得页面端的监听事件钩子可以钩中该事件，从而可以依据该事件中封装的数据对象完成相应的业务操作，实现通过页面端的钩子函数到原生系统端的目标钩子函数的控制链路。
例如，在移动端的原生系统为安卓系统的情况下，在Java Script(JS)端添加一个监听事件钩子后，如在根据预先设置好的钩子名称和事件名称在JS端添加一个监听事件的钩子后，可以在安卓系统端把这个监听事件钩子封装成一个同名的函数，以作为目标钩子函数，使得安卓系统可以在该目标钩子函数中完成数据的抽取、封装、过滤等操作，产生数据操作结果，最后可以将这个数据操作结果封装为一个数据对象发送到事件当中，即将数据操作结果封装成一个数据对象，以基于该数据对象产生发送给JS端的目标事件，使得JS端可以接收到这个目标事件，如在JS端的钩子“钩中”了安卓发送过来的事件，就可以得到这个事件中封装的数据对象，之后的操作逻辑可以交由H5页面端完成；反之，H5页面端向安卓系统的通讯也是如此。
步骤203，依据所述目标钩子函数和所述监听事件钩子进行打包，得到所述应用程序的依赖包。
具体的，本申请实施例在得到目标钩子函数后，可以将目标钩子函数和该目标钩子函数对应的监听事件钩子进行打包，生成应用程序的依赖包，以便后续可以在应用程序对应的项目中引入该依赖包实现钩子函数的注入，使得搭建的移动端页面可以成为真正控制App的交互页面。其中，钩子函数可以作为App主体页面端的钩子，使得App主体页面端可以通过该钩子函数钩中原生系统发送的目标事件，实现与原生系统之间的通讯；目标钩子函数可以作为原生系统中的钩子，且与钩子函数相关联。例如，目标钩子函数和钩子函数可以携带有相同的钩子名称和/或事件名，使得该目标钩子函数与钩子函数相关；具体的，相关的目标钩子函数与钩子函数具有相同钩子名称和/或相同的事件名等，本实施例对此不作限制。
例如，在技术员基于H5语言搭建好应用程序的页面项目后，可以将该页面项目中JS端的钩子函数和利用安卓系统语言生成的目标钩子函数打包成该应用程序的依赖包，以将该应用程序的依赖包作为H5和Android通讯的工具桥，如图3所示，将该应用程序的依赖包作为技术员开发的JS-Android工具桥，以通过该JS-Android工具桥将JS函数方法注入H5页面中，实现通过JS函数到Java函数的控制链路，使得H5页面端可以通过JS函数到Java函数的控制链路，向Android系统获取移动端的动态数据，进而可以基于获取到的这些动态数据渲染出需要展示的页面内容，与现有技术通过Android原生系统的Java虚拟机进行渲染相比，提高页面渲染效率，能够在一定程度上优化用户体验。其中，H5页面主要是基于JavaScript开发的。
可见，本示例通过使用上手成本较低的H5语言实现应用程序的页面端，并通过依据应用程序的依赖包将钩子函数注入到该应用程序的页面端，搭建了H5和Android主体沟通的通讯桥梁，使得H5页面端调用的方法可以作用于Andorid原生的语言函数，实现和原生系统一样的控制效果的同时也可以添加更多丰富的动态效果，缩短页面开发周期。
步骤204，在浏览器初始化过程中，获取应用程序的依赖包。
步骤205，基于所述依赖包携带的钩子名称，将钩子函数初始化到页面端。
具体而言，本申请实施例在应用程序的页面搭建完后，可以通过浏览器对该应用程序的页面进行渲染展示。在浏览器初始化的过程中，可以获取该应用程序的依赖包，以基于该依赖包中所包含的钩子名称和钩子参数，将该依赖包中所包含的钩子函数初始化到浏览器的窗口后台(即窗口线程)中，以将钩子函数注入到应用程序的页面端，实现应用程序的页面端到原生系统端的控制链路，使得应用程序的页面端调用的钩子函数可以作用于原生系统的语言函数，实现与原生系统一样的控制效果。
步骤206，依据监听事件触发所述钩子函数对应的窗口线程。
在具体实现中，监听事件可以可以根据业务需求来确定。例如，可以根据业务需求确定浏览页面所需要获取各种动态数据，进而可以根据所需要获取的各种动态数据生成对应的监听事件，以通过监听事件的事件名触发钩子函数对应的窗口线程，从而可以通过触发的窗口线程调用该钩子函数“钩中”钩子函数对应的目标事件，即执行步骤207。其中，动态数据可以是指移动端的动态数据，如可以包含，本示例对此不作限制。
进一步而言，移动端的动态数据包含很多种数据，如用户的标识(ID)数据，用户的登录状态数据，用户的个性化设置数据等。由于这些数据均是动态的，需要应用程序的页面端向原生系统诸如获取，以以基于这些动态数据渲染出需要展示的页面内容。可选的，本申请实施例提供的移动端页面的处理方法在依据监听事件触发所述钩子函数对应的窗口线程之前，还可以包括：获取用户操作；基于所述用户操作确定业务需求；根据所述业务需求确定监听事件。其中，用户操作可以包括用户在应用程序启动后所提交的各种操作，如可以是用户在应用程序的页面上输入操作、点击操作等，本申请实施例对此不作现在。
具体而言，在用户打开应用程序后，可以在该应用程序的显示页面上提交各种操作，使得该应用程序的页面端可以获取到相应的用户操作，以基于该用户操作确定出业务需求，从而可以根据业务需求确定出对应的监听事件，进而可以基于该监听事件触发钩子函数对应的窗口线程，以通过窗口线程获取钩子函数对应的目标事件。其中，所述目标事件为原生系统依据目标钩子函数的数据操作结果生成的事件，所述目标钩子函数与所述钩子函数相关。
步骤207，通过所述窗口线程获取所述钩子函数对应的目标事件。
具体的，本申请实施例在触发钩子函数对应的线程后，可以通过该窗口线程监测原生系统产生的对象事件的事件名是否与钩子函数相匹配；若原生系统产生的对象事件的事件名与钩子函数相匹配，则可以将该对象事件确定为钩子函数对应的目标事件，进而可以利用该钩子函数的钩子参数对目标事件进行解析，以得到目标事件中携带的数据对象。若原生系统产生的对象事件的事件名与钩子函数不匹配，则可以忽略该对象事件，随后可以判断下一个原生系统产生的对象事件是否为钩子函数对应的目标事件。
在实际处理中，钩子函数的钩子名称可以与其所要监听的事件相关联，如可以根据钩子函数所要监听的事件设置钩子函数的钩子名称，使得运行该钩子函数的窗口线程可以通过将原生系统产生的对象事件的事件名与钩子函数的钩子名称进行比较、匹配，确定出钩子函数对应的目标事件。其中，对象事件是指携带有数据对象的事件；且该数据对象是由原生系统根据目标钩子函数的数据操作结果进行封装产生的一个对象。进一步而言，本申请实施例通过所述窗口线程获取所述钩子函数对应的目标事件，具体可以包括：通过所述窗口线程，监测所述原生系统的对象事件；若所述对象事件的事件名与所述钩子函数的钩子名称相匹配，则将所述对象事件确定为所述钩子函数对应的目标事件。若所述对象事件的事件名与所述钩子函数的钩子名称不匹配，则将所述对象事件确定为所述钩子函数对应的目标事件。
例如，在钩子函数的钩子名称与其所要监听的事件的事件名相同的情况下，可以将钩子名称与窗口线程接收到的原生系统所发送的对象事件的事件名进行比较，以确定窗口线程接收到的原生系统所发送的对象事件的事件名是否与钩子函数的钩子名称相同；若窗口线程接收到的原生系统所发送的对象事件的事件名与钩子函数的钩子名称相同，则可以确定对象事件的事件名与钩子函数的钩子名称匹配，进而可以将该对象事件确定为钩子函数对应的目标事件；若窗口线程接收到的原生系统所发送的对象事件的事件名与钩子函数的钩子名称不相同，则可以确定对象事件的事件名与钩子函数的钩子名称不匹配，进而可以该对象事件确定不是钩子函数对应的目标事件。
进一步的，本申请实施例在触发钩子函数对应的窗口线程后，可以通过窗口线程生成钩子函数对应的获取请求事件，并可通过应用程序接口(Application ProgrammingInterface，API)将该获取请求事件传输给原生系统，使得原生系统在接收到该获取请求请求后调用目标钩子函数进行诸如数据抽取、封装、过滤等数据操作，从而使得原生系统可以依据目标钩子函数的数据操作结果进行封装产生对应的对象事件。可选的，本申请实施例在将所述对象事件确定为所述钩子函数对应的目标事件之前，还包括：基于所述钩子函数的钩子名称和/或所述监听事件的事件名，生成获取请求事件；通过应用程序接口向所述原生系统传输所述获取请求事件，所述获取请求事件用于触发所述原生系统调用所述目标钩子函数进行数据操作。
例如，在钩子函数对应的窗口线程触发后，可以通过该窗口线程接收原生系统所产生的对象事件，并可基于钩子函数的钩子名称和/或事件名，确定窗口线程接收到的对象事件是否为该钩子函数对应的目标事件，即确定是否钩子函数是否钩中目标事件；若钩子函数没有钩中目标事件，即窗口线程没有接收到钩子函数对应的目标事件，则可以通过窗口线程基于该钩子函数携带的事件名生成相应的事件，以作为钩子函数对应的获取请求事件并通过API传输给原生系统，使得原生系统中的目标钩子函数可以钩中该获取请求事件，进而可以触发目标钩子函数进行相应的数据操作。在目标钩子函数进完成数据操作后，可以产生相应的数据操作结果，使得原生系统可以依据该目标钩子函数的数据操作结果进行封装，产生对应的目标事件，并可通过API将该目标事件传输给窗口线程，使得窗口线程中的钩子函数可以钩中该目标事件，实现了原生系统端与应用程序的页面端之间的通讯。
步骤208，依据所述目标事件携带的数据对象进行页面渲染。
具体的，应用程序的页面端在获取钩子函数对应的目标事件后，可以采用钩子函数中的钩子参数对该目标事件进行解析，以解析出该目标事件携带的数据对象，进而可以基于解析出的数据对象渲染出页面需要展示的内容，在保证页面运行效率的同时提高用户的使用体验。
综上，本申请实施例通过将钩子函数注入到应用程序的页面端，搭建了应用程序的页面端与原生系统端沟通的通讯桥梁，使得应用程序的页面端调用的方法可以作用于原生系统的语言函数，实现与原生系统一样的控制效果，从而可以从根本上解决相同App在不同系统平台上的页面不一致的问题，降低移动端页面的开发、维护成本。
在实际处理中，可以将搭建好的应用程序的页面进行打包，以将打包后形成的页面文件上传到服务器中，以将搭建好的页面配置到服务器中，如图3所示，可以将技术员开发、维护运营好的H5页面上传到服务器中，以供用户下载并使用。进一步的，本申请实施例提供的移动端页面的处理方法还包括：检测所述应用程序的本地页面版本号；若所述本地页面版本号与目标版本号不一致，则通过后台线程下载所述目标版本号对应的新页面，所述目标版本号为所述应用程序在服务器中所配置的页面版号；在所述应用程序重新启动时，依据所述目标版本号对应的新页面进行展示。其中，应用程序的本地页面版本号可以是指应用程序当前页面的版本号。
具体而言，本申请实施例在应用程序启动运行后，可以通过应用程序检测该应用程序当前显示页面的版本号，并可将当前显示页面的版本号作为本地页面版本号与服务器中的目标版本号进行比较，以确定是否需要依据该服务器中的目标版本号对当前显示的页面进行更新。具体的，若本地页面版本号与服务器中的目标版本号相同，则可以确定不需要依据该服务器中的目标版本号对当前显示的页面进行更新；若本地页面版本号与服务器中的目标版本号不一致，则可以确定需要依据该服务器中的目标版本号对当前显示的页面进行更新，随后在显示当前页面的前提下，通过后台线程，采用静默下载的方式从服务器中下载目标版本号对应的新页面，以便后续应用程序重新打开当前所显示的页面时依据该目标版本号对应的新页面进行显示，实现热更新。
例如，在用户首次使用App时，App会自动检测当前页面的版本号，并可将当前页面的版本号与服务器上配置的页面文件中的版本号进行比较；若服务器上的版本号高于当前版本号，则App会在先展示页面的前提下，在后台静默下载新的页面，如图3所示，可以从服务器中下载新的H5页面，以在用户下一次进入App时展示，达到更新App显示页面的目的。若开发端认为App当前页面存在问题，或者页面的皮肤需要运维等一系列需要对页面进行更新的操作时，则可以编写新的页面程序上传到服务器。App进入后发现新版本的程序就会进行更新，以此实现热更新，从而可以保证发现问题后第一时间修改发布，也可以实现随时进行页面的运营维护等。从而可以保证发现问题后第一时间修改发布，也可以实现随时进行页面的运营维护，确保应用程序能够实现动效丰富的页面，提高用户体验。
需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请实施例并不受所描述的动作顺序的限制，因为依据本申请实施例，某些步骤可以采用其他顺序或者同时进行。
参照图4，示出了本申请实施例中的一种移动端页面的处理装置的结构框图，该移动端页面的处理装置具体可以包括如下模块：
钩子函数注入模块410，用于依据应用程序的依赖包，在所述应用程序的页面端注入钩子函数；
窗口线程触发模块420，用于依据监听事件触发所述钩子函数对应的窗口线程；
目标事件获取模块430，用于通过所述窗口线程获取所述钩子函数对应的目标事件，所述目标事件为原生系统依据目标钩子函数的数据操作结果生成的事件，所述目标钩子函数与所述钩子函数相关；
页面渲染模块440，用于依据所述目标事件携带的数据对象进行页面渲染。
可选的，钩子函数注入模块410可以包括如下子模块
依赖包获取子模块，用于在浏览器初始化过程中，获取应用程序的依赖包；
初始化子模块，用于基于所述依赖包携带的钩子名称，将钩子函数初始化到页面端，所述浏览页面为所述应用程序在所述浏览器上显示的页面。
可选的，移动端页面的处理装置还包括如下模块：
监听事件钩子获取模块，用于获取目标页面端添加的监听事件钩子，所述目标页面端为所述应用程序的页面显示端；
钩子封装模块，用于通过移动端的原生系统对所述监听事件钩子进行封装，得到目标钩子函数；
钩子打包模块，用于依据所述目标钩子函数和所述监听事件钩子进行打包，得到所述应用程序的依赖包。
可选的，所述目标事件获取模块430包括如下模块：
事件监测子模块，用于通过所述窗口线程，监测所述原生系统的对象事件；
目标事件确定子模块，用于若所述对象事件的事件名与所述钩子函数的钩子名称相匹配，则将所述对象事件确定为所述钩子函数对应的目标事件。
可选的，移动端页面的处理装置还包括：
获取请求事件生成模块，用于基于所述钩子函数的钩子名称和/或所述监听事件的事件名，生成获取请求事件；
获取请求事件传输模块，用于通过应用程序接口向所述原生系统传输所述获取请求事件。其中，所述获取请求事件用于触发所述原生系统调用所述目标钩子函数进行数据操作。
例如，在所述目标事件确定子模块将所述对象事件确定为所述钩子函数对应的目标事件之前，获取请求事件生成模块可以基于所述钩子函数的钩子名称和/或所述监听事件的事件名，生成获取请求事件；随后，获取请求事件传输模块可通过应用程序接口向所述原生系统传输所述获取请求事件，以触发所述原生系统调用所述目标钩子函数进行数据操作。
可选的，上述移动端页面的处理装置，还包括如下模块：
用户操作获取模块，用于获取用户操作；
业务需求确定模块，用于基于所述用户操作确定业务需求；
监听事件确定模块，用于根据所述业务需求确定监听事件。
例如，用户操作获取模块可以在窗口线程触发模块依据监听事件触发所述钩子函数对应的窗口线程之前，获取用户操作，使得业务需求确定模块可以基于用户操作获取模块获取到的用户操作确定业务需求，进而使得监听事件确定模块可以根据业务需求确定监听事件。
可选的，上述移动端页面的处理装置，还包括如下模块：
页面版本号检测模块，用于检测所述应用程序的本地页面版本号；
下载模块，用于在所述本地页面版本号与目标版本号不一致时，通过后台线程下载所述目标版本号对应的新页面，所述目标版本号为所述应用程序在服务器中所配置的页面版号；
新页面展示模块，用于在所述应用程序重新启动时，依据所述目标版本号对应的新页面进行展示。
需要说明的是，上述提供的移动端页面的处理装置可执行本申请任意实施例所提供的移动端页面的处理方法，具备执行方法相应的功能和有益效果。
在具体实现中，上述移动端页面的处理装置可以应用在移动设备中，使得该移动设备可以从根本上杜绝相同应用程序在不同系统平台上的页面不一致的问题，降低移动端页面的开发、维护成本，该移动设备可以是由两个或多个物理实体构成，也可以是一个物理实体构成，如设备可以是平电脑板、智能手机等，本申请实施例对此不作具体限制。
如图5所示，本申请实施例提供提供了一种移动端页面的处理设备，包括处理器111、通信接口112、存储器113和通信总线114，其中，处理器111，通信接口112，存储器113通过通信总线114完成相互间的通信，存储器113，用于存放计算机程序；
在本申请一个实施例中，处理器111，用于执行存储器113上所存放的程序时，实现前述任意一个方法实施例所述的移动端页面的处理方法的步骤。
本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如前述任意一个方法实施例提供的移动端页面的处理方法的步骤。
需要说明的是，对于系统、机房空调、存储介质实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上所述仅是本申请的具体实施方式，使本领域技术人员能够理解或实现本申请。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。
Claims (10)
1.一种移动端页面的处理方法，其特征在于，包括：
依据应用程序的依赖包，在所述应用程序的页面端注入钩子函数；
依据监听事件触发所述钩子函数对应的窗口线程；
通过所述窗口线程获取所述钩子函数对应的目标事件，所述目标事件为原生系统依据目标钩子函数的数据操作结果生成的事件，所述目标钩子函数与所述钩子函数相关；
依据所述目标事件携带的数据对象进行页面渲染。
2.根据权利要求1所述的移动端页面的处理方法，其特征在于，所述依据应用程序的依赖包，在所述应用程序的页面端注入钩子函数，包括：
在浏览器初始化过程中，获取应用程序的依赖包；
基于所述依赖包携带的钩子名称，将钩子函数初始化到页面端，所述页面端用于展示所述应用程序的页面。
3.根据权利要求1所述的移动端页面的处理方法，其特征在于，还包括：
获取所述应用程序的页面端添加的监听事件钩子；
通过移动端的原生系统对所述监听事件钩子进行封装，得到目标钩子函数；
依据所述目标钩子函数和所述监听事件钩子进行打包，得到所述应用程序的依赖包。
4.根据权利要求1所述的移动端页面的处理方法，其特征在于，所述通过所述窗口线程获取所述钩子函数对应的目标事件，包括：
通过所述窗口线程，监测所述原生系统的对象事件；
若所述对象事件的事件名与所述钩子函数的钩子名称相匹配，则将所述对象事件确定为所述钩子函数对应的目标事件。
5.根据权利要求4所述的移动端页面的处理方法，其特征在于，所述将所述对象事件确定为所述钩子函数对应的目标事件之前，还包括：
基于所述钩子函数的钩子名称和/或所述监听事件的事件名，生成获取请求事件；
通过应用程序接口向所述原生系统传输所述获取请求事件，所述获取请求事件用于触发所述原生系统调用所述目标钩子函数进行数据操作。
6.根据权利要求1所述的移动端页面的处理方法，其特征在于，所述依据监听事件触发所述钩子函数对应的窗口线程之前，还包括：
获取用户操作；
基于所述用户操作确定业务需求；
根据所述业务需求确定监听事件。
7.根据权利要求1至6任一所述的移动端页面的处理方法，其特征在于，还包括：
检测所述应用程序的本地页面版本号；
若所述本地页面版本号与目标版本号不一致，则通过后台线程下载所述目标版本号对应的新页面，所述目标版本号为所述应用程序在服务器中所配置的页面版号；
在所述应用程序重新启动时，依据所述目标版本号对应的新页面进行展示。
8.一种移动端页面的处理装置，其特征在于，包括：
钩子函数注入模块，用于依据应用程序的依赖包，在所述应用程序的页面端注入钩子函数；
窗口线程触发模块，用于依据监听事件触发所述钩子函数对应的窗口线程；
目标事件获取模块，用于通过所述窗口线程获取所述钩子函数对应的目标事件，所述目标事件为原生系统依据目标钩子函数的数据操作结果生成的事件，所述目标钩子函数与所述钩子函数相关；
页面渲染模块，用于依据所述目标事件携带的数据对象进行页面渲染。
9.一种移动设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；
存储器，用于存放计算机程序；
处理器，用于执行存储器上所存放的程序时，实现权利要求1-7任一项所述的移动端页面的处理方法的步骤。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-7任一项所述的移动端页面的处理方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110845595.0A CN113609417A (zh) | 2021-07-26 | 2021-07-26 | 移动端页面的处理方法、装置、设备及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110845595.0A CN113609417A (zh) | 2021-07-26 | 2021-07-26 | 移动端页面的处理方法、装置、设备及介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113609417A true CN113609417A (zh) | 2021-11-05 |
Family
ID=78338366
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110845595.0A Pending CN113609417A (zh) | 2021-07-26 | 2021-07-26 | 移动端页面的处理方法、装置、设备及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113609417A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115203618A (zh) * | 2022-09-13 | 2022-10-18 | 北京达佳互联信息技术有限公司 | 页面处理方法、装置、电子设备及存储介质 |
| CN117493716A (zh) * | 2023-11-08 | 2024-02-02 | 中建八局第一数字科技有限公司 | 移动端Web App的展示更新方法、装置、电子设备及存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109117144A (zh) * | 2018-07-10 | 2019-01-01 | 北京小米移动软件有限公司 | 页面处理方法、装置、终端及存储介质 |
| CN109743359A (zh) * | 2018-12-13 | 2019-05-10 | 平安普惠企业管理有限公司 | Hybrid通讯处理方法、装置、计算机设备及存储介质 |
| CN111198998A (zh) * | 2019-12-31 | 2020-05-26 | 北京指掌易科技有限公司 | 基于Ajax请求的网络页面加载方法、装置及系统 |
| CN112559928A (zh) * | 2020-12-24 | 2021-03-26 | 成都新希望金融信息有限公司 | 基于混合开发的页面处理方法、装置、电子设备及存储介质 |
-
2021
- 2021-07-26 CN CN202110845595.0A patent/CN113609417A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109117144A (zh) * | 2018-07-10 | 2019-01-01 | 北京小米移动软件有限公司 | 页面处理方法、装置、终端及存储介质 |
| CN109743359A (zh) * | 2018-12-13 | 2019-05-10 | 平安普惠企业管理有限公司 | Hybrid通讯处理方法、装置、计算机设备及存储介质 |
| CN111198998A (zh) * | 2019-12-31 | 2020-05-26 | 北京指掌易科技有限公司 | 基于Ajax请求的网络页面加载方法、装置及系统 |
| CN112559928A (zh) * | 2020-12-24 | 2021-03-26 | 成都新希望金融信息有限公司 | 基于混合开发的页面处理方法、装置、电子设备及存储介质 |
Non-Patent Citations (4)
| Title |
|---|
| CRAZYCODEBOY: "React Native原生模块与JS模块通信的几种方式", pages 1 - 4, Retrieved from the Internet <URL:https://blog.csdn.net/fengyuzhengfan/article/details/52704341> * |
| SONGLCY: "在 React Native 中使用 Hooks", pages 1 - 11, Retrieved from the Internet <URL:https://juejin.cn/post/6844903850025943047> * |
| 又在吃鱼: "在react native中使用hooks", pages 1 - 14, Retrieved from the Internet <URL:https://juejin.cn/post/6844903812365287438> * |
| 极光JIGUANG: "如何在 React Native 中写一个自定义模块", pages 1 - 9, Retrieved from the Internet <URL:https://segmentfault.com/a/1190000010117444> * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115203618A (zh) * | 2022-09-13 | 2022-10-18 | 北京达佳互联信息技术有限公司 | 页面处理方法、装置、电子设备及存储介质 |
| CN117493716A (zh) * | 2023-11-08 | 2024-02-02 | 中建八局第一数字科技有限公司 | 移动端Web App的展示更新方法、装置、电子设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105224363B (zh) | 一种加载应用程序的方法及装置 | |
| CN107515764B (zh) | 应用程序页面打开方法、终端以及计算机可读存储介质 | |
| CN113609417A (zh) | 移动端页面的处理方法、装置、设备及介质 | |
| CN107741844B (zh) | 一种应用安装包的生成方法和装置 | |
| CN109672580A (zh) | 全链路监控方法、装置、终端设备及存储介质 | |
| KR20190032569A (ko) | 모바일 브라우저를 통해 애플리케이션을 어웨이크하기 위한 방법 및 장치 | |
| CN105472694B (zh) | 通过扫描二维码接入WiFi的方法、装置、终端及存储介质 | |
| CN109743359B (zh) | Hybrid通讯处理方法、装置、计算机设备及存储介质 | |
| CN105718313A (zh) | 应用操作方法和装置 | |
| CN104821954A (zh) | 一种跨平台远程过程调用方法 | |
| CN110069278B (zh) | 一种自动化分布式多任务打包方法及系统 | |
| CN112954717B (zh) | 基于h5页面的家电配网方法和装置 | |
| CN103838851B (zh) | 三维场景模型文件的渲染方法和装置 | |
| CN113672441A (zh) | 对智能设备的测试方法及装置 | |
| CN112835809A (zh) | 一种基于浏览器的测试数据设置方法、装置、设备及介质 | |
| CN106557411B (zh) | Android系统中Hybrid应用的测试方法及系统 | |
| CN108319474B (zh) | 一种页面信息生成方法、装置和设备 | |
| CN113971257A (zh) | 混合应用的功能菜单访问方法及装置 | |
| CN111666199B (zh) | 在智能终端上执行的调试方法以及软件调试器 | |
| CN109857963A (zh) | 本地资源访问方法、装置及电子设备 | |
| CN108509228B (zh) | 加载页面的方法、终端设备及计算机可读存储介质 | |
| CN107066255A (zh) | 一种共用物联设备逻辑的物联设备控制方法及装置 | |
| CN106686037A (zh) | 页面检测方法、装置、设备及系统 | |
| CN113315829B (zh) | 客户端离线化h5页面加载方法、装置、计算机设备及介质 | |
| US9189633B2 (en) | Download management method and device based on android browser |
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 |