CN119668732A - Page display method and device, electronic device and storage medium - Google Patents
Page display method and device, electronic device and storage medium Download PDFInfo
- Publication number
- CN119668732A CN119668732A CN202311219608.9A CN202311219608A CN119668732A CN 119668732 A CN119668732 A CN 119668732A CN 202311219608 A CN202311219608 A CN 202311219608A CN 119668732 A CN119668732 A CN 119668732A
- Authority
- CN
- China
- Prior art keywords
- document object
- page
- node
- event
- notification message
- 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
Landscapes
- Document Processing Apparatus (AREA)
Abstract
本公开是关于一种页面显示方法及装置、电子设备及存储介质。该方法包括：响应于检测到对快应用页面中页面元素的操作指令，在应用层利用文档对象模型服务确定操作指令对应的通知消息；其中，通知消息中携带有待渲染的文档对象节点标识以及待渲染的文档对象节点对应的事件信息，待渲染的文档对象节点为至少包括操作指令所操作的页面元素对应的节点；向本地服务层发送通知消息；通过本地服务层根据通知消息中的事件信息对关联文档对象节点标识的节点进行渲染；显示节点渲染后的快应用页面。通过该方法，减小了应用框架层的内存占用，提升了快应用的性能。
The present disclosure relates to a page display method and device, an electronic device and a storage medium. The method includes: in response to detecting an operation instruction for a page element in a quick application page, using a document object model service at the application layer to determine a notification message corresponding to the operation instruction; wherein the notification message carries a document object node identifier to be rendered and event information corresponding to the document object node to be rendered, and the document object node to be rendered is a node corresponding to at least the page element operated by the operation instruction; sending a notification message to a local service layer; rendering the node associated with the document object node identifier according to the event information in the notification message by the local service layer; and displaying the quick application page after the node is rendered. Through this method, the memory usage of the application framework layer is reduced, and the performance of the quick application is improved.
Description
Technical Field
The disclosure relates to the technical field of electronic equipment, and in particular relates to a page display method and device, electronic equipment and a storage medium.
Background
Along with the rapid development of intelligent electronic devices, applications applied to intelligent terminals are also abundant and various, and various applications can be downloaded and installed on the intelligent electronic devices, so that great convenience is brought to the work and life of people, and the applications needing to be downloaded and installed are generally called as native applications. Since the intelligent electronic device needs to consume more device resources when downloading and installing the native application, and the native application has a slower speed when starting and loading, the industry proposes a fast application under the situation.
The fast application is a new form application which is ready to use without downloading, uses front-end technology stack development, has the dual advantages of a hypertext markup language page (Hyper Text Markup Language, HTML5) and a native application, and makes the research of the fast application technology currently pay attention.
Disclosure of Invention
The disclosure provides a page display method and device, electronic equipment and storage medium.
According to a first aspect of an embodiment of the present disclosure, there is provided a page display method, including:
Determining a notification message corresponding to an operation instruction by using a document object model service at an application layer in response to detecting the operation instruction on page elements in a fast application page, wherein the notification message carries a document object node identifier to be rendered and event information corresponding to the document object node to be rendered, and the document object node to be rendered at least comprises the node corresponding to the page elements operated by the operation instruction;
Rendering nodes associated with the document object node identifiers according to the event information in the notification message through the local service layer;
And displaying the fast application page rendered by the node.
In some embodiments, the determining, at the application layer, a notification message corresponding to the operation instruction by using the document object model service in response to detecting the operation instruction on the page element in the fast application page includes:
in response to detecting an operation instruction for a page element in the quick application page, determining a document object node identifier corresponding to the page element and a target service responding to the operation instruction in the document object model service;
And determining the notification message based on the document object node identification corresponding to the page element and the target service.
In some embodiments, the determining, in response to detecting an operation instruction on a page element in the fast application page, a document object node identifier corresponding to the page element and a target service in the document object model service in response to the operation instruction includes:
monitoring an operation instruction of a page element in the quick application page through the local service layer, and determining a document object node identifier corresponding to the page element and event information indicated by the operation instruction;
sending the document object node identification and event information corresponding to the page element determined by the local service layer to an application framework layer;
And calling the service associated with the event information by the document object node in the document object model service in the application framework layer, wherein the called service is the target service.
In some embodiments, the event information includes an event identification and an event parameter;
The determining the notification message based on the document object node identifier corresponding to the page element and the target service includes:
determining the event identifier and the event parameter corresponding to the target service;
The notification message is determined based on the node identification of the target document object node, the event identification, and the event parameter.
In some embodiments, the sending the notification message to the local service layer includes:
and sending the notification message to the local service layer through a message sending service of an application framework layer.
In some embodiments, the event information includes an event identification;
Rendering, by the local service layer, a node associated with the document object node identifier according to the event information in the notification message, including:
determining a document object model corresponding to a quick application page to be rendered and a target node to be rendered in the document object model according to the document object node identification and the event identification in the notification message;
Generating a page layer model according to the document object model and a target node to be rendered in the document object model;
And rendering the page layer model corresponding to the fast application page to be rendered through the local service layer.
In some embodiments, the event information further includes event parameters;
The generating a page layer model according to the document object model and a target node to be rendered in the document object model comprises the following steps:
generating a rendering model corresponding to a target node to be rendered in the document object model according to the document object model;
and performing attribute setting on a target node to be rendered in the rendering model according to the event parameters to generate the page layer model.
According to a second aspect of the embodiments of the present disclosure, there is provided a page display device including:
The system comprises a determination module, a sending module, a local service layer, a quick application page, a file object model service module and a processing module, wherein the determination module is used for responding to the detection of an operation instruction on page elements in the quick application page and determining a notification message corresponding to the operation instruction by utilizing the file object model service at the application layer, wherein the notification message carries a file object node identifier to be rendered and event information corresponding to the file object node to be rendered, and the file object node to be rendered at least comprises the node corresponding to the page elements operated by the operation instruction;
the rendering module is used for rendering the node associated with the document object node identifier according to the event information in the notification message through the local service layer;
and the display module is used for displaying the fast application page rendered by the node.
In some embodiments, the determining module is further configured to determine, in response to detecting an operation instruction for a page element in the fast application page, a document object node identifier corresponding to the page element and a target service responding to the operation instruction in the document object model service, and determine the notification message based on the document object node identifier corresponding to the page element and the target service.
In some embodiments, the determining module is further configured to determine, by monitoring, by the local service layer, an operation instruction of a page element in the fast application page, a document object node identifier corresponding to the page element and event information indicated by the operation instruction, send, to an application framework layer, the document object node identifier corresponding to the page element determined by the local service layer and the event information, and call, in the application framework layer, a service associated with the event information by the document object node identifier in the document object model service, where the called service is the target service.
In some embodiments, the event information includes an event identifier and an event parameter, the determining module is further configured to determine the event identifier and the event parameter corresponding to the target service, and determine the notification message based on a node identifier of the target document object node, the event identifier, and the event parameter.
In some embodiments, the sending module is further configured to send the notification message to the local service layer through a messaging service of an application framework layer.
In some embodiments, the event information includes an event identifier, the rendering module is further configured to determine a document object model corresponding to a fast application page to be rendered and a target node to be rendered in the document object model according to the document object node identifier in the notification message and the event identifier, generate a page layer model according to the document object model and the target node to be rendered in the document object model, and render the page layer model corresponding to the fast application page to be rendered through the local service layer.
In some embodiments, the event information further comprises event parameters, a rendering module and a page layer model, wherein the rendering module is further used for generating a rendering model corresponding to a target node to be rendered in the document object model according to the document object model, and performing attribute setting on the target node to be rendered in the rendering model according to the event parameters, so as to generate the page layer model.
According to a third aspect of embodiments of the present disclosure, there is provided an electronic device, comprising:
A processor;
a memory for storing processor-executable instructions;
Wherein the processor is configured to perform the page display method as described in the first aspect above.
According to a fourth aspect of embodiments of the present disclosure, there is provided a non-transitory computer-readable storage medium comprising:
the instructions in the storage medium, when executed by a processor of the terminal, enable the terminal to perform the page display method as described in the first aspect above.
The technical scheme provided by the embodiment of the disclosure can comprise the following beneficial effects:
In the embodiment of the disclosure, the electronic device uses the document object model service at the application layer, namely, the document object node corresponding to the operation instruction of the page element can be determined, and the notification message is generated, and the notification message is sent to the local service layer to realize rendering without creating a virtual DOM at the application layer, and the listeners are arranged for the objects of all the document object nodes, so that the memory occupation of the application layer is reduced, the memory consumption of the application layer is reduced, and the performance of quick application is facilitated to be improved.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the disclosure and together with the description, serve to explain the principles of the disclosure.
Fig. 1 is a flowchart of a page display method according to an embodiment of the present disclosure.
FIG. 2 is a schematic diagram of a front-end page document, as shown in an embodiment of the present disclosure.
FIG. 3 is a schematic diagram of a document object model corresponding to a front-end page document, as shown in an embodiment of the present disclosure.
FIG. 4 is a diagram of an example of a commonly used function in a document object model DOM API interface, as shown in an embodiment of the present disclosure.
Fig. 5 is a block diagram of a page display method according to an embodiment of the present disclosure.
Fig. 6 is a functional message diagram illustrating an embodiment of the present disclosure.
FIG. 7 is a schematic diagram of a build rendering flow of one component shown in an embodiment of the present disclosure.
Fig. 8 is a schematic diagram of a page rendering flow shown in an embodiment of the disclosure.
Fig. 9 is a diagram of a page display device according to an exemplary embodiment.
Fig. 10 is a block diagram of an electronic device shown in an embodiment of the disclosure.
Detailed Description
Reference will now be made in detail to exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numbers in different drawings refer to the same or similar elements, unless otherwise indicated. The implementations described in the following exemplary examples are not representative of all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with some aspects of the present disclosure as detailed in the accompanying claims.
It should be noted that, the fast application is a new application form based on the hardware platform of the electronic device, and may run based on the fast application framework integrated in the operating system of the electronic device. The operating system is used for managing hardware and software resources of the electronic device, and may be an Android operating system (Android), an apple operating system (iOS), a microsoft operating system (Microsoft Windows), a custom operating system, a self-grinding operating system, and the like, which is not limited in the embodiments of the present disclosure.
In an embodiment of the present disclosure, the execution subject may be an electronic device including a mobile device including a cell phone, a tablet computer, or a wearable device, etc., and a stationary device including, but not limited to, a personal computer (Personal Computer, PC). In the embodiment of the disclosure, a user can directly click on a fast application needed for use through a fast application portal provided by the electronic device. For example, the mobile phone is provided with a fast application entry in a notification bar and a negative screen, and a user can search for a required fast application in the fast application entry, namely, the fast application is used immediately without downloading and installing.
Fig. 1 is a flowchart of a page display method according to an embodiment of the present disclosure, and as shown in fig. 1, the page display method applied to an electronic device includes the following steps:
S11, responding to detection of an operation instruction on page elements in a quick application page, and determining a notification message corresponding to the operation instruction by using a document object model service at an application layer, wherein the notification message carries a document object node identifier to be rendered and event information corresponding to the document object node to be rendered, and the document object node to be rendered at least comprises a node corresponding to the page elements operated by the operation instruction;
s12, sending the notification message to a local service layer;
s13, rendering nodes associated with the document object node identifiers according to the event information in the notification message through the local service layer;
s14, displaying the fast application page rendered by the node.
It should be noted that the document object model (Document Object Model, DOM) is a logic model, which may be used to perform structural description on the front-end page document, convert the front-end page into a structure set composed of document object nodes (nodes) and objects (including the attributes and methods of the objects), and the DOM may connect the front-end page and the scripting language (JavaScript, JS). A front-end page document (e.g., HTML or XML) may be parsed into corresponding DOM models, typically using a front-end parser (e.g., web browser).
FIG. 2 is a schematic diagram of a front-end page document according to an embodiment of the disclosure, where, as shown in FIG. 2, a Header (HEAD) of the front-end page document includes a TITLE tag (TITLE), a BODY (BODY) includes a first-level TITLE tag (h 1) paragraph tag (p), and a front-end parser parses the front-end page document to create a DOM corresponding to the front-end page document. FIG. 3 is a schematic diagram of a document object model corresponding to a front-end page document, where each document object node of the DOM corresponds to an element in the front-end page document, and each document object node contains a number of objects (e.g., TITLE objects, text attribute values of "My documents") as shown in FIG. 3, according to an embodiment of the present disclosure.
In step S11, in response to detecting an operation instruction for a page element in the quick application page, a notification message corresponding to the operation instruction is determined at the application layer using the document object model service. The document object model service can be an interface (Application Programming Interface, API) function written based on a scripting language and used for operating a document object model (Document Object Model, DOM) of the web, and the DOM operation of the quick application page can be realized based on the interface function. By way of example, embodiments of the present disclosure may introduce a DOM API function of the web in the framework of a quick application to implement the ability to directly manipulate DOM through the DOM API in a web-like manner in the quick application. The document object model service may include services such as creating a document object node, adding a document object node, updating a document object node, deleting a document object node, inserting a document object node, registering an event listener, and the like, and the DOM API may directly operate the DOM corresponding to the front page, so that the structure, style, and content of the front page document may be changed. For example, the DOM is modified by creating a document object node, deleting the document object node and the like, and for example, an event is registered on the document object node by an event monitor, and when the event registered on the document object node is triggered, an event processing function corresponding to the triggering event is executed.
By way of example, the document object model service may include the following functions:
1) Creating a document object node:
node=this.$createElement(tagName,attrs,children);
The create document object node function is used to create a document object node specified by the tag name tagName. Where attrs represents an attribute on the document object node and child represents an array of child nodes within the document object node.
2) Adding document object nodes:
element.appendChild(node);
the add document object node function is used to attach a document object node to the end of a list of child document object nodes that specify parent document object nodes. Where node represents the document object node to be inserted and element represents the specified parent document object node.
3) Updating the document object node:
element.setAttribute(name,value);
And if the attribute already exists, updating the attribute value corresponding to the attribute, otherwise, adding a new attribute for the appointed component by using the appointed attribute name and the attribute value. Where name represents the attribute name and value refers to the attribute value.
4) Deleting document object nodes:
element.removeChild(child);
the delete document object node function is used to delete a child document object node from the DOM document object node tree. Where child represents a document object node that needs to be deleted.
5) Inserting document object nodes:
element.insertChild(child,index);
The insert document object node function is used to insert a new sub-document object node into the sub-document object node list of the current component at the specified index position. Where child represents the document object node to be inserted and index represents the index position where the document object node is inserted.
6) Registering an event listener:
element.addEventListener(type,functionName);
the registration event listener service is used for registering events and event processing functions corresponding to the events for the designated document object nodes, and executing the event processing functions when the events registered on the document object nodes are triggered. Wherein, type refers to event type, functionName refers to event handling function.
FIG. 4 is an exemplary diagram of functions commonly used in a DOM API interface of a document object model, as shown in FIG. 4, that may be modified, set, etc. using the DOM API, in accordance with an embodiment of the present disclosure.
In the embodiment of the disclosure, the event indicated by the operation instruction of the page element is detected by the electronic device, which may be a document object node registration event (for example, a click event, an input event, a sliding event, etc.) corresponding to the page element in the quick application page by using the DOM API at the application layer, the operation instruction of the page element is monitored at the local service layer, and when the local service layer monitors that a certain event is triggered, the local service layer acquires a document object node identifier corresponding to the event and event information and sends the document object node identifier and event information to the application frame layer, and the local service layer may also be referred to as a local rendering layer.
In the embodiment of the disclosure, the electronic device determines, at the application layer, a notification message corresponding to the operation instruction by using the document object model service, which may be a document object node identifier and event information corresponding to an event indicated by the operation instruction determined by the local service layer, call a service of associating the event information with the document object node identifier in the document object model service, use the service as a target service of responding to the operation instruction in the document object model service, determine a document object node identifier corresponding to the target service and event information corresponding to the document object node to be rendered (including an event identifier and event parameter corresponding to the node to be rendered), and determine the notification message based on the document object node identifier, the event identifier and the event parameter to be rendered corresponding to the operation instruction of the page element.
In step S12, the electronic device sends the notification message to the local service layer, which may be through a messaging service of the application framework layer.
In step S13, the electronic device analyzes the notification message sent by the application framework layer through the local service layer, obtains the document object node identifier and the event identifier in the notification message, determines the document object model corresponding to the fast application page to be rendered, generates the page layer model according to the document object model, and renders the page layer model corresponding to the fast application page to be rendered.
In step S14, the electronic device may display the node rendered fast application page through a display screen.
Illustratively, the page element "nickname update" on the quick application page is a function button for updating the user nickname, and the "click event" and the "update nickname function" are registered on the document object node a corresponding to the "nickname update". Triggering a clicking event when a user clicks a nickname update on a quick application page of the electronic equipment, monitoring an operation instruction of the nickname update on a page element by a local service layer of the electronic equipment, determining a document object node A, an updating event and an updating parameter corresponding to the monitored nickname update, sending the information to an application framework layer, determining a document object identifier A corresponding to the nickname update by the application framework layer, determining an associated updated document object node identifier A and the updating parameter (wherein, the updated document object node function is determined to be called according to the updating event), generating a notification message according to the information, sending the notification message to the local service layer so that the local service layer analyzes the notification message, updating and rendering a document object model according to the analyzed updated document object node identifier A and the updated parameter, and displaying the updated nickname effect in the quick application page.
The page element "newly added information" on the quick application page is a function button for newly adding user information, and can be used for newly adding various information such as hobbies, food and the like for the user. The "click event" and the "newly added information function" are registered on the document object node B corresponding to the "newly added information". When a user clicks 'newly-added information' on a quick application page of the electronic equipment, a click event is triggered, a local service layer of the electronic equipment monitors an operation instruction 'click' on the page element 'newly-added information', a document object identifier B, an update event and an update parameter corresponding to the monitored 'newly-added information' are determined, the information is sent to an application framework layer, the application framework layer determines that the newly-added information (document object node C) needs to be carried out according to a 'newly-added information function', the document object node identifier C is bound to the document object node identifier B, a notification message (representing the newly-built node operation is carried out on the node C, the sub-node operation is carried out on the node B) is generated according to the information, the notification message is analyzed by the local service layer, the created node C obtained through analysis and the bound sub-node C on the node B are conveniently sent to the local service layer, the document object model is updated and rendered, and the effect after the newly-added information is displayed as the user in the quick application page.
In the related art, a quick application framework employs a responsive data operation Interface (UI) to update views using a data driven mode. For example, a virtual DOM is created in an application framework layer (JS framework layer, abbreviated as JS layer), and a Watcher listener is created for an object bound to an element node on the virtual DOM to monitor each attribute data of the object, and when the attribute data of the object changes, the element node in the DOM is determined according to the attribute identifier and modified. In this way, a virtual DOM needs to be created in the JS layer, and all data of node objects in the DOM need to be monitored and changed data needs to be determined, so that the JS memory is overloaded, and the consumption of the application memory is excessive.
In the embodiment of the disclosure, the electronic device uses the document object model service at the application layer, so that the document object node corresponding to the operation instruction of the page element can be determined, the notification message is generated, and the notification message is sent to the local service layer to realize rendering without creating a virtual DOM at the application layer, and the listeners are arranged for the objects of all the document object nodes, thereby reducing the memory occupation of the application layer, reducing the memory consumption of the application layer, and being beneficial to improving the performance of fast application.
In some embodiments, the determining, at the application layer, a notification message corresponding to the operation instruction by using the document object model service in response to detecting the operation instruction on the page element in the fast application page includes:
in response to detecting an operation instruction for a page element in the quick application page, determining a document object node identifier corresponding to the page element and a target service responding to the operation instruction in the document object model service;
And determining the notification message based on the document object node identification corresponding to the page element and the target service.
In the embodiment of the disclosure, the electronic device detects an operation instruction on a page element in a quick application page, and determines a document object node identifier corresponding to the page element and a target service responding to the operation instruction in a document object model service. The target service may be a target API function of each DOM API function that responds to an operation instruction, for example, a user clicks on "nickname update", the electronic device detects the update instruction, determines to update the node identifier a and a service of updating an attribute of the node a (updating a nickname attribute value), and further, for example, clicks on "newly added information", the electronic device detects the newly added instruction, determines a node identifier C corresponding to the newly added information and a service of creating the node C, a node identifier B to which the newly added information is to be added, and a service of binding the node B to the sub-node.
In the embodiment of the disclosure, the electronic device determines the corresponding event identifier and event parameter according to the target service, and determines the notification message based on the node identifier, event identifier and event parameter of the target document object node. For example, the target service is an update nickname, the node identifier corresponding to the service is the document object node to be updated, the event identifier is an update attribute, and the event parameter is an attribute value to be updated.
According to the method and the device for determining the node identification, the event identification and the event parameters in the notification message, the electronic device can determine the specific node identification (used for identifying DOM element nodes), the event identification and the event parameters according to the target service responding to the page element operation instruction in the document object model service, so that the memory consumption of an application framework layer is reduced, and the resources of the electronic device are saved.
In some embodiments, the determining, in response to detecting an operation instruction on a page element in the fast application page, a document object node identifier corresponding to the page element and a target service in the document object model service in response to the operation instruction includes:
monitoring an operation instruction of a page element in the quick application page through the local service layer, and determining a document object node identifier corresponding to the page element and event information indicated by the operation instruction;
sending the document object node identification and event information corresponding to the page element determined by the local service layer to an application framework layer;
And calling the service associated with the event information by the document object node in the document object model service in the application framework layer, wherein the called service is the target service.
In the embodiment of the disclosure, the electronic device may monitor, through an event monitor of the local service layer, an operation instruction of a page element in the fast application page, and after the page element in the fast application page is operated by a user, the local service layer may monitor the operation instruction corresponding to the user operation, and obtain event information indicated by the operation instruction. The event information comprises an event identifier for indicating whether an event is triggered, a page element node identifier corresponding to the trigger event, an attribute identifier of the page element node, an event name and an event parameter.
It should be noted that, the local service layer of the electronic device listens for an operation instruction corresponding to the page element, and the document object model service corresponding to the operation instruction of the page element needs to be determined at the application framework layer. For example, for updating the page element, according to the document object node A to be updated, the service of the updated document object node corresponding to the node is called, for creating the page element, the service creating node C for creating the document object node needs to be called first, and then the created document object node is bound to the corresponding document object node B. In this regard, in the embodiment of the present disclosure, the electronic device may send the document object node identifier and the event information corresponding to the page element determined by the local service layer to the application framework layer, so that the application framework layer determines the node to be rendered and the corresponding event information by using the document object model service. For example, the local service layer sends an event notification message in json format to the application framework layer via the onEventJSON interface.
{
"Action":1;// stands for event
“arg”:[<element-id>,<event-name>,<params>,<attributes>];
}
The action is an event identification, which characterizes whether an event is triggered or not, and a node identification of a page element corresponding to the trigger event, an attribute identification of the page element, an event name, and an event parameter, such as event-name and event parameters.
In the embodiment of the disclosure, after the application framework layer of the electronic device receives the event notification message, the corresponding document object node identifier on the fast application page can be determined according to the node identifier of the page element corresponding to the triggering event in the event notification message, and the service of associating the event information with the document object node identifier is invoked.
For example, the application framework layer determines, according to the event notification message, that the DOM node corresponding to the operation instruction is "nickname update", the event name is update, and the event parameter is a nickname attribute value to be updated, and may call a service of updating the document object node registered on the node to update the nickname attribute value of the "update nickname" node.
In the embodiment of the disclosure, the electronic device determines the document object node identifier corresponding to the page element and the service of the event information indicated by the operation instruction through the event monitoring function of the local service layer, so that the application framework layer generates the notification message immediately when the electronic device detects the operation instruction of the page element according to the information, and the generation efficiency of the notification message is improved.
In some embodiments, the event information includes an event identification and an event parameter;
The determining the notification message based on the document object node identifier corresponding to the page element and the target service includes:
determining the event identifier and the event parameter corresponding to the target service;
The notification message is determined based on the node identification of the target document object node, the event identification, and the event parameter.
In the embodiment of the disclosure, the target service is a service of the document object model service for identifying associated event information by the document object node, the event identification may be an event name of an event corresponding to the target service, and the event parameter may be a parameter required by the event corresponding to the target service. For example, the user clicks on "update nickname", the corresponding operation instruction is an update instruction, the service associated with the "update nickname" node is the update document object node service, and according to this service, it may be determined that the event identifier is updated, and the event parameter is a new nickname.
In the embodiment of the disclosure, the electronic device determines the notification message based on the node identifier, the event identifier and the event parameter of the target document object node. For example, based on the above information, it may be determined that the node of the notification message is an "update nickname" node, the event of the notification message is identified as an update node, and the event parameter of the notification message is a new nickname.
In the embodiment of the disclosure, the electronic device determines the event identifier, namely the event parameter, of the notification message by using the target service, and the mode is simple and easy to realize.
In some embodiments, the sending the notification message to the local service layer includes:
and sending the notification message to the local service layer through a message sending service of an application framework layer.
Fig. 5 is a structural diagram of a page display method according to an embodiment of the present disclosure, as shown in fig. 5, in a quick Application (APP), a notification message is determined by using a DOM API at an Application layer, different types of notification messages are sent to a local service layer by using a messaging service of a JS frame at an Application frame layer, and the local service layer parses and style calculates the notification message through the Flutter frame, and performs rendering update. Wherein the application framework layer sends the notification message to the local service layer through a messaging service, such as CALLNATIVE interface or sendMessage interface.
1) CALLNATIVE interface syntax:
callNative(pageInstId,actionListStr,args);
wherein PAGEINSTID characterizes the page identity, actionListStr characterizes the notification message list, and args characterizes other parameters. Wherein the notification message list is composed of a plurality of function messages (actions).
Fig. 6 is a schematic diagram of a function message, as shown in fig. 6, in which a JS object represents a function message, a module represents a message identifier, a method represents a message type, and args represents parameters carried by a function, according to an embodiment of the present disclosure. The message types may include types such as create node (ADDELEMENT), delete node (removeElement), update node attribute (updateAttrs), update node style (updateStyles), bind node event (addEvent), and the like.
In the embodiment of the disclosure, the electronic device sends the notification message to the local service layer through the message sending service of the application framework layer, multiplexes the existing message sending service in the fast application framework, and saves the resources of the electronic device.
In some embodiments, the event information includes an event identification;
Rendering, by the local service layer, a node associated with the document object node identifier according to the event information in the notification message, including:
determining a document object model corresponding to a quick application page to be rendered and a target node to be rendered in the document object model according to the document object node identification and the event identification in the notification message;
Generating a page layer model according to the document object model and a target node to be rendered in the document object model;
And rendering the page layer model corresponding to the fast application page to be rendered through the local service layer.
In the embodiment of the disclosure, the local service layer analyzes and obtains the corresponding DOM operation in the notification message according to the document object node identifier and the event identifier in the notification message, and performs addition, deletion and other operations on the DOM to determine the document object model corresponding to the quick application page to be rendered and the target node to be rendered.
In the embodiment of the disclosure, a local service layer generates a page layer model according to a document object model and a target node to be rendered in the document object model.
Fig. 7 is a schematic view of a construction rendering flow of a component shown in an embodiment of the disclosure, and as shown in fig. 7, in a quick application JS frame, a construction flow of a document object model of a JS layer is that a template is compiled, data is bound, a node is created, a child node is created, an attribute value is updated, a style is updated, and an event is bound. For example, a new element is created on the fast application page and added to the fast application page, it is generally required to create node D first, then insert the newly created node D into the target node E, and then, two functional messages are carried in the corresponding notification message, where one is the node D identifier and the created node event identifier, and the other is the node E identifier and the inserted node event.
In the embodiment of the disclosure, the notification message is parsed at the local service layer, the document object model is modified according to the DOM operation obtained by parsing, and the rendering mode is simple and efficient according to the modified document object model.
In some embodiments, the event information further includes event parameters;
The generating a page layer model according to the document object model and a target node to be rendered in the document object model comprises the following steps:
generating a rendering model corresponding to a target node to be rendered in the document object model according to the document object model;
and performing attribute setting on a target node to be rendered in the rendering model according to the event parameters to generate the page layer model.
Note that in the render layer, document object nodes in the document object model and page components in the render model are in one-to-one correspondence (e.g., DOM nodes are in one-to-one correspondence with Velement), and the page components (Velement) may generate corresponding render components (RENDERELEMENT). In the embodiment of the disclosure, the local service layer generates a corresponding rendering model and a target node to be rendered according to the document object model and the document object node to be rendered. Wherein the rendering model may be a rendering tree consisting of rendering layer nodes.
In the embodiment of the disclosure, the local service layer may determine the attribute and the attribute value of the target node to be rendered according to the event parameter, and perform attribute setting on the target node to be rendered, so as to perform style updating on the target node, and finally generate the page layer model. And the local service layer rasterizes and synthesizes the page layer model to complete the rendering process of the whole quick application page. The page layer model may be characterized by a tree structure, and may also be referred to as a page layer tree.
FIG. 8 is a schematic diagram of a page rendering process according to an embodiment of the disclosure, where, as shown in FIG. 8, the whole fast application page starts from creating a root node (createBody), then adding a new component (added by ADDELEMENT) to the root node (body), adding its own sub-component (added by ADDELEMENT) to the new component, and iteratively constructing a rendering tree, where each component is rendered into the page according to the corresponding template and style by the self-constructed rendering process shown in FIG. 7.
In the embodiment of the disclosure, the local service layer generates the corresponding page layer model according to the document object model, and further renders the quick application page according to the page layer model, so that the implementation mode is simple and convenient.
Fig. 9 is a diagram of a page display device according to an exemplary embodiment. Referring to fig. 9, in an alternative embodiment, the apparatus further comprises:
A determining module 901, configured to determine, at an application layer, a notification message corresponding to an operation instruction by using a document object model service in response to detecting the operation instruction on a page element in a fast application page, where the notification message carries a document object node identifier to be rendered and event information corresponding to the document object node to be rendered, and the document object node to be rendered is a node corresponding to the page element operated by at least the operation instruction;
A sending module 902, configured to send the notification message to a local service layer;
A rendering module 903, configured to render, by using the local service layer, a node associated with the document object node identifier according to the event information in the notification message;
and the display module 904 is configured to display the node-rendered fast application page.
In some embodiments, the determining module 901 is further configured to determine, in response to detecting an operation instruction for a page element in the fast application page, a document object node identifier corresponding to the page element and a target service responding to the operation instruction in the document object model service, and determine the notification message based on the document object node identifier corresponding to the page element and the target service.
In some embodiments, the determining module 901 is further configured to determine, by monitoring, by the local service layer, an operation instruction of a page element in the fast application page, a document object node identifier corresponding to the page element and event information indicated by the operation instruction, send, to an application framework layer, the document object node identifier corresponding to the page element determined by the local service layer and the event information, and call, in the application framework layer, a service associated with the event information by the document object node identifier in the document object model service, where the called service is the target service.
In some embodiments, the event information includes an event identifier and an event parameter, the determining module 901 is further configured to determine the event identifier and the event parameter corresponding to the target service, and determine the notification message based on the node identifier of the target document object node, the event identifier, and the event parameter.
In some embodiments, the sending module 902 is further configured to send the notification message to the local service layer through a messaging service of an application framework layer.
In some embodiments, the event information includes an event identifier, the rendering module 903 is further configured to determine, according to a document object node identifier in the notification message and the event identifier, a document object model corresponding to a fast application page to be rendered, and a target node to be rendered in the document object model, generate a page layer model according to the document object model and the target node to be rendered in the document object model, and render, through the local service layer, the page layer model corresponding to the fast application page to be rendered.
In some embodiments, the event information further includes event parameters, a rendering module 903 further configured to generate a rendering model corresponding to a target node to be rendered in the document object model according to the document object model, and perform attribute setting on the target node to be rendered in the rendering model according to the event parameters, so as to generate the page layer model.
The specific manner in which the various modules perform the operations in the apparatus of the above embodiments have been described in detail in connection with the embodiments of the method, and will not be described in detail herein.
Fig. 10 is a block diagram of an electronic device, which may be a mobile phone, a mobile computer, etc., as shown in embodiments of the present disclosure.
Referring to FIG. 10, the apparatus 800 may include one or more of a processing component 802, a memory 804, a power component 806, a multimedia component 808, an audio component 810, an input/output (I/O) interface 812, a sensor component 814, and a communication component 816.
The processing component 802 generally controls overall operation of the apparatus 800, such as operations associated with display, telephone calls, data communications, camera operations, and recording operations. The processing component 802 may include one or more processors 820 to execute instructions to perform all or part of the steps of the methods described above. Further, the processing component 802 can include one or more modules that facilitate interactions between the processing component 802 and other components. For example, the processing component 802 can include a multimedia module to facilitate interaction between the multimedia component 808 and the processing component 802.
The memory 804 is configured to store various types of data to support operations at the device 800. Examples of such data include instructions for any application or method operating on the device 800, contact data, phonebook data, messages, pictures, videos, and the like. The memory 804 may be implemented by any type or combination of volatile or nonvolatile memory devices such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disk.
The power supply component 806 provides power to the various components of the device 800. The power components 806 may include a power management system, one or more power sources, and other components associated with generating, managing, and distributing power for the device 800.
The multimedia component 808 includes a screen between the device 800 and the user that provides an output interface. In some embodiments, the screen may include a Liquid Crystal Display (LCD) and a Touch Panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from a user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensor may sense not only the boundary of a touch or slide action, but also the duration and pressure associated with the touch or slide operation. In some embodiments, the multimedia component 808 includes a front camera and/or a rear camera. The front camera and/or the rear camera may receive external multimedia data when the device 800 is in an operational mode, such as a shooting mode or a video mode. Each front camera and rear camera may be a fixed optical lens system or have focal length and optical zoom capabilities.
The audio component 810 is configured to output and/or input audio signals. For example, the audio component 810 includes a Microphone (MIC) configured to receive external audio signals when the device 800 is in an operational mode, such as a call mode, a recording mode, and a voice recognition mode. The received audio signals may be further stored in the memory 804 or transmitted via the communication component 816. In some embodiments, audio component 810 further includes a speaker for outputting audio signals.
The I/O interface 812 provides an interface between the processing component 802 and peripheral interface modules, which may be a keyboard, click wheel, buttons, etc. These buttons may include, but are not limited to, a home button, a volume button, an activate button, and a lock button.
The sensor assembly 814 includes one or more sensors for providing status assessment of various aspects of the apparatus 800. For example, the sensor assembly 814 may detect an on/off state of the device 800, a relative positioning of the components, such as a display and keypad of the apparatus 800, the sensor assembly 814 may also detect a change in position of the apparatus 800 or one component of the apparatus 800, the presence or absence of user contact with the apparatus 800, an orientation or acceleration/deceleration of the apparatus 800, and a change in temperature of the apparatus 800. The sensor assembly 814 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. The sensor assembly 814 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor assembly 814 may also include an acceleration sensor, a gyroscopic sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.
The communication component 816 is configured to facilitate communication between the apparatus 800 and other devices, either in a wired or wireless manner. The device 800 may access a wireless network based on a communication standard, such as Wi-Fi,4G, or 5G, or a combination thereof. In one exemplary embodiment, the communication component 816 receives broadcast signals or broadcast related information from an external broadcast management system via a broadcast channel. In one exemplary embodiment, the communication component 816 further includes a Near Field Communication (NFC) module to facilitate short range communications. For example, the NFC module may be implemented based on Radio Frequency Identification (RFID) technology, infrared data association (IrDA) technology, ultra Wideband (UWB) technology, bluetooth (BT) technology, and other technologies.
In an exemplary embodiment, the apparatus 800 may be implemented by one or more Application Specific Integrated Circuits (ASICs), digital Signal Processors (DSPs), digital Signal Processing Devices (DSPDs), programmable Logic Devices (PLDs), field Programmable Gate Arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic elements for executing the methods described above.
In an exemplary embodiment, a non-transitory computer readable storage medium is also provided, such as memory 804 including instructions executable by processor 820 of apparatus 800 to perform the above-described method. For example, the non-transitory computer readable storage medium may be ROM, random Access Memory (RAM), CD-ROM, magnetic tape, floppy disk, optical data storage device, etc.
A non-transitory computer readable storage medium, which when executed by a processor of a terminal, enables the terminal to perform a page display method, the method comprising:
determining a notification message corresponding to an operation instruction by using a document object model service at an application layer in response to detecting the operation instruction on page elements in a fast application page, wherein the notification message carries a document object node identifier to be rendered and event information corresponding to the document object node to be rendered, and the document object node to be rendered at least comprises a node corresponding to the page elements operated by the operation instruction;
sending the notification message to a local service layer;
Rendering nodes associated with the document object node identifiers according to the event information in the notification message through the local service layer;
And displaying the fast application page rendered by the node.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This disclosure is intended to cover any adaptations, uses, or adaptations of the disclosure following the general principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.
It is to be understood that the present disclosure is not limited to the precise arrangements and instrumentalities shown in the drawings, and that various modifications and changes may be effected without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.
Claims (10)
1. A method of displaying a page, the method comprising:
determining a notification message corresponding to an operation instruction by using a document object model service at an application layer in response to detecting the operation instruction on page elements in a fast application page, wherein the notification message carries a document object node identifier to be rendered and event information corresponding to the document object node to be rendered, and the document object node to be rendered at least comprises a node corresponding to the page elements operated by the operation instruction;
sending the notification message to a local service layer;
Rendering nodes associated with the document object node identifiers according to the event information in the notification message through the local service layer;
And displaying the fast application page rendered by the node.
2. The method according to claim 1, wherein in response to detecting an operation instruction for a page element in the fast application page, determining, at an application layer, a notification message corresponding to the operation instruction using a document object model service, includes:
in response to detecting an operation instruction for a page element in the quick application page, determining a document object node identifier corresponding to the page element and a target service responding to the operation instruction in the document object model service;
And determining the notification message based on the document object node identification corresponding to the page element and the target service.
3. The method according to claim 2, wherein the determining, in response to detecting the operation instruction for the page element in the fast application page, the document object node identifier corresponding to the page element and the target service in the document object model service in response to the operation instruction includes:
monitoring an operation instruction of a page element in the quick application page through the local service layer, and determining a document object node identifier corresponding to the page element and event information indicated by the operation instruction;
sending the document object node identification and event information corresponding to the page element determined by the local service layer to an application framework layer;
And calling the service associated with the event information by the document object node in the document object model service in the application framework layer, wherein the called service is the target service.
4. The method of claim 2, wherein the event information includes an event identification and an event parameter;
The determining the notification message based on the document object node identifier corresponding to the page element and the target service includes:
determining the event identifier and the event parameter corresponding to the target service;
The notification message is determined based on the node identification of the target document object node, the event identification, and the event parameter.
5. The method according to claim 1 or 2, wherein said sending the notification message to a local service layer comprises:
and sending the notification message to the local service layer through a message sending service of an application framework layer.
6. The method of claim 1, wherein the event information includes an event identification;
Rendering, by the local service layer, a node associated with the document object node identifier according to the event information in the notification message, including:
determining a document object model corresponding to a quick application page to be rendered and a target node to be rendered in the document object model according to the document object node identification and the event identification in the notification message;
Generating a page layer model according to the document object model and a target node to be rendered in the document object model;
And rendering the page layer model corresponding to the fast application page to be rendered through the local service layer.
7. The method of claim 6, wherein the event information further comprises event parameters;
The generating a page layer model according to the document object model and a target node to be rendered in the document object model comprises the following steps:
generating a rendering model corresponding to a target node to be rendered in the document object model according to the document object model;
and performing attribute setting on a target node to be rendered in the rendering model according to the event parameters to generate the page layer model.
8. A page display device, the device comprising:
the system comprises a determination module, a processing module and a processing module, wherein the determination module is used for determining a notification message corresponding to an operation instruction by utilizing a document object model service at an application layer in response to the detection of the operation instruction on page elements in a fast application page, wherein the notification message carries a document object node identifier to be rendered and event information corresponding to the document object node to be rendered, and the document object node to be rendered at least comprises the node corresponding to the page elements operated by the operation instruction;
the sending module is used for sending the notification message to the local service layer;
the rendering module is used for rendering the node associated with the document object node identifier according to the event information in the notification message through the local service layer;
and the display module is used for displaying the fast application page rendered by the node.
9. An electronic device, comprising:
A processor;
a memory for storing processor-executable instructions;
wherein the processor is configured to perform the page display method of any one of claims 1 to 7.
10. A non-transitory computer readable storage medium, characterized in that instructions in the storage medium, when executed by a processor of a terminal, enable the terminal to perform the page display method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311219608.9A CN119668732A (en) | 2023-09-20 | 2023-09-20 | Page display method and device, electronic device and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311219608.9A CN119668732A (en) | 2023-09-20 | 2023-09-20 | Page display method and device, electronic device and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN119668732A true CN119668732A (en) | 2025-03-21 |
Family
ID=94984694
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311219608.9A Pending CN119668732A (en) | 2023-09-20 | 2023-09-20 | Page display method and device, electronic device and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN119668732A (en) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109445791A (en) * | 2018-11-01 | 2019-03-08 | 郑州云海信息技术有限公司 | A kind of page front-end access method and realize system |
| CN110795444A (en) * | 2019-10-25 | 2020-02-14 | 北京小米移动软件有限公司 | DOM data update method, page update method and device |
| CN111026490A (en) * | 2019-12-09 | 2020-04-17 | 北京小米移动软件有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN112035768A (en) * | 2020-08-27 | 2020-12-04 | 深圳市欢太科技有限公司 | Fast application page rendering method, device, storage medium and electronic device |
| CN113312046A (en) * | 2020-02-26 | 2021-08-27 | 广州腾讯科技有限公司 | Sub-application page processing method and device and computer equipment |
| CN113918267A (en) * | 2021-12-15 | 2022-01-11 | 腾讯科技（深圳）有限公司 | Map interaction method and device, electronic equipment and storage medium |
| CN116700811A (en) * | 2022-02-28 | 2023-09-05 | 华为技术有限公司 | Applied operating method and related device |
-
2023
- 2023-09-20 CN CN202311219608.9A patent/CN119668732A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109445791A (en) * | 2018-11-01 | 2019-03-08 | 郑州云海信息技术有限公司 | A kind of page front-end access method and realize system |
| CN110795444A (en) * | 2019-10-25 | 2020-02-14 | 北京小米移动软件有限公司 | DOM data update method, page update method and device |
| CN111026490A (en) * | 2019-12-09 | 2020-04-17 | 北京小米移动软件有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN113312046A (en) * | 2020-02-26 | 2021-08-27 | 广州腾讯科技有限公司 | Sub-application page processing method and device and computer equipment |
| CN112035768A (en) * | 2020-08-27 | 2020-12-04 | 深圳市欢太科技有限公司 | Fast application page rendering method, device, storage medium and electronic device |
| CN113918267A (en) * | 2021-12-15 | 2022-01-11 | 腾讯科技（深圳）有限公司 | Map interaction method and device, electronic equipment and storage medium |
| CN116700811A (en) * | 2022-02-28 | 2023-09-05 | 华为技术有限公司 | Applied operating method and related device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107329743B (en) | Application page display method and device and storage medium | |
| CN106569800B (en) | Front-end interface generation method and device | |
| RU2604417C2 (en) | Method, device, terminal and server for message pushing via light application | |
| WO2016041312A1 (en) | Application program running method and device | |
| US10909203B2 (en) | Method and device for improving page display effect via execution, conversion and native layers | |
| CN109218410B (en) | Message display method and terminal equipment | |
| CN106547547B (en) | data acquisition method and device | |
| US11210449B2 (en) | Page display method and device and storage medium | |
| CN113486281B (en) | Page display method and device, electronic equipment and storage medium | |
| CN103793366A (en) | Mobile terminal having built-in comment issuing function and issuing method thereof | |
| EP2830264B1 (en) | Electronic device and method for transmitting data by using messenger application | |
| CN113835571A (en) | A terminal device, information display method and storage medium | |
| CN110543265A (en) | Page title bar generation method and device, electronic equipment and storage medium | |
| CN111314419A (en) | Network request method and device | |
| CN111382039A (en) | Method, device, electronic equipment and storage medium for reporting user behavior event | |
| CN112860625B (en) | Data acquisition method, data storage method, device, equipment and storage medium | |
| CN111695064B (en) | Buried point loading method and device | |
| CN115373763B (en) | Plug-in loading method and device, electronic equipment and storage medium | |
| CN119668732A (en) | Page display method and device, electronic device and storage medium | |
| WO2023046105A1 (en) | Message sending method and apparatus and electronic device | |
| CN111131000B (en) | Information transmission method, device, server and terminal | |
| CN115373871A (en) | Request processing method and device, electronic equipment and storage medium | |
| CN111143184B (en) | Data processing method, device and system | |
| CN115033626A (en) | Data processing method, data processing apparatus, server, and storage medium | |
| CN112486617A (en) | Ciphertext data processing architecture, method, device and machine readable medium |
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 |