Page display method and device, electronic equipment and storage medium

Abstract

The invention relates to a page display method and device, electronic equipment and a storage medium. The method comprises the following steps: determining a notification message corresponding to an operation instruction on an application layer by using a document object model service in response to the detected operation instruction on a page element in a quick application page; wherein the notification message carries a to-be-rendered document object node identifier and event information corresponding to the to-be-rendered document object node, and the to-be-rendered document object node at least comprises a node corresponding to a 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 through the local service layer according to the event information in the notification message; and displaying the fast application page rendered by the node. Through the method, the memory occupation of the application framework layer is reduced, and the performance of the fast application is improved.

Description

Technical Field

[0001] The present disclosure relates to the technical field of electronic devices, and in particular to a page display method and device, an electronic device, and a storage medium. Background Art

[0002] With the rapid development of smart electronic devices, the applications used in smart terminals are also rich and diverse. Various applications can be downloaded and installed on smart electronic devices, which brings great convenience to people's work and life. These applications that need to be downloaded and installed are usually called native applications. Because smart electronic devices need to consume more device resources when downloading and installing native applications, and native applications are slow to start and load, the industry has proposed fast applications in this case.

[0003] Quick apps are a new type of application that does not require downloading and can be used as soon as they are clicked. They are developed using a front-end technology stack and have the dual advantages of Hypertext Markup Language 5 (HTML5) pages and native applications, making the research on quick app technology currently attracting much attention. Summary of the invention

[0004] The present disclosure provides a page display method and device, an electronic device and a storage medium.

[0005] According to a first aspect of an embodiment of the present disclosure, there is provided a page display method, including:

[0006] In response to detecting an operation instruction for a page element in a quick application page, determining a notification message corresponding to the operation instruction by using a document object model service at the application layer; wherein the notification message carries an identifier of a document object node 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 the notification message to a local service layer;

[0007] Rendering the node associated with the document object node identifier according to the event information in the notification message through the local service layer;

[0008] Displays the quick application page after the node is rendered.

[0009] In some embodiments, in response to detecting an operation instruction on a page element in a quick application page, determining a notification message corresponding to the operation instruction by using a document object model service at the application layer includes:

[0010] In response to detecting an operation instruction on a page element in the quick application page, determining a document object node identifier corresponding to the page element and a target service in the document object model service that responds to the operation instruction;

[0011] The notification message is determined based on the document object node identifier corresponding to the page element and the target service.

[0012] In some embodiments, in response to detecting an operation instruction on a page element in the quick application page, determining a document object node identifier corresponding to the page element and a target service in the document object model service that responds to the operation instruction includes:

[0013] Determine, by the local service layer monitoring the operation instruction of the page element in the quick application page, the document object node identifier corresponding to the page element and the event information indicated by the operation instruction;

[0014] Sending the document object node identifier and event information corresponding to the page element determined by the local service layer to the application framework layer;

[0015] The document object node identifier in the document object model service is called at the application framework layer to associate the service with the event information; wherein the called service is the target service.

[0016] In some embodiments, the event information includes an event identifier and event parameters;

[0017] The determining the notification message based on the document object node identifier corresponding to the page element and the target service includes:

[0018] Determine the event identifier and the event parameters corresponding to the target service;

[0019] The notification message is determined based on the node identifier of the target document object node, the event identifier, and the event parameter.

[0020] In some embodiments, sending the notification message to the local service layer includes:

[0021] The notification message is sent to the local service layer through the message sending service of the application framework layer.

[0022] In some embodiments, the event information includes an event identifier;

[0023] The rendering of the node associated with the document object node identifier according to the event information in the notification message by the local service layer includes:

[0024] Determine, according to the document object node identifier in the notification message and the event identifier, a document object model corresponding to the quick application page to be rendered and a target node to be rendered in the document object model;

[0025] Generate a page layer model according to the document object model and the target node to be rendered in the document object model;

[0026] The page layer model corresponding to the quick application page to be rendered is rendered through the local service layer.

[0027] In some embodiments, the event information further includes: event parameters;

[0028] The step of generating a page layer model according to the document object model and a target node to be rendered in the document object model includes:

[0029] Generate a rendering model corresponding to a target node to be rendered in the document object model according to the document object model;

[0030] The target node to be rendered in the rendering model is attributed according to the event parameters to generate the page layer model.

[0031] According to a second aspect of an embodiment of the present disclosure, there is provided a page display device, including:

[0032] A determination module, configured to respond to the detection of an operation instruction on a page element in a quick application page, and to determine a notification message corresponding to the operation instruction by using a document object model service at the application layer; wherein the notification message carries an identifier of a document object node 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; a sending module, configured to send the notification message to a local service layer;

[0033] A rendering module, 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;

[0034] The display module is used to display the quick application page after the node is rendered.

[0035] In some embodiments, the determination module is also used to determine the document object node identifier corresponding to the page element and the target service in the document object model service that responds to the operation instruction in response to detecting an operation instruction on the page element in the quick application page; and determine the notification message based on the document object node identifier corresponding to the page element and the target service.

[0036] In some embodiments, the determination module is also used to monitor the operation instructions of the page elements in the quick application page through the local service layer, determine the document object node identifier corresponding to the page element and the event information indicated by the operation instruction; send the document object node identifier and event information corresponding to the page element determined by the local service layer to the application framework layer; call the service associated with the event information by the document object node identifier in the document object model service in the application framework layer; wherein the called service is the target service.

[0037] In some embodiments, the event information includes an event identifier and event parameters; the determination module is also used to determine the event identifier and the event parameters 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 parameters.

[0038] In some embodiments, the sending module is further used to send the notification message to the local service layer through the message sending service of the application framework layer.

[0039] In some embodiments, the event information includes an event identifier; the rendering module is further used to determine the document object model corresponding to the quick application page to be rendered and the 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 quick application page to be rendered through the local service layer.

[0040] In some embodiments, the event information also includes: event parameters; a rendering module, which is also used to generate a rendering model corresponding to the target node to be rendered in the document object model based on the document object model; set the attributes of the target node to be rendered in the rendering model according to the event parameters to generate the page layer model.

[0041] According to a third aspect of an embodiment of the present disclosure, there is provided an electronic device, including:

[0042] processor;

[0043] a memory for storing processor-executable instructions;

[0044] Wherein, the processor is configured to execute the page display method as described in the first aspect above.

[0045] According to a fourth aspect of an embodiment of the present disclosure, a non-transitory computer-readable storage medium is provided, including:

[0046] When the instructions in the storage medium are executed by the processor of the terminal, the terminal is enabled to execute the page display method as described in the first aspect above.

[0047] The technical solution provided by the embodiments of the present disclosure may have the following beneficial effects:

[0048] In an embodiment of the present disclosure, the electronic device utilizes the document object model service at the application layer to determine the document object node corresponding to the operation instruction of the page element and generate a notification message, and sends the notification message to the local service layer to realize rendering, without creating a virtual DOM at the application layer and setting listeners for objects of all document object nodes, thereby reducing the memory usage of the application layer, reducing the memory consumption of the application layer, and helping to improve the performance of fast applications.

[0049] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

[0051] Figure 1 It is a flow chart of a page display method shown in an embodiment of the present disclosure.

[0052] Figure 2 It is a schematic diagram of a front-end page document shown in an embodiment of the present disclosure.

[0053] Figure 3 It is a schematic diagram of a document object model corresponding to a front-end page document shown in an embodiment of the present disclosure.

[0054] Figure 4 This is an example diagram of commonly used functions in a Document Object Model DOM API interface shown in an embodiment of the present disclosure.

[0055] Figure 5 It is an architecture diagram of a page display method shown in an embodiment of the present disclosure.

[0056] Figure 6 It is a schematic diagram of a functional message shown in an embodiment of the present disclosure.

[0057] Figure 7 It is a schematic diagram of the construction and rendering process of a component shown in an embodiment of the present disclosure.

[0058] Figure 8 It is a schematic diagram of a page rendering process shown in an embodiment of the present disclosure.

[0059] Fig. 9The figure is a diagram of a page display device according to an exemplary embodiment.

[0060] Fig.10 It is a block diagram of an electronic device shown in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0061] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0062] It should be noted that quick applications are a new type of application based on the hardware platform of electronic devices, and can be run based on the quick application framework integrated in the operating system of the electronic device. Among them, the operating system is used to manage the hardware and software resources of the electronic device, and can be an Android operating system (Android), an Apple operating system (iPhone OS, iOS), a Microsoft operating system (Microsoft Windows), a customized operating system, a self-developed operating system, etc., which is not limited in the embodiments of the present disclosure.

[0063] In the embodiments of the present disclosure, the execution subject may be an electronic device, including: a mobile device and a fixed device; wherein the mobile device includes: a mobile phone, a tablet computer or a wearable device, etc.; the fixed device includes but is not limited to a personal computer (PC). In the embodiments of the present disclosure, the user can directly click to use the required quick application through the quick application entrance provided by the electronic device. For example, the mobile phone is provided with a quick application entrance in the notification bar and the negative one screen. The user can search for the required quick application in the quick application entrance, and use it immediately without downloading and installing.

[0064] Figure 1 This is the page display method flow shown in the embodiment of the present disclosure Figure 1 ,like Figure 1 As shown, the page display method applied in the electronic device includes the following steps:

[0065] S11. In response to detecting an operation instruction for a page element in a quick application page, determining a notification message corresponding to the operation instruction by using a document object model service at the application layer; wherein the notification message carries an identifier of a document object node to be rendered and event information corresponding to the document object node to be rendered, and the document object node to be rendered is at least a node corresponding to the page element operated by the operation instruction;

[0066] S12, sending the notification message to the local service layer;

[0067] S13, rendering the node associated with the document object node identifier according to the event information in the notification message through the local service layer;

[0068] S14. Display the quick application page after the node is rendered.

[0069] It should be noted that the Document Object Model (DOM) is a logical model that can be used to structurally describe the front-end page document, converting the front-end page into a structured set consisting of document object nodes (Node) and objects (including object properties and methods). DOM can connect the front-end page and the scripting language (JavaScript, JS). Usually, a front-end page document (such as HTML or XML) can be parsed into a corresponding DOM model using a front-end parser (such as a Web browser).

[0070] Figure 2 is a schematic diagram of a front-end page document shown in an embodiment of the present disclosure, such as Figure 2 As shown, the header (HEAD) of the front-end page document contains a title tag (TITLE), and the body (BODY) contains a first-level title tag (h1) and a paragraph tag (p). The front-end page document is parsed by the front-end parser to create a DOM corresponding to the front-end page document. Figure 3 is a schematic diagram of a document object model corresponding to a front-end page document shown in an embodiment of the present disclosure, such as Figure 3 As shown, each document object node of the DOM corresponds to an element in the front-end page document, and each document object node contains many objects (such as a TITLE object, with a text attribute value of "My document").

[0071] In step S11, in response to detecting an operation instruction for a page element in a quick application page, a notification message corresponding to the operation instruction is determined using a document object model service at the application layer. The operation instruction for the page element may be a click instruction, an input instruction, a sliding instruction, etc.; the document object model service may be an interface (Application Programming Interface, API) function for operating a document object model (Document Object Model, DOM) of a web written in a scripting language, and the operation of the DOM of a quick application page may be implemented based on the interface function. Exemplarily, the embodiment of the present disclosure may introduce a DOM API function of the web into the framework of a quick application to implement in a quick application the ability to directly operate the DOM through a DOM API similar to that in the web. 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, etc. The DOM corresponding to the front-end page may be directly operated using the DOM API, thereby changing the structure, style, and content of the front-end page document. For example, the DOM can be modified by creating document object nodes, deleting document object nodes and other services. Another example is that an event is registered on a document object node through an event listener. When an event registered on a document object node is triggered, the event processing function corresponding to the triggered event will be executed.

[0072] Exemplarily, the document object model service may include the following functions:

[0073] 1) Create a document object node:

[0074] node=this.$createElement(tagName, attrs, children);

[0075] The create document object node function is used to create a document object node specified by the tag name tagName. Among them, attrs represents the attributes on the document object node, and children represents the child node array inside the document object node.

[0076] 2) Add a document object node:

[0077] element.appendChild(node);

[0078] The add document object node function is used to append a document object node to the end of the list of child document object nodes of the specified parent document object node. Among them, node represents the document object node to be inserted, and element represents the specified parent document object node.

[0079] 3) Update the document object node:

[0080] element.setAttribute(name, value);

[0081] The update document object node function is used to set a property on the specified component. If the property already exists, the property value corresponding to the property is updated; otherwise, a new property is added to the specified component using the specified property name and property value. Name refers to the property name, and value refers to the property value.

[0082] 4) Delete the document object node:

[0083] element.removeChild(child);

[0084] 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 the document object node to be deleted.

[0085] 5)Insert document object node:

[0086] element.insertChild(child, index);

[0087] The insert document object node function is used to insert a new child document object node into the specified index position in the child document object node list of the current component. Among them, child represents the document object node to be inserted, and index represents the index position where the document object node is inserted.

[0088] 6) Register event listeners:

[0089] element.addEventListener(type, functionName);

[0090] The registered event listener service is used to register events and the event processing functions corresponding to the events for the specified document object node. When the event registered on the document object node is triggered, the event processing function is executed. Among them, type refers to the event type, and functionName refers to the event processing function.

[0091] Figure 4 is an example diagram of commonly used functions in a document object model DOM API interface shown in an embodiment of the present disclosure, such as Figure 4 As shown, you can use the DOM API to modify, set, and perform other operations on the DOM.

[0092] In the disclosed embodiment, the electronic device detects the event indicated by the operation instruction of the page element, and may register an event (for example, a click event, an input event, a sliding event, etc.) for the document object node 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. When the local service layer monitors that an event is triggered, the local service layer obtains the document object node identifier and event information corresponding to the event and sends them to the application framework layer. The local service layer may also be referred to as the local rendering layer.

[0093] In the embodiment of the present disclosure, the electronic device uses the document object model service at the application layer to determine the notification message corresponding to the operation instruction. It can be that the document object node identifier and event information corresponding to the event indicated by the operation instruction determined by the aforementioned local service layer are obtained at the application framework layer, and the service of the document object node identifier associated with the event information in the document object model service is called, and the service is used as the target service in the document object model service to respond to the operation instruction, and the document object node identifier to be rendered and the event information corresponding to the document object node to be rendered (including the event identifier and event parameters corresponding to the node to be rendered) corresponding to the target service are determined, and the notification message is determined based on the document object node identifier to be rendered, the event identifier and the event parameters corresponding to the operation instruction of the page element.

[0094] In step S12, the electronic device sends a notification message to the local service layer, and the notification message may be sent to the local service layer through a message sending service of the application framework layer.

[0095] In step S13, the electronic device parses 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 quick application page to be rendered, generates a page layer model according to the document object model, and renders the page layer model corresponding to the quick application page to be rendered.

[0096] In step S14, the electronic device may display the quick application page after node rendering through a display screen.

[0097] Exemplarily, the page element "nickname update" on the quick application page is a function button for updating the user's nickname, and the document object node A corresponding to "nickname update" has "click event" and "update nickname function" registered on it. When the user clicks "nickname update" on the quick application page of the electronic device, a click event is triggered, and the local service layer of the electronic device listens to the operation instruction "click" on the page element "nickname update", determines the document object node A, update event and update parameters corresponding to the listened "nickname update", and sends the above information to the application framework layer, the application framework layer determines the document object identifier A corresponding to "nickname update", and determines its associated update document object node identifier A and update parameters (wherein, the update document object node function is called according to the update event), and generates a notification message based on the above information and sends it to the local service layer, so that the local service layer parses the notification message, and updates and renders the document object model according to the updated document object node identifier A and update parameters corresponding to the "nickname update" obtained by parsing, and displays the effect of the nickname update in the quick application page.

[0098] Exemplarily, the page element "Add information" on the quick application page is a function button for adding user information, which can add various types of information such as hobbies and food for users. "Click event" and "Add information function" are registered on the document object node B corresponding to "Add information". When the user clicks "Add information" on the quick application page of the electronic device, a click event is triggered. The local service layer of the electronic device listens to the operation instruction "click" on the page element "Add information", determines the document object identifier B, update event and update parameters corresponding to the listened "Add information", and sends the above information to the application framework layer. The application framework layer determines that new information (document object node C) needs to be added according to the "Add information function", and binds the document object node identifier C to the document object node identifier B, and generates a notification message based on the above information (indicating that a new node operation is performed on node C and a subnode is added on node B) and sends it to the local service layer so that the local service layer parses the notification message, and updates and renders the document object model according to the creation of node C obtained by parsing and the binding of subnode C to node B, and displays the effect after the user adds information in the quick application page.

[0099] In the related art, the quick application framework adopts a responsive data operation interface (User Interface, UI) and uses a data-driven mode to update the view. For example, a virtual DOM is created in the application framework layer (JS framework layer, referred to as JS layer), and a Watcher listener is created for the object bound to the element node on the virtual DOM to monitor each attribute data of the object. When the attribute data of the object changes, the element node in the DOM is determined according to the attribute identifier and modified. This method requires the creation of a virtual DOM in the JS layer, and it is also necessary to monitor all data of the node objects in the DOM and determine the changed data, which makes the JS memory load too high, resulting in excessive application memory consumption.

[0100] In the embodiment of the present disclosure, the electronic device uses the document object model service at the application layer to determine the document object node corresponding to the operation instruction of the page element and generate a notification message, and sends the notification message to the local service layer to achieve rendering, without creating a virtual DOM at the application layer and setting listeners for objects of all document object nodes, thereby reducing the memory usage of the application layer and reducing the memory consumption of the application layer, which is beneficial to improving the performance of fast applications.

[0101] In some embodiments, in response to detecting an operation instruction on a page element in a quick application page, determining a notification message corresponding to the operation instruction by using a document object model service at the application layer includes:

[0102] In response to detecting an operation instruction on a page element in the quick application page, determining a document object node identifier corresponding to the page element and a target service in the document object model service that responds to the operation instruction;

[0103] The notification message is determined based on the document object node identifier corresponding to the page element and the target service.

[0104] In the disclosed embodiment, the electronic device detects an operation instruction for a page element in a quick application page, determines the document object node identifier corresponding to the page element, and the target service in the document object model service that responds to the operation instruction. Among them, the target service can be the target API function that responds to the operation instruction in each DOM API function. For example, when a user clicks on "nickname update", the electronic device detects the update instruction, determines the update node identifier A and the service for updating the attributes of node A (updating the nickname attribute value); for another example, when a user clicks on "new information", the electronic device detects the new instruction, determines the node identifier C corresponding to the new information, the service for creating node C, the node identifier B to add the new information, and the service for binding subnodes to node B.

[0105] In the disclosed embodiment, the electronic device determines the corresponding event identifier and event parameters according to the target service, and determines the notification message based on the node identifier, event identifier, and event parameters of the target document object node. For example, the target service is to update the nickname, the node identifier corresponding to the service is the document object node to be updated, the event identifier is the update attribute, and the event parameter is the attribute value to be updated.

[0106] In the disclosed embodiment, the electronic device can determine the specific node identifier (used to identify the DOM element node), event identifier and event parameters in the notification message according to the target service that responds to the page element operation instruction in the document object model service, thereby reducing the memory consumption of the application framework layer and saving the resources of the electronic device.

[0107] In some embodiments, in response to detecting an operation instruction on a page element in the quick application page, determining a document object node identifier corresponding to the page element and a target service in the document object model service that responds to the operation instruction includes:

[0108] Determine, by the local service layer monitoring the operation instruction of the page element in the quick application page, the document object node identifier corresponding to the page element and the event information indicated by the operation instruction;

[0109] Sending the document object node identifier and event information corresponding to the page element determined by the local service layer to the application framework layer;

[0110] The document object node identifier in the document object model service is called at the application framework layer to associate the service with the event information; wherein the called service is the target service.

[0111] In the disclosed embodiment, the electronic device can monitor the operation instructions of the page elements in the quick application page through the event listener of the local service layer. When the page elements in the quick application page are operated by the user, the local service layer can monitor the operation instructions corresponding to the user operation and obtain the event information indicated by the operation instructions. The event information includes: an event identifier indicating whether the event is triggered, a page element node identifier corresponding to the triggering event, an attribute identifier of the page element node, an event name, and event parameters.

[0112] It should be noted that the local service layer of the electronic device listens to the operation instructions corresponding to the page elements, and the document object model service corresponding to the operation instructions of the page elements needs to be determined in the application framework layer. Exemplarily, for example, for updating page elements, according to the document object node A to be updated, call the update document object node service corresponding to the node; for another example, for creating page elements, it is necessary to first call the service creation node C of the document object node, and then bind the created document object node to the corresponding document object node B. In this regard, in the embodiment of the present disclosure, the electronic device can send the document object node identifier and event information corresponding to the page element determined by the local service layer to the application framework layer, so that the application framework layer uses the document object model service to determine the node to be rendered and the corresponding event information. For example, the local service layer sends the following json format event notification message to the application framework layer through the onEventJSON interface.

[0113] {

[0114] "action": 1; / / represents event

[0115] "arg": [ <element-id> , <event-name> , <params> , <attributes>];

[0116] }

[0117] Among them, "action" is the event identifier, indicating whether the event is triggered; the node identifier "element-id" of the page element corresponding to the triggering event, the attribute identifier "key" of the page element, the event name "event-name" and the event parameters "params".

[0118] In the embodiment of the present disclosure, after the application framework layer of the electronic device receives the event notification message, it can determine the corresponding document object node identifier on the quick application page based on the node identifier of the page element corresponding to the triggering event in the event notification message, and call the service of the document object node identifier to associate the event information.

[0119] For example, the application framework layer determines based on 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 the nickname attribute value to be updated. It can then call the service of the update document object node registered on the node to update the nickname attribute value of the "update nickname" node.

[0120] In the disclosed embodiment, 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 can generate a notification message immediately when the electronic device detects the operation instruction of the page element according to the above information, thereby improving the efficiency of generating notification messages.

[0121] In some embodiments, the event information includes an event identifier and event parameters;

[0122] The determining the notification message based on the document object node identifier corresponding to the page element and the target service includes:

[0123] Determine the event identifier and the event parameters corresponding to the target service;

[0124] The notification message is determined based on the node identifier of the target document object node, the event identifier, and the event parameter.

[0125] In the disclosed embodiment, the target service is a service that associates event information with a document object node identifier in a document object model service, the event identifier may be the event name of the event corresponding to the target service, and the event parameter may be the parameter required by the event corresponding to the target service. For example, when a user clicks "update nickname", the corresponding operation instruction is an update instruction, and the service associated with the "update nickname" node is an update document object node service, according to which it can be determined that the event identifier is update, and the event parameter is a new nickname.

[0126] In the disclosed embodiment, the electronic device determines the notification message based on the node identifier, event identifier and event parameter of the target document object node. For example, based on the above information, it can be determined that the node of the notification message is the "update nickname" node, the event identifier of the notification message is the update node, and the event parameter of the notification message is the new nickname.

[0127] In the disclosed embodiment, the electronic device uses the target service to determine the event identifier of the notification message, that is, the event parameter, in a simple and easy-to-implement manner.

[0128] In some embodiments, sending the notification message to the local service layer includes:

[0129] The notification message is sent to the local service layer through the message sending service of the application framework layer.

[0130] Figure 5 is a page display method architecture diagram shown in an embodiment of the present disclosure, such as Figure 5 As shown, in the quick application (Application, APP), the DOM API is used to determine the notification message at the application layer, and the message sending service of the JS framework is used at the application framework layer to send different types of notification messages to the local service layer. The local service layer parses and calculates the style of the notification message through the Flutter framework, and performs rendering updates. Among them, the application framework layer sends the notification message to the local service layer through the message sending service, for example, the callNative interface or the sendMessage interface.

[0131] 1) callNative interface syntax:

[0132] callNative(pageInstId, actionListStr, args);

[0133] Wherein, pageInstId represents the page identifier, actionListStr represents the notification message list, and args represents other parameters. Wherein, the notification message list consists of multiple function messages (actions).

[0134] Figure 6 is a schematic diagram of a functional message shown in an embodiment of the present disclosure, such as Figure 6 As shown in the figure, it is a function message represented by a JS object, module represents the message identifier, method represents the message type, and args represents the parameters carried by the function. Among them, the message types may include: creating a node (addElement), deleting a node (removeElement), updating node attributes (updateAttrs), updating node styles (updateStyles), binding node events (addEvent), etc.

[0135] In the disclosed embodiment, the electronic device sends a notification message to the local service layer through the message sending service of the application framework layer, reuses the existing message sending service in the quick application framework, and saves electronic device resources.

[0136] In some embodiments, the event information includes an event identifier;

[0137] The rendering of the node associated with the document object node identifier according to the event information in the notification message by the local service layer includes:

[0138] Determine, according to the document object node identifier in the notification message and the event identifier, a document object model corresponding to the quick application page to be rendered and a target node to be rendered in the document object model;

[0139] Generate a page layer model according to the document object model and the target node to be rendered in the document object model;

[0140] The page layer model corresponding to the quick application page to be rendered is rendered through the local service layer.

[0141] In the disclosed embodiment, the local service layer parses the corresponding DOM operation in the notification message according to the document object node identifier and event identifier in the notification message, and performs addition, deletion, modification 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.

[0142] In the disclosed embodiment, the local service layer generates a page layer model according to the document object model and the target node to be rendered in the document object model.

[0143] Figure 7 is a schematic diagram of a component construction rendering process shown in an embodiment of the present disclosure, such as Figure 7 As shown, in the quick application JS framework, the construction process of the document object model of the JS layer is: compile templates, bind data, create nodes, create child nodes, update attribute values, update styles, and bind events. For example, to create a new element on the quick application page and add it to the quick application page, it is usually necessary to create node D first, and then insert the newly created node D into the target node E. The corresponding notification message carries two function messages, one is the node D identifier and the node creation event identifier, and the other is the node E identifier and the node insertion event. The above operations correspond to the document object model that node E will add a child node D, and the target nodes to be rendered are D and E. According to the updated document object model and the nodes D and E to be rendered, the page layer model corresponding to the operation instructions of the quick application page is generated and rendered.

[0144] In the disclosed embodiment, the notification message is parsed at the local service layer, the document object model is modified according to the DOM operation obtained by the parsing, and the rendering is performed according to the modified document object model, which is simple and efficient.

[0145] In some embodiments, the event information further includes: event parameters;

[0146] The step of generating a page layer model according to the document object model and a target node to be rendered in the document object model includes:

[0147] Generate a rendering model corresponding to a target node to be rendered in the document object model according to the document object model;

[0148] The target node to be rendered in the rendering model is attributed according to the event parameters to generate the page layer model.

[0149] It should be noted that in the rendering layer, the document object nodes in the document object model and the page components in the rendering model correspond one to one (for example, the DOM nodes correspond one to one to Velement), and the page component (Velement) can generate the corresponding rendering component (renderElement). In the embodiment of the present disclosure, the local service layer generates the corresponding rendering model and the target node to be rendered according to the document object model and the document object node to be rendered. Among them, the rendering model can be a rendering tree composed of rendering layer nodes.

[0150] In the disclosed embodiment, the local service layer can determine the attributes and attribute values ​​of the target node to be rendered according to the event parameters, and set the attributes of the target node to be rendered, so as to update the style of the target node and finally generate a page layer model. The local service layer rasterizes and synthesizes the page layer model to complete the rendering process of the entire quick application page. Among them, the page layer model can be represented by a tree structure, and the page layer model can also be called a page layer tree.

[0151] Figure 8 is a schematic diagram of a page rendering process shown in an embodiment of the present disclosure, such as Figure 8 As shown in the figure, the entire quick application page starts with creating a root node (createBody), then adding a new component to the root node (body) (using addElement), and adding its own subcomponents to this new component (using addElement to add subcomponents), and continuously iterating to construct a rendering tree. Each component is then added through the aforementioned Figure 7 As shown in the figure, its own construction and rendering process is rendered to the page according to the corresponding template and style.

[0152] In the disclosed embodiment, the local service layer generates a corresponding page layer model according to the document object model, and then renders the quick application page according to the page layer model, and the implementation method is simple and convenient.

[0153] Fig. 9 FIG. 1 is a diagram showing a page display device according to an exemplary embodiment. Fig. 9 In an optional embodiment, the device further comprises:

[0154] The determination module 901 is used to determine, in response to detecting an operation instruction on a page element in a quick application page, a notification message corresponding to the operation instruction using a document object model service at the application layer; wherein the notification message carries an identifier of a document object node 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;

[0155] A sending module 902 is used to send the notification message to the local service layer;

[0156] A rendering module 903, configured to render the node associated with the document object node identifier according to the event information in the notification message through the local service layer;

[0157] The display module 904 is used to display the quick application page after the node is rendered.

[0158] In some embodiments, the determination module 901 is also used to determine the document object node identifier corresponding to the page element and the target service in the document object model service that responds to the operation instruction in response to detecting an operation instruction on the page element in the quick application page; and determine the notification message based on the document object node identifier corresponding to the page element and the target service.

[0159] In some embodiments, the determination module 901 is also used to monitor the operation instructions of the page elements in the quick application page through the local service layer, determine the document object node identifier corresponding to the page element and the event information indicated by the operation instruction; send the document object node identifier and event information corresponding to the page element determined by the local service layer to the application framework layer; call the service associated with the event information by the document object node identifier in the document object model service in the application framework layer; wherein the called service is the target service.

[0160] In some embodiments, the event information includes an event identifier and event parameters; the determination module 901 is also used to determine the event identifier and the event parameters 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 parameters.

[0161] In some embodiments, the sending module 902 is further used to send the notification message to the local service layer through the message sending service of the application framework layer.

[0162] In some embodiments, the event information includes an event identifier; the rendering module 903 is further used to determine the document object model corresponding to the quick application page to be rendered and the 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 quick application page to be rendered through the local service layer.

[0163] In some embodiments, the event information also includes: event parameters; the rendering module 903 is also used to generate a rendering model corresponding to the target node to be rendered in the document object model according to the document object model; set the attributes of the target node to be rendered in the rendering model according to the event parameters to generate the page layer model.

[0164] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0165] Fig.10 It is a block diagram of an electronic device shown in an embodiment of the present disclosure. The electronic device 800 may be a mobile phone, a mobile computer, etc.

[0166] Reference Fig.10 , the device 800 may include one or more of the following components: 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 .

[0167] The processing component 802 generally controls the overall operation of the device 800, such as operations associated with display, phone calls, data communications, camera operations, and recording operations. The processing component 802 may include one or more processors 820 to execute instructions to complete all or part of the steps of the above-mentioned method. In addition, the processing component 802 may include one or more modules to facilitate the interaction between the processing component 802 and other components. For example, the processing component 802 may include a multimedia module to facilitate the interaction between the multimedia component 808 and the processing component 802.

[0168] The memory 804 is configured to store various types of data to support operations on the device 800. Examples of such data include instructions for any application or method operating on the device 800, contact data, phone book data, messages, pictures, videos, etc. The memory 804 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, 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 disk or optical disk.

[0169] The power component 806 provides power to the various components of the device 800. The power component 806 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for the device 800.

[0170] The multimedia component 808 includes a screen that provides an output interface between the device 800 and the user. 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 the user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundaries of the touch or slide action, but also detect 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. When the device 800 is in an operating mode, such as a shooting mode or a video mode, the front camera and / or the rear camera may receive external multimedia data. Each front camera and rear camera may be a fixed optical lens system or have a focal length and optical zoom capability.

[0171] The audio component 810 is configured to output and / or input audio signals. For example, the audio component 810 includes a microphone (MIC), and when the device 800 is in an operating mode, such as a call mode, a recording mode, and a speech recognition mode, the microphone is configured to receive an external audio signal. The received audio signal can be further stored in the memory 804 or sent via the communication component 816. In some embodiments, the audio component 810 also includes a speaker for outputting audio signals.

[0172] I / O interface 812 provides an interface between processing component 802 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include but are not limited to: home button, volume button, start button, and lock button.

[0173] The sensor assembly 814 includes one or more sensors for providing various aspects of status assessment for the device 800. For example, the sensor assembly 814 can detect the open / closed state of the device 800, the relative positioning of components, such as the display and keypad of the device 800, and the sensor assembly 814 can also detect the position change of the device 800 or a component of the device 800, the presence or absence of user contact with the device 800, the orientation or acceleration / deceleration of the device 800, and the temperature change of the device 800. The sensor assembly 814 may include a proximity sensor configured to detect the presence of a nearby object without any physical contact. The sensor assembly 814 may also include an optical 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 accelerometer, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.

[0174] The communication component 816 is configured to facilitate wired or wireless communication between the device 800 and other devices. The device 800 can access a wireless network based on a communication standard, such as Wi-Fi, 4G or 5G, or a combination thereof. In an exemplary embodiment, the communication component 816 receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 816 also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

[0175] 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 components to perform the above method.

[0176] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 804 including instructions, and the instructions can be executed by the processor 820 of the device 800 to perform the above method. For example, the non-transitory computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0177] A non-transitory computer-readable storage medium, when instructions in the storage medium are executed by a processor of a terminal, enables the terminal to perform a page display method, the method comprising:

[0178] In response to detecting an operation instruction for a page element in a quick application page, determining a notification message corresponding to the operation instruction by using a document object model service at the application layer; wherein the notification message carries an identifier of a document object node to be rendered and event information corresponding to the document object node to be rendered, and the document object node to be rendered is at least a node corresponding to the page element operated by the operation instruction;

[0179] Sending the notification message to the local service layer;

[0180] Rendering the node associated with the document object node identifier according to the event information in the notification message through the local service layer;

[0181] Displays the quick application page after the node is rendered.

[0182] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. The present disclosure is intended to cover any variations, uses or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The description and examples are to be considered exemplary only, and the true scope and spirit of the present disclosure are indicated by the claims above.

[0183] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.< / attributes> < / params> < / event-name> < / element-id>

Claims

1. A page display method, characterized in that: The method comprises: In response to detecting an operation instruction for a page element in a quick application page, determining a notification message corresponding to the operation instruction by using a document object model service at the application layer; wherein the notification message carries an identifier of a document object node to be rendered and event information corresponding to the document object node to be rendered, and the document object node to be rendered is at least a node corresponding to the page element operated by the operation instruction; Sending the notification message to the local service layer; Rendering the node associated with the document object node identifier according to the event information in the notification message through the local service layer; Displays the quick application page after the node is rendered.

2. The method according to claim 1, characterized in that In response to detecting an operation instruction on a page element in a quick application page, determining a notification message corresponding to the operation instruction by using a document object model service at an application layer includes: In response to detecting an operation instruction on a page element in the quick application page, determining a document object node identifier corresponding to the page element and a target service in the document object model service that responds to the operation instruction; The notification message is determined based on the document object node identifier corresponding to the page element and the target service.

3. The method according to claim 2, characterized in that In response to detecting an operation instruction on a page element in the quick application page, determining a document object node identifier corresponding to the page element and a target service in the document object model service that responds to the operation instruction includes: Determine, by the local service layer monitoring the operation instruction of the page element in the quick application page, the document object node identifier corresponding to the page element and the event information indicated by the operation instruction; Sending the document object node identifier and event information corresponding to the page element determined by the local service layer to the application framework layer; The document object node identifier in the document object model service is called at the application framework layer to associate the service with the event information; wherein the called service is the target service.

4. The method according to claim 2, characterized in that: The event information includes an event identifier and event parameters; The determining the notification message based on the document object node identifier corresponding to the page element and the target service includes: Determine the event identifier and the event parameters corresponding to the target service; The notification message is determined based on the node identifier of the target document object node, the event identifier, and the event parameter.

5. The method according to claim 1 or 2, characterized in that: The sending the notification message to the local service layer includes: The notification message is sent to the local service layer through the message sending service of the application framework layer.

6. The method according to claim 1, characterized in that The event information includes an event identifier; The rendering of the node associated with the document object node identifier according to the event information in the notification message by the local service layer includes: Determine, according to the document object node identifier in the notification message and the event identifier, a document object model corresponding to the quick 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; The page layer model corresponding to the quick application page to be rendered is rendered through the local service layer.

7. The method according to claim 6, characterized in that The event information also includes: event parameters; The step of generating a page layer model according to the document object model and a target node to be rendered in the document object model includes: Generate a rendering model corresponding to a target node to be rendered in the document object model according to the document object model; The target node to be rendered in the rendering model is attributed according to the event parameters to generate the page layer model.

8. A page display device, characterized in that: The device comprises: A determination module, configured to, in response to detecting an operation instruction on a page element in a quick application page, determine a notification message corresponding to the operation instruction by using a document object model service at an application layer; wherein the notification message carries an identifier of a document object node to be rendered and event information corresponding to the document object node to be rendered, and the document object node to be rendered is at least a node corresponding to the page element operated by the operation instruction; A sending module, used for sending the notification message to the local service layer; A rendering module, 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; The display module is used to display the quick application page after the node is rendered.

9. An electronic device, characterized in that: include: processor; a memory for storing processor-executable instructions; The processor is configured to execute the page display method as described in any one of claims 1 to 7.

10. A non-transitory computer-readable storage medium, characterized in that: When the instructions in the storage medium are executed by a processor of the terminal, the terminal is enabled to execute the page display method according to any one of claims 1 to 7.

Images