Page display method and device, electronic equipment and storage medium
By using the Document Object Model service to generate notification messages for rendering at the application layer in quick applications, the memory consumption problem caused by the virtual DOM is solved, and performance is improved.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- BEIJING XIAOMI MOBILE SOFTWARE CO LTD
- Filing Date
- 2023-09-20
- Publication Date
- 2026-06-16
AI Technical Summary
Existing technologies in fast applications consume excessive memory and impact performance because they require creating a virtual DOM and listening to the attribute data of all document object nodes.
The application layer uses the Document Object Model service to determine the notification message corresponding to the operation instruction and renders it through the local service layer, without creating a virtual DOM and setting listeners in the application layer, and directly generating the notification message for rendering.
It reduces application-layer memory footprint, lowers memory consumption, and improves the performance of Quick Apps.
Smart Images
Figure CN119668732B_ABST
Abstract
Description
Technical Field
[0001] This disclosure relates to the field of electronic equipment technology, and in particular to a page display method and apparatus, electronic equipment and storage medium. Background Technology
[0002] With the rapid development of smart electronic devices, the applications used on smart terminals have become increasingly diverse. Various applications can be downloaded and installed on smart electronic devices, bringing great convenience to people's work and lives. These applications that require downloading and installation are generally referred to as native applications. However, downloading and installing native applications on smart electronic devices consumes significant device resources, and native applications are slow to start and load. In response, the industry has proposed the concept of "fast apps."
[0003] Quick Apps are a new type of application that can be used instantly without downloading. They are developed using front-end technology stacks and have the dual advantages of Hyper Text Markup Language 5 (HTML5) pages and native applications, making Quick App technology research currently attracting much attention. Summary of the Invention
[0004] This disclosure provides a page display method and apparatus, an electronic device and a storage medium.
[0005] According to a first aspect of the present disclosure, a page display method is provided, comprising:
[0006] In response to detecting an operation instruction on a page element in a quick app page, the application layer uses a document object model service to determine a notification message corresponding to the operation instruction; 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 includes at least the node corresponding to the page element operated by the operation instruction; the notification message is sent to the local service layer.
[0007] The local service layer renders the nodes associated with the document object node identifier based on the event information in the notification message;
[0008] Displays the Quick App page after the node has been rendered.
[0009] In some embodiments, the step of determining the notification message corresponding to the operation instruction at the application layer using a Document Object Model service in response to detecting an operation instruction on a page element in a quick app page includes:
[0010] In response to detecting an operation instruction on a page element in the quick app page, 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 are determined.
[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, the step of determining 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 a page element in the quick app page includes:
[0013] By listening to the operation instructions of page elements in the quick app page through the local service layer, the document object node identifier corresponding to the page element and the event information indicated by the operation instruction are determined.
[0014] The document object node identifier and event information corresponding to the page element determined by the local service layer are sent to the application framework layer.
[0015] The application framework layer calls the service associated with the event information by the document object node identifier in the document object model service; wherein the service being called is the target service.
[0016] In some embodiments, the event information includes an event identifier and event parameters;
[0017] The step of 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 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 parameters.
[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 via the message sending service of the application framework layer.
[0022] In some embodiments, the event information includes an event identifier;
[0023] The step of rendering the node associated with the document object node identifier through the local service layer based on the event information in the notification message includes:
[0024] Based on the document object node identifier in the notification message and the event identifier, determine the document object model corresponding to the quick app page to be rendered, and the target node to be rendered in the document object model.
[0025] Based on the document object model and the target node to be rendered in the document object model, generate a page layer model;
[0026] The local service layer renders the page layer model corresponding to the quick app page to be rendered.
[0027] In some embodiments, the event information further includes: event parameters;
[0028] The step of generating a page layer model based on the document object model and the target nodes to be rendered in the document object model includes:
[0029] Based on the document object model, generate the rendering model corresponding to the target node to be rendered in the document object model;
[0030] The target node to be rendered in the rendering model is configured with attributes according to the event parameters to generate the page layer model.
[0031] According to a second aspect of the present disclosure, a page display device is provided, comprising:
[0032] A determination module is used to determine the notification message corresponding to the operation instruction at the application layer using a Document Object Model service in response to the detection of an operation instruction on a page element in a quick app page; 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 is used to send the notification message to the local service layer.
[0033] The rendering module is used to render the node associated with the document object node identifier through the local service layer based on the event information in the notification message;
[0034] The display module is used to display the quick app page after the node is rendered.
[0035] In some embodiments, the determining module is further configured to, in response to detecting an operation instruction on a page element in the quick app page, 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; 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 determining module is further configured to: listen to operation instructions of page elements in the quick app 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; and call the service in the document object model service that associates the document object node identifier with the event information in the application framework layer; wherein the service being called is the target service.
[0037] In some embodiments, the event information includes an event identifier and event parameters; the determining module is further configured to determine the event identifier and event parameters corresponding to the target service; and to 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 configured to send the notification message to the local service layer via 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 configured to determine the document object model corresponding to the quick app page to be rendered, and the target node to be rendered in the document object model, based on the document object node identifier in the notification message and the event identifier; generate a page layer model based on 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 app page to be rendered through the local service layer.
[0040] In some embodiments, the event information further includes: event parameters; the rendering module is further configured to generate a rendering model corresponding to the target node to be rendered in the document object model according to the document object model; and to 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 the present disclosure, an electronic device is provided, comprising:
[0042] processor;
[0043] Memory used to store processor-executable instructions;
[0044] The processor is configured to execute the page display method as described in the first aspect above.
[0045] According to a fourth aspect of the present disclosure, a non-transitory computer-readable storage medium is provided, comprising:
[0046] When the instructions in the storage medium are executed by the processor of the terminal, the terminal is able to perform the page display method as described in the first aspect above.
[0047] The technical solutions provided by the embodiments of this disclosure may include the following beneficial effects:
[0048] In the embodiments of this disclosure, the electronic device can use 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. The notification message is then sent to the local service layer for rendering, without having to create a virtual DOM at the application layer and set listeners for all document object nodes. This reduces the memory footprint and consumption of the application layer, and helps improve the performance of fast applications.
[0049] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description
[0050] The accompanying drawings, which are incorporated in and form a part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure.
[0051] Figure 1 This is a flowchart illustrating a page display method according to an embodiment of the present disclosure.
[0052] Figure 2 This is a schematic diagram of a front-end page document shown in an embodiment of this disclosure.
[0053] Figure 3 This is a schematic diagram of a document object model corresponding to a front-end page document, as shown in an embodiment of this disclosure.
[0054] Figure 4 This is an example diagram of commonly used functions in the Document Object Model (DOM) API interface, as shown in an embodiment of this disclosure.
[0055] Figure 5 This is an architectural diagram of a page display method shown in an embodiment of this disclosure.
[0056] Figure 6 This is a schematic diagram of a functional message shown in an embodiment of this disclosure.
[0057] Figure 7 This is a schematic diagram illustrating the construction and rendering process of a component according to an embodiment of the present disclosure.
[0058] Figure 8 This is a schematic diagram of a page rendering process shown in an embodiment of the present disclosure.
[0059] Figure 9This is a diagram illustrating a page display device according to an exemplary embodiment.
[0060] Figure 10 This is a block diagram of an electronic device illustrated in an embodiment of this disclosure. Detailed Implementation
[0061] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this disclosure as detailed in the appended claims.
[0062] It should be noted that Quick Apps are a new type of application based on electronic device hardware platforms, and can run on the Quick App framework integrated into the operating system of electronic devices. The operating system is used to manage the hardware and software resources of the electronic device, and can be Android, Apple's iOS, Microsoft Windows, a custom operating system, a self-developed operating system, etc., which are not limited in this disclosure.
[0063] In the embodiments of this disclosure, the executing entity can be an electronic device, including mobile devices and fixed devices; wherein, mobile devices include mobile phones, tablets, or wearable devices, etc.; fixed devices include, but are not limited to, personal computers (PCs). In the embodiments of this disclosure, users can directly click to use the desired quick app through the quick app entry provided by the electronic device. For example, mobile phones have quick app entries in the notification bar and the negative one screen, and users can search for the desired quick app through the quick app entry and use it immediately without downloading or installing it.
[0064] Figure 1 This is a flowchart of a page display method shown in an embodiment of this disclosure. Figure 1 ,like Figure 1 As shown, the page display method applied to electronic devices includes the following steps:
[0065] S11. In response to detecting an operation instruction on a page element in the quick app page, the application layer uses the Document Object Model service to determine the notification message corresponding to the operation instruction; 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 includes at least the node corresponding to the page element operated by the operation instruction.
[0066] S12. Send the notification message to the local service layer;
[0067] S13. The local service layer renders the node associated with the document object node identifier according to the event information in the notification message;
[0068] S14. Display the quick app page after the node is rendered.
[0069] It's important to note that the Document Object Model (DOM) is a logical model used to provide a structured description of front-end web page documents. It transforms the front-end page into a collection of document object nodes and objects (containing object properties and methods). The DOM connects the front-end page with scripting languages (JavaScript, JS). Typically, a front-end parser (such as a web browser) can parse a front-end web page document (such as HTML or XML) into its corresponding DOM model.
[0070] Figure 2 This is a schematic diagram of a front-end page document shown in an embodiment of this disclosure, such as... Figure 2 As shown, the header (HEAD) of the front-end page document contains heading tags (TITLE), and the body (BODY) contains first-level heading tags (h1) and paragraph tags (p). The front-end parser parses the front-end page document and creates the corresponding DOM for the front-end page document. Figure 3 This is a schematic diagram of a document object model corresponding to a front-end page document, as shown in an embodiment of this disclosure. Figure 3 As shown, each document object node in the DOM corresponds to an element in the front-end page document, and each document object node contains many objects (such as the TITLE object with the text attribute value "My document").
[0071] In step S11, in response to detecting an operation instruction on a page element in the quick app page, a notification message corresponding to the operation instruction is determined at the application layer using a Document Object Model (DOM) service. The operation instruction for the page element can be a click instruction, an input instruction, a swipe instruction, etc.; the DOM service can be an Application Programming Interface (API) function written in a scripting language for manipulating the Document Object Model (DOM) of the web. Based on this API function, DOM manipulation of the quick app page can be implemented. For example, embodiments of this disclosure can introduce web DOM API functions into the quick app framework to achieve the ability to directly manipulate the DOM through the DOM API, similar to the ability to directly manipulate the DOM in the web. The DOM service can include services such as creating document object nodes, adding document object nodes, updating document object nodes, deleting document object nodes, inserting document object nodes, and registering event listeners. Using the DOM API, the DOM corresponding to the front-end page can be directly manipulated, thereby changing the structure, style, and content of the front-end page document. For example, DOM modifications can be achieved by creating and deleting document object nodes. Another example is registering events on document object nodes using event listeners. When an event registered on a document object node is triggered, the corresponding event handler function will be executed.
[0072] For example, the Document Object Model service may include the following functions:
[0073] 1) Create document object nodes:
[0074] node=this.$createElement(tagName, attrs, children);
[0075] The function to create a document object node is used to create a document object node specified by the tag name tagName. Here, attrs represents the attributes on the document object node, and children represents the array of child nodes within the document object node.
[0076] 2) Add a document object node:
[0077] element.appendChild(node);
[0078] The `Add Document Object Node` function appends a document object node to the end of the list of child document object nodes of a specified parent document object node. Here, `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 `updateDocumentObjectNode` function is used to set a specific property on a component. If the property already exists, it updates the corresponding property value; otherwise, it adds a new property to the component using the specified property name and value. Here, `name` represents the property name, and `value` represents the property value.
[0082] 4) Delete document object node:
[0083] element.removeChild(child);
[0084] The `delete document object node` function is used to remove a child document object node from the DOM document object node tree. Here, `child` represents the document object node to be deleted.
[0085] 5) Insert a 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 at a specified index position in the list of child document object nodes of the current component. Here, `child` represents the document object node to be inserted, and `index` represents the index position at which the document object node is inserted.
[0088] 6) Register event listeners:
[0089] element.addEventListener(type, functionName);
[0090] The event listener registration service is used to register events and corresponding event handlers for specified document object nodes. When an event registered on a document object node is triggered, the event handler is executed. Here, `type` refers to the event type, and `functionName` refers to the event handler function.
[0091] Figure 4 This is an example diagram of commonly used functions in the Document Object Model (DOM) API interface, as shown in an embodiment of this disclosure. Figure 4 As shown, the DOM API can be used to modify and set the DOM.
[0092] In this embodiment of the disclosure, the electronic device detects the events indicated by the operation instructions of page elements. This can be done by registering events (e.g., click events, input events, swipe events, etc.) for the document object nodes corresponding to the page elements in the quick app page using the DOM API at the application layer; and by listening to the operation instructions of the page elements at the local service layer. When the local service layer detects that an event is triggered, it 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 can also be referred to as the local rendering layer.
[0093] In this embodiment of the disclosure, the electronic device determines the notification message corresponding to the operation instruction using the Document Object Model (DOM) service at the application layer. This can be achieved by obtaining the document object node identifier and event information corresponding to the event indicated by the operation instruction determined by the aforementioned local service layer at the application framework layer, calling the service in the document object model service that associates the document object node identifier with the event information, using this service as the target service in the document object model service to respond to the operation instruction, and determining the document object node identifier to be rendered and the event information (including the event identifier and event parameters corresponding to the node to be rendered) corresponding to the target service. 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, the notification message is determined.
[0094] In step S12, the electronic device sends a notification message to the local service layer, which can be done by sending the notification message to the local service layer through the 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 event identifier in the notification message, determines the document object model corresponding to the quick app page to be rendered, generates a page layer model based on the document object model, and renders the page layer model corresponding to the quick app page to be rendered.
[0096] In step S14, the electronic device can display the quick app page rendered by the node on the display screen.
[0097] For example, the page element "Nickname Update" on the Quick App page is a function button for updating a user's nickname. The document object node A corresponding to "Nickname Update" has a "click event" and an "update nickname function" registered. When a user clicks "Nickname Update" on the Quick App page of an electronic device, a click event is triggered. The local service layer of the electronic device listens for the operation instruction "click" on the page element "Nickname Update", determines the document object node A corresponding to "Nickname Update", the update event, and the update parameters, 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 based on the update event). Based on the above information, a notification message is generated and sent to the local service layer so that the local service layer can parse the notification message, update and render the document object model according to the parsed update document object node identifier A and update parameters corresponding to "Nickname Update", and display the updated nickname effect on the Quick App page.
[0098] For example, the "Add Information" page element on the Quick App page is a function button for adding user information, such as hobbies and food. The document object node B corresponding to "Add Information" has a registered "click event" and "add information function". When a user clicks "Add Information" on the Quick App page of an electronic device, the click event is triggered. The local service layer of the electronic device listens for the operation instruction "click" on the page element "Add Information", determines the document object identifier B, update event, and update parameters corresponding to the "Add Information", and sends this information to the application framework layer. The application framework layer determines that new information (document object node C) needs to be added based on the "add information function", binds document object node identifier C to document object node identifier B, and generates a notification message (representing the operation of creating a new node on node C and adding a child node on node B) and sends it to the local service layer. The local service layer parses the notification message, updates and renders the document object model based on the parsed creation of node C and the binding of child node C to node B, and displays the effect of the user adding information on the Quick App page.
[0099] In related technologies, the Quick App framework employs a reactive user interface (UI) that uses a data-driven approach to update views. For example, a virtual DOM is created at the application framework layer (JS framework layer, or JS layer for short), and Watchers are created for the objects bound to the element nodes on the virtual DOM to monitor each property data of the object. When the object's property data changes, the element node in the DOM is identified based on the property identifier and modified accordingly. This approach requires creating a virtual DOM at the JS layer and monitoring all data of the node objects in the DOM to determine the changed data, resulting in excessive JS memory load and excessive application memory consumption.
[0100] In this embodiment of the disclosure, the electronic device can use 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. The notification message is then sent to the local service layer for rendering, without having to create a virtual DOM at the application layer and set listeners for all document object nodes. This reduces the memory footprint and consumption of the application layer, and helps improve the performance of fast applications.
[0101] In some embodiments, the step of determining the notification message corresponding to the operation instruction at the application layer using a Document Object Model service in response to detecting an operation instruction on a page element in a quick app page includes:
[0102] In response to detecting an operation instruction on a page element in the quick app page, 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 are determined.
[0103] The notification message is determined based on the document object node identifier corresponding to the page element and the target service.
[0104] In this embodiment, the electronic device detects operation instructions on page elements in the quick app 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 instructions. The target service can be the target API function in each DOM API function that responds to the operation instructions. For example, if a user clicks "Nickname Update," the electronic device detects an update instruction, determines the update node identifier A, and the service that updates the attributes of node A (updates the nickname attribute value); as another example, if a user clicks "Add Information," the electronic device detects an add instruction, determines the node identifier C corresponding to the added information, the service that creates node C, the node identifier B to which the added information is to be added, and the service that binds child nodes to node B.
[0105] In this embodiment of the disclosure, the electronic device determines the corresponding event identifier and event parameters based on 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, if the target service is to update a nickname, the node identifier corresponding to this 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 this embodiment of the disclosure, the electronic device can determine the specific node identifier (used to identify DOM element nodes), event identifier, and event parameters in the notification message based on the target service in the document object model service that responds to the page element operation instructions. This reduces the memory consumption of the application framework layer and saves the resources of the electronic device.
[0107] In some embodiments, the step of determining 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 a page element in the quick app page includes:
[0108] By listening to the operation instructions of page elements in the quick app page through the local service layer, the document object node identifier corresponding to the page element and the event information indicated by the operation instruction are determined.
[0109] The document object node identifier and event information corresponding to the page element determined by the local service layer are sent to the application framework layer.
[0110] The application framework layer calls the service associated with the event information by the document object node identifier in the document object model service; wherein the service being called is the target service.
[0111] In this embodiment of the disclosure, the electronic device can listen for operation commands of page elements in the quick app page through the event listener of the local service layer. When a page element in the quick app page is operated by the user, the local service layer can listen for the operation command corresponding to the user operation and obtain the event information indicated by the operation command. The event information includes: an event identifier indicating whether the event has been triggered, the page element node identifier corresponding to the triggered event, the attribute identifier of the page element node, the event name, and event parameters.
[0112] It should be noted that the local service layer of the electronic device listens for operation instructions corresponding to page elements, and the document object model service corresponding to the operation instructions of page elements needs to be determined at the application framework layer. For example, for updating a page element, the update document object node service corresponding to the document object node A to be updated is called; for creating a page element, the document object node creation service C needs to be called first, and then the created document object node is bound to the corresponding document object node B. In this embodiment, 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 can use the document object model service to determine the node to be rendered and the corresponding event information. For example, the local service layer sends an event notification message in JSON format to the application framework layer through the onEventJSON interface.
[0113] {
[0114] "action": 1; / / Represents an event
[0115] “arg”: [ <element-id> , <event-name> , <params> , <attributes>];
[0116] }
[0117] Here, "action" is the event identifier, indicating whether the event is triggered; the node identifier of the page element corresponding to the event is "element-id", the attribute identifier of the page element is "key", the event name is "event-name", and the event parameters are "params".
[0118] In this embodiment of the 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 app page based on the node identifier of the page element that triggered the event in the event notification message, and call the service associated with the event information of the document object node identifier.
[0119] For example, if 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, then it can 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 this embodiment of the disclosure, the electronic device uses the event listening function of the local service layer to determine the document object node identifier corresponding to the page element and the event information indicated by the operation instruction. This allows the application framework layer to immediately generate a notification message based on the above information when the electronic device detects the operation instruction of the page element, thereby improving the efficiency of notification message generation.
[0121] In some embodiments, the event information includes an event identifier and event parameters;
[0122] The step of 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 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 parameters.
[0125] In this embodiment of the disclosure, the target service is the service that identifies the document object node and associates event information in the document object model service. The event identifier can be the event name of the event corresponding to the target service, and the event parameters can be the parameters required for the event corresponding to the target service. For example, when a user clicks "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. Based on this service, the event identifier can be determined to be an update, and the event parameter is the new nickname.
[0126] In this embodiment of the disclosure, the electronic device determines the notification message based on the node identifier, event identifier, and event parameters of the target document object node. For example, based on the above information, the node of the notification message can be determined to be 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 this embodiment of the disclosure, the electronic device uses the target service to determine the event identifier, i.e., the event parameter, of the notification message, which is simple and easy to implement.
[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 via the message sending service of the application framework layer.
[0130] Figure 5 This is an architecture diagram of a page display method shown in an embodiment of this disclosure, such as... Figure 5 As shown, in a Quick App application (APP), the DOM API is used at the application layer to determine the notification message. At the application framework layer, the message sending service of the JS framework is used to send different types of notification messages to the local service layer. The local service layer uses the Flutter framework to parse the notification messages, calculate their styles, and then render and update them. Specifically, the application framework layer sends notification messages to the local service layer through a message sending service, such as the `callNative` interface or the `sendMessage` interface.
[0131] 1) CallNative interface syntax:
[0132] callNative(pageInstId, actionListStr, args);
[0133] Here, `pageInstId` represents the page identifier, `actionListStr` represents the list of notification messages, and `args` represents other parameters. The notification message list consists of multiple function messages (actions).
[0134] Figure 6 This is a schematic diagram of a functional message shown in an embodiment of this disclosure, such as... Figure 6 As shown, this is a JavaScript object representing a function message. `module` represents the message identifier; `method` represents the message type; and `args` represents the parameters carried by the function. Message types can include: creating a node (`addElement`), deleting a node (`removeElement`), updating node attributes (`updateAttrs`), updating node styles (`updateStyles`), and binding a node event (`addEvent`), etc.
[0135] In this 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, reusing the existing message sending service in the quick app framework, thus saving electronic device resources.
[0136] In some embodiments, the event information includes an event identifier;
[0137] The step of rendering the node associated with the document object node identifier through the local service layer based on the event information in the notification message includes:
[0138] Based on the document object node identifier in the notification message and the event identifier, determine the document object model corresponding to the quick app page to be rendered, and the target node to be rendered in the document object model.
[0139] Based on the document object model and the target node to be rendered in the document object model, generate a page layer model;
[0140] The local service layer renders the page layer model corresponding to the quick app page to be rendered.
[0141] In this embodiment of the disclosure, the local service layer parses the DOM operation corresponding to the notification message based on 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 and target node to be rendered for the quick app page to be rendered.
[0142] In this embodiment of the disclosure, the local service layer generates a page layer model based on the document object model and the target node to be rendered in the document object model.
[0143] Figure 7 This is a schematic diagram illustrating the construction and rendering process of a component according to an embodiment of this disclosure, such as... Figure 7 As shown, in the Quick App JS framework, the document object model (DOM) construction process of the JS layer is as follows: 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 a Quick App page and add it to the page, it is usually necessary to first create node D, then insert the newly created node D into the target node E. The corresponding notification message carries two functional 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 as node E will add a child node D. The target nodes to be rendered are D and E. Based on the updated document object model and the nodes to be rendered, D and E, the page layer model corresponding to the operation instructions of the Quick App page is generated and rendered.
[0144] In this embodiment of the disclosure, the notification message is parsed at the local service layer, the document object model is modified according to the parsed DOM operations, and the modified document object model is rendered in a simple and efficient manner.
[0145] In some embodiments, the event information further includes: event parameters;
[0146] The step of generating a page layer model based on the document object model and the target nodes to be rendered in the document object model includes:
[0147] Based on the document object model, generate the rendering model corresponding to the target node to be rendered in the document object model;
[0148] The target node to be rendered in the rendering model is configured with attributes according to the event parameters to generate the page layer model.
[0149] It should be noted that in the rendering layer, there is a one-to-one correspondence between the document object nodes in the document object model and the page components in the rendering model (e.g., a one-to-one correspondence between DOM nodes and VEElements), and the page component (VEElement) can generate a corresponding rendering component (renderElement). In this embodiment of the disclosure, the local service layer generates the corresponding rendering model and the target node to be rendered based on the document object model and the document object node to be rendered. The rendering model can be a rendering tree composed of rendering layer nodes.
[0150] In this embodiment, the local service layer can determine the attributes and attribute values of the target node to be rendered based on event parameters, and set the attributes of the target node to be rendered in order to update the style of the target node and finally generate the page layer model. The local service layer rasterizes and composites the page layer model to complete the rendering process of the entire quick app page. The page layer model can be represented by a tree structure, and can also be called a page layer tree.
[0151] Figure 8 This is a schematic diagram illustrating a page rendering process according to an embodiment of the present disclosure, such as... Figure 8 As shown, the entire Quick App page starts by creating the root node (createBody), then adds new components to the root node (body) (using addElement), and adds its own child components to these new components (using addElement), continuously iterating to construct the render tree. Each component then... Figure 7 As shown, its own construction and rendering process renders the content onto the page according to the corresponding template and style.
[0152] In this embodiment, the local service layer generates a corresponding page layer model based on the document object model, and then renders the quick app page based on the page layer model, which is simple and convenient to implement.
[0153] Figure 9 This is a diagram illustrating a page display device according to an exemplary embodiment. (Refer to...) Figure 9 In an optional embodiment, the apparatus further includes:
[0154] The determination module 901 is used to determine the notification message corresponding to the operation instruction at the application layer using the Document Object Model service in response to the detection of an operation instruction on a page element in the quick app page; wherein the notification message carries the identifier of the document object node to be rendered and the event information corresponding to the document object node to be rendered, and the document object node to be rendered includes at least the node corresponding to the page element operated by the operation instruction.
[0155] Sending module 902 is used to send the notification message to the local service layer;
[0156] Rendering module 903 is used to render the node associated with the document object node identifier through the local service layer according to the event information in the notification message;
[0157] Display module 904 is used to display the quick app page after the node is rendered.
[0158] In some embodiments, the determining module 901 is further configured to, in response to detecting an operation instruction on a page element in the quick app page, 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; 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 determining module 901 is further configured to: listen to the operation instructions of 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; and call the service in the document object model service that associates the document object node identifier with the event information in the application framework layer; wherein the service being called is the target service.
[0160] In some embodiments, the event information includes an event identifier and event parameters; the determining module 901 is further configured to determine the event identifier and event parameters corresponding to the target service; and to 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 configured to send the notification message to the local service layer via 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 configured to determine the document object model corresponding to the quick app page to be rendered, and the target node to be rendered in the document object model, based on the document object node identifier in the notification message and the event identifier; generate a page layer model based on 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 app page to be rendered through the local service layer.
[0163] In some embodiments, the event information further includes: event parameters; the rendering module 903 is further configured to generate a rendering model corresponding to the target node to be rendered in the document object model according to the document object model; and to 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 apparatus in the above embodiments, the specific manner in which each module performs its operation has been described in detail in the embodiments related to the method, and will not be elaborated upon here.
[0165] Figure 10 This is a block diagram of an electronic device according to an embodiment of the present disclosure. The electronic device 800 may be a mobile phone, a mobile computer, etc.
[0166] Reference Figure 10 The device 800 may include one or more of the following components: a processing component 802, a memory 804, a power supply 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] Processing component 802 typically controls the overall operation of device 800, such as operations associated with display, telephone calls, data communication, camera operation, and recording. 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. Furthermore, processing component 802 may include one or more modules to facilitate interaction between processing component 802 and other components. For example, processing component 802 may include a multimedia module to facilitate interaction between multimedia component 808 and processing component 802.
[0168] Memory 804 is configured to store various types of data to support the operation of device 800. Examples of this data include instructions for any application or method operating on device 800, contact data, phonebook data, messages, pictures, videos, etc. 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 storage, flash memory, magnetic disk, or optical disk.
[0169] The power supply component 806 provides power to the various components of the device 800. The power supply component 806 may include a power management system, one or more power sources, and other components associated with generating, managing, and distributing power to the device 800.
[0170] 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 touchscreen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensors may sense not only the boundaries of the touch or swipe action but also the duration and pressure associated with the touch or swipe operation. In some embodiments, multimedia component 808 includes a front-facing camera and / or a rear-facing camera. When the device 800 is in an operating mode, such as a shooting mode or a video mode, the front-facing camera and / or the rear-facing camera may receive external multimedia data. Each front-facing camera and rear-facing camera may be a fixed optical lens system or have focal length and optical zoom capabilities.
[0171] Audio component 810 is configured to output and / or input audio signals. For example, audio component 810 includes a microphone (MIC) configured to receive external audio signals when device 800 is in an operating mode, such as call mode, recording mode, and voice recognition mode. The received audio signals may be further stored in memory 804 or transmitted via communication component 816. In some embodiments, 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 buttons, volume buttons, power buttons, and lock buttons.
[0173] Sensor assembly 814 includes one or more sensors for providing status assessments of various aspects of device 800. For example, sensor assembly 814 may detect the on / off state of device 800, the relative positioning of components such as the display and keypad of device 800, changes in the position of device 800 or a component of device 800, the presence or absence of user contact with device 800, the orientation or acceleration / deceleration of device 800, and temperature changes of device 800. Sensor assembly 814 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. 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, sensor assembly 814 may also include an accelerometer, a gyroscope, a magnetometer, a pressure sensor, or a temperature sensor.
[0174] Communication component 816 is configured to facilitate wired or wireless communication between device 800 and other devices. Device 800 can access wireless networks based on communication standards, such as Wi-Fi, 4G, or 5G, or combinations thereof. In one exemplary embodiment, communication component 816 receives broadcast signals or broadcast-related information from an external broadcast management system via a broadcast channel. In one exemplary embodiment, communication component 816 also includes a near-field communication (NFC) module to facilitate short-range communication. 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.
[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 methods described above.
[0176] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 804 including instructions, which can be executed by a processor 820 of the device 800 to perform the above-described method. For example, the non-transitory computer-readable storage medium may be a ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, and optical data storage device, etc.
[0177] A non-transitory computer-readable storage medium, wherein when instructions in the storage medium are executed by a terminal's processor, the terminal is enabled to perform a page display method, the method comprising:
[0178] In response to the detection of an operation instruction on a page element in a quick app page, a notification message corresponding to the operation instruction is determined at the application layer using a document object model service; 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 includes at least the node corresponding to the page element operated by the operation instruction.
[0179] Send the notification message to the local service layer;
[0180] The local service layer renders the nodes associated with the document object node identifier based on the event information in the notification message;
[0181] Displays the Quick App page after the node has been rendered.
[0182] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the foregoing claims.
[0183] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.< / attributes> < / params> < / event-name> < / element-id>
Claims
1. A page display method characterized by comprising: The method includes: In response to the detection of an operation instruction on a page element in a quick app page, a notification message corresponding to the operation instruction is determined at the application layer using a Document Object Model (DOM) service. The notification message carries an identifier of a document object node to be rendered and event information corresponding to that document object node. The document object node to be rendered includes at least the node corresponding to the page element operated by the operation instruction. The DOM service includes application programming interface (API) functions that directly manipulate the DOM model. Send the notification message to the local service layer; The local service layer renders the nodes associated with the document object node identifier based on the event information in the notification message; Displays the Quick App page after the node has been rendered.
2. The method of claim 1, wherein, The step of responding to the detection of an operation instruction on a page element in a quick app page, and determining the notification message corresponding to the operation instruction at the application layer using a document object model service, includes: In response to detecting an operation instruction on a page element in the quick app page, 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 are determined. The notification message is determined based on the document object node identifier corresponding to the page element and the target service.
3. The method of claim 2, wherein, The step of responding to the detection of an operation instruction on a page element in the quick app page, determining 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, includes: By listening to the operation instructions of page elements in the quick app page through the local service layer, the document object node identifier corresponding to the page element and the event information indicated by the operation instruction are determined. The document object node identifier and event information corresponding to the page element determined by the local service layer are sent to the application framework layer. The application framework layer calls the service associated with the event information by the document object node identifier in the document object model service; wherein the service being called is the target service.
4. The method of claim 2, wherein, The event information includes the event identifier and event parameters; The step of 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 event parameters corresponding to the target service; The notification message is determined based on the node identifier of the document object node, the event identifier, and the event parameters.
5. The method according to claim 1 or 2, characterized in that, Sending the notification message to the local service layer includes: The notification message is sent to the local service layer via 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 step of rendering the node associated with the document object node identifier through the local service layer based on the event information in the notification message includes: Based on the document object node identifier in the notification message and the event identifier, determine the document object model corresponding to the quick app page to be rendered, and the target node to be rendered in the document object model. Based on the document object model and the target node to be rendered in the document object model, generate a page layer model; The local service layer renders the page layer model corresponding to the quick app page to be rendered.
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 based on the document object model and the target nodes to be rendered in the document object model includes: Based on the document object model, generate the rendering model corresponding to the target node to be rendered in the document object model; The target node to be rendered in the rendering model is configured with attributes according to the event parameters to generate the page layer model.
8. A page display device, characterized in that, The device includes: A determination module is used to respond to the detection of an operation instruction on a page element in a quick app page, and to determine the notification message corresponding to the operation instruction at the application layer using a Document Object Model (DOM) service; 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 includes at least the node corresponding to the page element operated by the operation instruction; the document object model service includes application programming interface (API) functions that directly manipulate the document object model; The sending module is used to send the notification message to the local service layer; The rendering module is used to render the node associated with the document object node identifier through the local service layer based on the event information in the notification message; The display module is used to display the quick app page after the node is rendered.
9. An electronic device, characterized in that, include: processor; Memory used to store processor-executable instructions; The processor is configured to perform 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 the processor of the terminal, the terminal is able to perform the page display method as described in any one of claims 1 to 7.