Page display method and device based on near field communication

Abstract

The invention discloses a page display method based on near field communication, and the method comprises the steps: responding to a detected near field communication tag, and reading a tag identifier in the near field communication tag through a near field communication mode; sending a page configuration acquisition request to a server based on the tag identifier, and receiving page configuration data returned by the server; based on the page configuration data, rendering and displaying an aggregation service page in a screen display area of the user terminal, the aggregation service page comprising a plurality of function entries; and in response to a touch operation for a target function entry in the plurality of function entries, skipping to a service detail page corresponding to the target function entry. According to the method and the device, the page configuration data of the server is quickly obtained in a near field communication mode, dynamic rendering and aggregation display of the service page are realized, an operation path of a user is simplified, and the man-machine interaction efficiency is improved.

Description

Technical Field

[0001] This application relates to the field of Internet technology, and in particular to a page display method and device based on near-field communication. Background Technology

[0002] With the deep integration of mobile internet and offline physical services, smart services have become an industry standard. Currently, users typically rely on scanning QR codes, searching keywords, or manually entering addresses to access merchant services. These methods involve lengthy and cumbersome processes, reducing the efficiency of service access for users. Therefore, there is an urgent need for a page display solution that can simplify the access path through near-field communication (NFC) technology to improve human-computer interaction efficiency. Summary of the Invention

[0003] This application provides a page display method and device based on near-field communication. The technical solution is as follows: In a first aspect, embodiments of this application provide a page display method based on near-field communication (NFC). The method includes: in response to detecting a NFC tag, reading a tag identifier from the NFC tag via NFC; sending a page configuration retrieval request to a server based on the tag identifier, and receiving page configuration data returned by the server; rendering and displaying an aggregated service page on the screen display area of ​​the user terminal based on the page configuration data, the aggregated service page containing multiple function entry points; and, in response to a touch operation on a target function entry point among the multiple function entry points, redirecting to a service details page corresponding to the target function entry point.

[0004] In one possible implementation, the method further includes: the page configuration data includes routing control parameters corresponding to the plurality of functional entry points, the routing control parameters including a Uniform Resource Identifier and a backup redirect link; the redirection to the service details page corresponding to the target functional entry point includes: obtaining the installation status of the target application on the user terminal; if the installation status is installed, then invoking the target application based on the Uniform Resource Identifier and displaying the service details page in the target application; if the installation status is not installed, then loading a lightweight container based on the backup redirect link and displaying the service details page in the lightweight container.

[0005] In one possible implementation, the method further includes: the aggregated service page also includes a merchant information display area located at the multiple function entry points; the step of rendering and displaying the aggregated service page in the screen display area based on the page configuration data further includes: parsing the merchant attribute fields in the page configuration data; and rendering dynamic merchant information in the merchant information display area based on the merchant attribute fields, wherein the dynamic merchant information includes at least one of the following: real-time merchant rating information, average consumption price information, and third-party ranking information. In one possible implementation, the method further includes: the page configuration data returned by the server includes business status indication information; based on the service order information represented by the business status indication information, a dynamic prompt badge is overlaid and rendered at a specific function entry point on the aggregated service page; the dynamic prompt badge contains text or animated elements describing the order progress.

[0006] In one possible implementation, the method further includes: the page configuration data also includes scene priority parameters; the step of rendering and displaying the aggregated service page in the screen display area based on the page configuration data includes: extracting the scene priority parameters corresponding to each of the plurality of functional entry points from the page configuration data; and rendering the plurality of functional entry points based on the scene priority parameters.

[0007] In one possible implementation, the method further includes: rendering and displaying the aggregated service page in the screen display area based on the page configuration data, including: calling the operating system's system-level lightweight framework to overlay and display a half-screen floating layer card in the screen display area; wherein the half-screen floating layer card covers a portion of the screen display area, and the uncovered areas of the screen display area are blurred or darkened; the multiple function entry points are arranged within the interactive area of ​​the half-screen floating layer card.

[0008] In one possible implementation, the method further includes: after sending a page configuration retrieval request to the server based on the tag identifier, the method further includes: monitoring the response time of the page configuration retrieval request; if the response time exceeds a preset threshold, invoking a locally pre-built native component to render a loading transition page, the loading transition page including a placeholder skeleton screen or a breathing animation; in response to receiving the page configuration data, rendering the aggregation service page based on the page configuration data, and replacing the loading transition page with the aggregation service page.

[0009] In one possible implementation, the method further includes: receiving the page configuration data returned by the server, comprising: receiving page configuration data generated by the server based on a business binding record; wherein the business binding record is generated by the merchant for NFC materials with the near-field communication tag, and the surface of the NFC material is also provided with a graphic code; the generation process of the business binding record includes: the merchant obtaining first identification information of the graphic code by scanning the graphic code; sending a binding request to the server, the binding request carrying the first identification information and a target table identifier; triggering the server to obtain the second identification information of the associated near-field communication tag according to a preset mapping relationship indexed by the first identification information, and generating the business binding record of the tag and the target table identifier based on the second identification information.

[0010] In a second aspect, embodiments of this application provide an electronic device, including a processor; a memory for storing processor-executable instructions; wherein the processor is configured to perform the method as described in any one of claims 1 to 9.

[0011] Thirdly, embodiments of this application also provide a computer program or computer program product that stores at least one computer instruction, which is loaded and executed by a processor to enable the computer to implement any of the above-described near-field communication page display methods.

[0012] Fourthly, a computer-readable storage medium is also provided, which stores at least one piece of program code, which is loaded and executed by a processor to enable a computer to implement any of the above-described near-field communication page display methods.

[0013] The technical solution provided in this application embodiment brings at least the following beneficial effects: The technical solution provided in this application embodiment uses near-field communication to quickly obtain the page configuration data of the server, realizes the dynamic rendering and aggregated display of the service page, simplifies the user's operation path, and improves the efficiency of human-computer interaction. Attached Figure Description

[0014] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0015] Figure 1 This is a schematic diagram of the implementation environment of a page display method based on near-field communication provided in an embodiment of this application; Figure 2 This is a schematic flowchart of a page display method based on near-field communication provided in an embodiment of this application. Detailed Implementation

[0016] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0017] Figure 1 This is a schematic diagram illustrating the implementation environment of a page display method based on near-field communication provided in an embodiment of this application, such as... Figure 1 As shown, the implementation environment includes: electronic device 101 and server 102.

[0018] Electronic device 101 may be at least one of a smartphone, game console, desktop computer, tablet computer, e-book reader, MP3 (Moving Picture Experts Group Audio Layer III) player, MP4 (Moving Picture Experts Group Audio Layer IV) player, and laptop computer. Electronic device 101 is used to acquire first location information and target content, and send the first location information and target content to server 102.

[0019] Electronic device 101 can refer to one of a plurality of electronic devices. This embodiment uses electronic device 101 as an example only. Those skilled in the art will know that the number of electronic devices 101 can be more or less. For example, there may be only one electronic device 101, or there may be dozens or hundreds of electronic devices 101, or even more. This application embodiment does not limit the number or type of electronic devices.

[0020] Server 102 can be a single server, a server cluster consisting of multiple servers, or any of the following: a cloud computing platform or a virtualization center. This embodiment of the application does not limit this. Server 102 communicates with electronic device 101 via a wired or wireless network. Server 102 is used to generate multiple candidate acquisition schemes based on the first location information and the target content, and send the multiple candidate acquisition schemes to electronic device 101. Of course, server 102 may also have other functions, which are not limited in this embodiment of the application.

[0021] Based on the above implementation environment, this application provides a page display method based on near-field communication, so as to... Figure 2 The schematic flowchart shown in this application embodiment illustrates a page display method based on near-field communication. This method can be implemented by... Figure 1 The interaction between electronic device 101 and server 102 is described. For example... Figure 2 As shown, the method may include the following steps: In step 102, in response to the detection of a near-field communication (NFC) tag, the tag identifier in the NFC tag is read via NFC. Specifically, the user terminal enables NFC functionality. When the user brings the terminal close to an NFC tag attached to a table or material, the terminal establishes a connection with the NFC tag via electromagnetic induction. This connection establishment process can be passive, meaning the NFC tag is powered by the radio frequency field emitted by the terminal. After the connection is established, the terminal reads the unique identifier (ID) stored in the tag. For example, the read tag identifier is a specific string of numbers or characters, which has been pre-bound to a specific physical location (such as a store ID or table number) on the server side.

[0022] In step 104, a page configuration retrieval request is sent to the server based on the tag identifier, and the page configuration data returned by the server is received. The user terminal encapsulates the read tag identifier in a network request (such as an HTTP or HTTPS request) and sends it to the server. After receiving the request, the server looks up the configuration information corresponding to the tag identifier according to a pre-stored mapping table and returns it. In this embodiment, the page configuration data returned by the server adopts a simplified format, mainly containing service list data. This data structure contains multiple service items, and each service item is configured with at least a "service name" and a "service unique identifier". For example, the returned data indicates that there are two service entry points: the first service item name is "order food", and the corresponding service unique identifier is "1001"; the second service item name is "receive coupons", and the corresponding service unique identifier is "1002". At this time, the returned data does not yet contain complex application invocation protocols or backup links, and only provides the most basic display information.

[0023] In one optional embodiment, the terminal starts a local timer while sending a page configuration retrieval request to the server. A threshold is then determined, with a preset threshold set (e.g., 200 milliseconds or 500 milliseconds). If the server returns data within the threshold time, the timer is canceled, and the normal rendering process is executed directly. If no response is received after the threshold is exceeded, the terminal determines that it may be in a weak network environment or that the server processing is slow. In this case, the terminal does not display a blank page or a loading indicator, but immediately calls a locally pre-built native component to render a loading transition page on the screen. This page includes a placeholder skeleton screen, which uses gray blocks to simulate the text lines, image blocks, and button layout of the final page. The color blocks on the skeleton screen can contain a faint light animation sweeping from left to right to indicate that loading is in progress. This process reads local resources entirely and does not rely on the network, thus allowing for instant display. Finally, after finally receiving the page configuration data returned by the server, the terminal renders the aggregated service page using the actual data. The terminal replaces the placeholder nodes of the skeleton screen with the view nodes of the actual data one by one, and can use fade-in / fade-out animation effects to complete the replacement, avoiding screen flickering.

[0024] By introducing a "local preloading + skeleton screen" mechanism, the problem of prolonged blank screens in weak network environments is effectively solved. Providing users with clear and psychologically expected visual feedback before data arrives maintains their visual attention and alleviates their waiting anxiety; while the seamless replacement after data arrives ensures the continuity and smoothness of the operating experience and improves the perceived performance of the application.

[0025] Optionally, the page configuration data returned by the server is richer, including routing control parameters. Specifically, for each functional entry point, the data structure, in addition to the basic name, also includes a "Uniform Resource Identifier (URIScheme)" field and a "Backup URL" field. The URIScheme is used to configure the protocol address that invokes the native application, such as the specific page protocol path of the target app, which carries business parameters such as the table number; the backup URL is used to configure the Hypertext Transfer Protocol link opened in a webpage or mini-program, such as a webpage address compatible with mobile browsers.

[0026] Accordingly, the terminal executes the specific redirection logic, including first checking the installation status. When the user terminal receives a redirection command, it first checks the installation status of the target application. For Android systems, this can be achieved by checking if the target application's package name exists through the package manager; for iOS systems, it can be achieved by detecting whether a specific URL scheme is registered. If the detection result is "installed," the terminal prioritizes reading and parsing the aforementioned Uniform Resource Identifier (URI), utilizes the deep linking technology provided by the operating system to directly launch the target application, and navigates directly to the specified service page within the app based on the parameters in the link, rather than simply opening the app's homepage. If the detection result is "not installed," the terminal automatically executes a fallback strategy, reading the aforementioned backup redirection link. The terminal launches a lightweight container, loads the backup link in the container, and displays the web version or mini-program version of the service details page. The lightweight container includes, but is not limited to, the system's built-in web browser component, the mini-program container within a super app, or the mobile phone manufacturer's quick app container.

[0027] By configuring dual routing parameters of "primary route + backup route" and combining it with local environment detection of the terminal, adaptive redirection of "device-to-device, web-to-web" is achieved. This not only fully utilizes the performance advantages and rich functionality of the native app, but also ensures that users who have not installed the app can use basic services without obstacles, significantly improving the service startup success rate and coverage, and solving the technical problem of service interruption caused by environmental differences.

[0028] In step 106, based on the page configuration data, an aggregated service page is rendered and displayed on the user terminal's screen display area. This aggregated service page contains multiple function entry points. For example, the user terminal parses the above data and renders a list-style aggregated service page on the screen. The page generates four function entry points, displaying the text "Order Now," "Buy Group Deals," "Pay Now," and "Add to Favorites." At this point, each entry point is associated with a "unique service identifier" from the aforementioned data, serving as an index for subsequent navigation.

[0029] Optionally, this embodiment employs a half-screen overlay display method. When rendering the aggregation service page, the terminal does not perform a full-screen jump, but instead invokes a system-level lightweight framework to slide out from the bottom of the screen as a half-screen overlay card. This card covers approximately 50% to 70% of the screen area, and has a draggable handle or close button at the top. Simultaneously, the terminal applies a Gaussian blur to the areas of the screen display not covered by the card, or overlays a semi-transparent dark mask. Clicking the masked area directly collapses the overlay card. This design preserves the user's current context, allowing the user to perceive that they have not completely left the current desktop, reducing the user's psychological burden and operational costs.

[0030] Optionally, this embodiment of the application implements dynamic merchant information rendering. The terminal parses the merchant attribute fields in the configuration data and renders dynamic merchant information in the top area of ​​the floating card. The dynamic merchant information may include a star icon or highlighted score rendered from the rating field, "average consumption price" text rendered from the price field, and honor tags rendered from the ranking field. All of this information is sent by the server based on real-time data, ensuring the timeliness of the displayed content.

[0031] Optionally, this embodiment introduces scene priority sorting. The configuration data includes scene priority parameters. The server dynamically adjusts the priority values ​​of each function entry in the distributed data based on the current time period or the user's historical behavior preferences. When rendering the list, the terminal sorts the function entries from high to low according to this parameter. For example, at the end of the meal, the server increases the priority of the "Issue Invoice" or "One-Click Payment" entry, making it displayed at the top; while during peak dining hours, the "Add Dishes" entry is displayed at the top.

[0032] Optionally, this embodiment supports dynamic business badges. The data returned by the server also includes business status indication information. The terminal determines the current order status based on this information. The specific determination logic is as follows: The server queries the backend database. If it finds that the user account has an incomplete order at the current table (e.g., the status is "making"), it carries the status identifier in the returned data. After the terminal parses the status identifier, it overlays and renders a dynamic prompt badge above the "order" function entry. The badge content can display the text "Add Food" or "Making", or display a small breathing animation element, prompting the user to directly click to enter the add food process instead of reopening the table.

[0033] The half-screen overlay design reduces visual distractions and provides a lightweight interactive experience. Meanwhile, displaying merchant ratings, average price per user, and real-time order status prominently at the entry point significantly increases information density. Users can access key decision-making information without navigating to the details page, achieving highly efficient "what you see is what you get" service interaction. Dynamic sorting and badge prompts enable proactive service based on anticipating potential user needs.

[0034] In step 108, in response to a touch operation on a target function entry among the multiple function entry points, the user is redirected to the service details page corresponding to the target function entry point. For example, when a user clicks the target function entry point "Order Food," the terminal responds to the click event. Based on the unique service identifier associated with this entry point, the terminal searches for the locally preset redirection logic or initiates a secondary request to the server, thereby redirecting the user to the default details page corresponding to the identifier for subsequent operations.

[0035] By instantly accessing aggregated service pages linked to the current physical scene via NFC touch, a "one-touch access" service method is achieved. Compared to traditional search or multi-level menu searches, this solution greatly simplifies the user's path to finding specific service entry points and improves interaction efficiency. It establishes a closed-loop technology of "touch - obtain configuration - render list - jump," which can cover all variant solutions based on this logic.

[0036] In an optional embodiment, a dedicated composite NFC material is used. This material physically separates the graphic code (e.g., a QR code) and the near-field communication tag into different areas on its surface. For example, the right side of the material surface has a QR code printed for optical recognition, while the middle area encapsulates an NFC chip for near-field sensing. This partitioning not only facilitates user differentiation of operating areas but also effectively prevents interference from the metal components in the QR code printing material to the NFC radio frequency signal. Before the NFC material is put into use, the system server pre-configures a mapping relationship. Specifically, the server stores an association data table that records index key-value pairs between the first identification information of the graphic code and the second identification information of the near-field communication tag, both physically located on the same NFC material. It should be understood that although the graphic code and the NFC tag support different reading protocols, they are uniquely corresponding on the physical carrier. For example, a database pre-stores an association record between a specific QR code serial number and the NFC chip UID, which serves as the basis for subsequent business binding.

[0037] Based on the aforementioned hardware infrastructure, this embodiment details the process of generating business binding records. When a merchant (e.g., a management terminal used by restaurant servers) needs to configure a specific physical location (such as a table), the merchant does not need to use a dedicated NFC reader / writer. Instead, it scans the graphic code on the material using a camera to obtain the first identification information of the graphic code. Subsequently, the merchant sends a binding request to the server, which includes both the scanned first identification information and the target table identifier specified by the merchant (e.g., "Table 12"). The server responds to the binding request by executing index lookup logic. Specifically, the server uses the received first identification information as the index key to query the aforementioned pre-set association data table and extracts the second identification information of the near-field communication tag physically associated with the graphic code. Finally, the server generates a business binding record between the extracted second identification information and the target table identifier.

[0038] Through the above process, the server completes the logical binding between the NFC tag and the specific table. When a user terminal touches the NFC tag later, the server can locate the target table based on the business binding record and then send the corresponding page configuration data. This preferred embodiment, through the mechanism of "pre-set physical association combined with indirect binding by scanning QR codes," eliminates the need for merchants to equip themselves with expensive professional NFC reading and writing equipment. They can complete the backend configuration of the NFC tag simply by scanning a QR code with a common mobile phone camera, greatly reducing hardware deployment costs. At the same time, the visual characteristics of QR codes reduce the risk of accidental operation, realizing a dual-channel service deployment that can be implemented through both scanning and touching.

[0039] In an exemplary embodiment, a computer-readable storage medium is also provided, which stores at least one piece of program code that is loaded and executed by a processor to enable a computer to implement any of the above-described near-field communication page display methods.

[0040] Optionally, the aforementioned computer-readable storage medium may be a read-only memory (ROM), a random access memory (RAM), a compact disc read-only memory (CD-ROM), magnetic tape, floppy disk, and optical data storage device, etc.

[0041] In an exemplary embodiment, a computer program or computer program product is also provided, which stores at least one computer instruction, which is loaded and executed by a processor to enable the computer to implement any of the above-described near-field communication page display methods.

[0042] It should be noted that all actions involving the acquisition of signals, information, or data in this application are carried out in compliance with the data protection laws and policies of the country where the application is located, and with authorization from the owner of the relevant device.

[0043] It should be understood that "multiple" as used in this article refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0044] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0045] The above are merely exemplary embodiments of this application and are not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application shall be included within the protection scope of this application.

Claims

1. A page display method based on near-field communication, characterized in that, Applied to a user terminal, the method includes: In response to the detection of a near-field communication tag, the tag identifier in the near-field communication tag is read via near-field communication; a page configuration retrieval request is sent to the server based on the tag identifier, and the page configuration data returned by the server is received; based on the page configuration data, an aggregated service page is rendered and displayed in the screen display area of ​​the user terminal, the aggregated service page containing multiple function entry points; in response to a touch operation on a target function entry point among the multiple function entry points, the user is redirected to the service details page corresponding to the target function entry point.

2. The method according to claim 1, characterized in that, The page configuration data includes routing control parameters corresponding to the multiple function entry points, and the routing control parameters include a Uniform Resource Identifier and backup redirect links. The step of redirecting to the service details page corresponding to the target function entry includes: obtaining the installation status of the target application on the user terminal; If the installation status is "installed", the target application is invoked based on the Uniform Resource Identifier, and the service details page is displayed in the target application; if the installation status is "not installed", a lightweight container is loaded based on the backup redirect link, and the service details page is displayed in the lightweight container.

3. The method according to claim 1, characterized in that, The aggregated service page also includes a merchant information display area located at the multiple function entry points; the process of rendering and displaying the aggregated service page on the screen display area based on the page configuration data further includes: parsing the merchant attribute fields in the page configuration data; and rendering dynamic merchant information in the merchant information display area based on the merchant attribute fields, wherein the dynamic merchant information includes at least one of the following: real-time merchant rating information, average consumption price information, and third-party ranking information.

4. The method according to claim 1, characterized in that, The page configuration data returned by the server includes business status indication information; based on the service order information represented by the business status indication information, a dynamic prompt badge is overlaid and rendered at a specific function entry point on the aggregated service page; the dynamic prompt badge contains text or animated elements describing the order progress.

5. The method according to claim 1, characterized in that, The page configuration data also includes scene priority parameters; the step of rendering and displaying the aggregated service page in the screen display area based on the page configuration data includes: extracting the scene priority parameters corresponding to each of the multiple function entry points from the page configuration data; and rendering the multiple function entry points based on the scene priority parameters.

6. The method according to claim 1, characterized in that, The step of rendering and displaying the aggregated service page in the screen display area based on the page configuration data includes: calling the operating system's system-level lightweight framework to overlay and display a half-screen floating layer card in the screen display area; wherein the half-screen floating layer card covers a portion of the screen display area, and the uncovered areas of the screen display area are blurred or darkened; the multiple function entry points are arranged within the interactive area of ​​the half-screen floating layer card.

7. The method according to claim 1, characterized in that, After sending a page configuration retrieval request to the server based on the tag identifier, the method further includes: monitoring the response time of the page configuration retrieval request; if the response time exceeds a preset threshold, calling a locally preset native component to render a loading transition page, the loading transition page including a placeholder skeleton screen or a breathing animation; in response to receiving the page configuration data, rendering the aggregation service page based on the page configuration data, and replacing the loading transition page with the aggregation service page.

8. The method according to claim 1, characterized in that, Receiving the page configuration data returned by the server includes: receiving page configuration data generated by the server based on a business binding record; wherein the business binding record is generated by the merchant for NFC materials with the near-field communication tag, and the surface of the NFC material is also provided with a graphic code; the generation process of the business binding record includes: the merchant scanning the graphic code to obtain the first identification information of the graphic code; sending a binding request to the server, the binding request carrying the first identification information and the target table identifier; triggering the server to obtain the second identification information of the associated near-field communication tag according to the preset mapping relationship indexed by the first identification information, and generating the business binding record of the tag and the target table identifier based on the second identification information.

9. The method according to claim 8, characterized in that, The graphic code and the near-field communication tag are respectively set in different areas on the surface of the NFC material; the preset mapping relationship includes a pre-configured association data table, which stores index key-value pairs of the first identification information and the second identification information that are physically located in the same NFC material; the server is configured to: in response to the binding request, query the association data table with the first identification information as the index key, and extract the corresponding second identification information to perform the binding.

10. An electronic device, comprising: processor; A memory for storing processor-executable instructions; wherein the processor is configured to perform the method as described in any one of claims 1 to 9.

Images