Page style switching method, electronic device, and storage medium

Abstract

The application discloses a page style switching method, an electronic device and a storage medium, and comprises the following steps: presetting a color style of a design webpage and defining an identifier for the color style, wherein the identifier is used for representing the color style of the webpage; detecting an update instruction, obtaining a user agent of a current page based on the update instruction, identifying a color style identifier of an object pointed by the update instruction through the object, updating the obtained user agent of the current page and sending a broadcast signal to the design webpage; detecting the identifier in the user agent in the broadcast signal after the design webpage receives the broadcast signal, and refreshing the current page according to the identifier. Through the setting of the identifier, the loading time when refreshing the color style in the design webpage can be eliminated, the design webpage can quickly obtain the identifier and refresh the color style, the application program can quickly switch the color style when the corresponding theme is applied, and seamless user experience is provided.

Description

Technical Field

[0001] This invention relates to the field of application page style switching technology, and in particular to a page style switching method, electronic device, and storage medium. Background Technology

[0002] H5 pages refer to web pages developed using HTML5 technology. HTML5 is a standardized markup language that provides new functionalities and semantic elements, enabling the creation of richer, more dynamic web content and applications. H5 pages typically offer better accessibility, interactivity, responsiveness, and mobile support.

[0003] When a native app implements custom theme colors, adapting the theme change to the H5 page presents a challenge. Current technology uses traditional communication methods to obtain the app's current theme and apply the correct styles to the H5 page, ensuring the H5 page refreshes and changes along with the app's current theme.

[0004] However, when using communication methods to obtain the app's current theme and then applying it to the H5 page, loading takes time, resulting in a latency issue. Therefore, the H5 page initially displays a default style and cannot change with the app's current theme, leading to a poor user experience. Summary of the Invention

[0005] The purpose of this invention is to provide a page style switching method, electronic device, and storage medium to solve the technical problem in the prior art where delays occur when using traditional communication methods to obtain the current theme of an App and apply the correct style to the designed webpage, resulting in the webpage not refreshing in time and a poor user experience.

[0006] To achieve one of the above-mentioned objectives, one embodiment of the present invention provides a page style switching method, the method comprising: pre-setting a color style based on a webpage design and defining an identifier for the color style, the identifier being used to characterize the color style of the page; detecting an update instruction; obtaining a user agent of the current page based on the update instruction; identifying the color style identifier of the object pointed to by the update instruction; updating the obtained user agent of the current page and sending a broadcast signal to the webpage design; the webpage design receiving the broadcast signal and detecting the identifier in the user agent within the broadcast signal, and refreshing the current page according to the identifier.

[0007] As a further improvement of the present invention, the method further includes: "pre-setting at least two color styles based on the design of the webpage and defining different identifiers for each color style" specifically includes: defining at least two theme modes, each theme mode corresponding to a different color style; defining different identifiers according to the number of theme modes; obtaining the user agent for each theme mode and inserting the corresponding identifier into a designated part of the user agent to modify and form a custom string.

[0008] As a further improvement of the present invention, the method further includes: the update instruction includes a pattern replacement instruction for the current page; "identifying the color style identifier of the object pointed to by the update instruction and updating the user agent of the current page obtained" includes: creating a webpage view and obtaining the user agent of the webpage view when initializing the current page, inserting a preset identifier into the user agent, the inserted preset identifier representing the initial color style of the current page; identifying the identifier of the corresponding color style based on the pattern replacement instruction and updating the identifier of the user agent of the current page, the pattern replacement instruction being used to represent replacing the color style of the current page.

[0009] As a further improvement of the present invention, the method further includes: the update instruction includes a page switching instruction; "identifying the color style identifier of the object pointed to by the update instruction and updating the user agent of the current page obtained by setting" includes: creating a web page view and obtaining the user agent of the web page view when initializing the page, inserting a preset identifier into the user agent, the inserted preset identifier representing the initial color style of the current page; identifying the object pointed to by the command based on the page switching instruction and updating the identifier of the current page user agent to the identifier of the object, the page switching instruction being used to indicate switching from the current page to a new page.

[0010] As a further improvement of the present invention, the method further includes: the update instruction includes a mode replacement instruction for the current page, and the refresh of the current page includes: based on the design webpage, pre-setting at least one page, pre-setting at least two color styles for the specified page, each color style having a different identifier; extracting the identifier from the user agent after the current page is updated and refreshing the design webpage with the color style corresponding to the identifier.

[0011] As a further improvement of the present invention, the method further includes: the update instruction includes a page switching instruction, and the refresh of the current page includes: based on the design webpage, pre-setting at least two pages, defining the initial color style of each page and assigning an identifier according to the color style; extracting the identifier from the user agent after the current page is updated; and according to the page switching instruction, switching the current page to the specified page in the design webpage and refreshing the specified page to the initial color style corresponding to the identifier.

[0012] As a further improvement of the present invention, the method further includes: determining the user agent: obtaining the user agent of the current page based on the update instruction; detecting a specified position of the user agent string to determine whether an identifier is included; if not, returning to obtain the user agent of the current page again and reporting an error; if so, extracting the identifier.

[0013] As a further improvement of the present invention, the method further includes: obtaining the identifier of the identified object based on the update instruction, updating and replacing the identifier extracted from the user agent on the current page, and forming a new user agent to send a broadcast.

[0014] The present invention also provides an electronic device, including a memory and a processor, the electronic device further including: a computer program stored in the memory that can run on the processor, wherein executing the program on the processor implements the steps in any of the above-described page style switching methods.

[0015] The present invention also provides a storage medium storing a computer program, which, when executed by a processor, implements the steps in any of the above-described page style switching methods.

[0016] Compared with the prior art, the present invention has the following beneficial effects: by setting an identifier, the loading time when refreshing color styles in the design webpage can be eliminated, the design webpage can quickly obtain the identifier and refresh the color style, ensuring that the application can quickly switch color styles when applying the corresponding theme, providing a seamless user experience. Attached Figure Description

[0017] Figure 1 This is a flowchart of a page style switching method according to an embodiment of the present invention.

[0018] Figure 2 This is a flowchart of a webpage refresh based on a pattern replacement instruction in one embodiment of the present invention.

[0019] Figure 3 This is a flowchart of a page-based switching command for refreshing a webpage according to one embodiment of the present invention. Detailed Implementation

[0020] The present invention will now be described in detail with reference to the specific embodiments shown in the accompanying drawings. However, these embodiments do not limit the present invention, and any structural, methodological, or functional modifications made by those skilled in the art based on these embodiments are included within the scope of protection of the present invention.

[0021] Please refer to the example below. Figure 1 As shown, in one embodiment of the present invention, a page style switching method is provided, which can be applied to H5 pages (web page design); however, the present invention is not limited to H5 pages. H5 pages are only one application of the present invention, and can also be used in other design platforms with similar development functions to H5 pages, according to the application development habits of those skilled in the art.

[0022] Methods for switching page styles include:

[0023] S1: Based on the preset color style of the webpage design, an identifier is defined for the color style, and the identifier is used to represent the color style of the page.

[0024] S2: Detect update command, obtain the user agent of the current page based on the update command, identify the color style identifier of the object pointed to by the update command, update the obtained user agent of the current page and send a broadcast signal to the designed webpage.

[0025] S3: After receiving the broadcast signal, the webpage detects the identifier in the user agent within the broadcast signal and refreshes the current page based on the identifier.

[0026] In this way, by setting an identifier, the loading time when refreshing color styles in the design webpage can be eliminated. The design webpage can quickly obtain the identifier and refresh the color style, ensuring that the application can quickly switch color styles when applying the corresponding theme, providing a seamless user experience.

[0027] In this context, the user agent is referred to as User Agent, or UA for short. UA is a special string header that enables the server to identify the client's operating system and version, CPU type, browser and version, browser rendering engine, browser language, browser plugins, etc.

[0028] The identifier is a label corresponding to the color style. By inserting the identifier at a specific position in the user agent string, the required color style can be quickly identified when identifying the user agent.

[0029] The broadcast signal can be understood as a command to refresh the style of the webpage (i.e., the H5 page). By using broadcast signals, the time consumed by traditional communication methods is avoided, resulting in a faster response.

[0030] In one embodiment of the present invention, "based on the design of a webpage, pre-setting at least two color styles and defining different identifiers for each color style" specifically includes:

[0031] Define at least two theme modes, each theme mode corresponding to a different color style;

[0032] Define different identifiers based on the number of theme patterns;

[0033] Obtain the user agent for each theme pattern and insert the corresponding identifier at a specified part of the user agent to modify and form a custom string.

[0034] The theme mode can include any two or three of the following: normal mode, dark mode, and mourning mode. It should be noted that each theme mode has a different color scheme. For example, normal mode uses light colors, dark mode uses black colors, and mourning mode uses gray colors. In this embodiment, the theme mode can be changed independently, and the color scheme can also be changed as needed.

[0035] Define different identifiers, such as inserting the identifier qcc_theme_1 into the user agent of the page to represent normal mode, inserting the identifier qcc_theme_2 into the user agent of the page to represent dark mode, and inserting the identifier qcc_theme_3 into the user agent of the page to represent mourning mode.

[0036] Each page has an initial color style, and the color style of the current page can be changed by switching themes; multiple pages can also be set, each with an initial color style, and the color style can be changed by switching from the current page to other pages through the page switching command.

[0037] Please refer to the example below. Figure 2 As shown, in one embodiment of the present invention, the update instruction includes a pattern replacement instruction for the current page; "updating the user agent of the current page obtained by identifying the color style identifier of the object pointed to by the update instruction" includes:

[0038] When initializing the current page, a webpage view is created and the user agent of the webpage view is obtained. A preset identifier is inserted into the user agent, and the inserted preset identifier represents the initial color style of the current page.

[0039] The identifier of the corresponding color style is identified based on the pattern replacement instruction, and the identifier of the current page user agent is updated. The pattern replacement instruction is used to represent the replacement of the color style of the current page.

[0040] Thus, based on the mode replacement instruction, the color style of the current page can be changed within the current page, such as switching from normal mode to dark mode. By modifying the user agent of the current page, the design webpage (i.e., H5 page) can directly obtain the user agent and quickly identify the identifier, thereby immediately refreshing the color style, so that the current page can directly respond to the change, thus making the switching speed faster.

[0041] Furthermore, refreshing the current page includes:

[0042] Based on the design of the webpage, at least one page is preset, and at least two color styles are preset for the specified page, with each color style having a different identifier;

[0043] Extract the identifier from the updated user agent on the current page and refresh the webpage with the color style corresponding to the identifier.

[0044] For example, the current page contains three theme modes: normal mode, dark mode, and mourning mode. Each theme mode is represented by an identifier that represents a color scheme. The original user agent of the current page is retrieved via a mode replacement instruction, and the identifier in the user agent is modified to match the desired color scheme. This updated user agent is broadcast to the design webpage, which recognizes the identifier and refreshes.

[0045] Based on the above solution, it can be applied to every page, allowing each page to quickly switch theme modes and avoid lag or delay.

[0046] Please refer to the example below. Figure 3 As shown, in one embodiment of the present invention, the update instruction includes a page switching instruction; "updating the user agent of the current page obtained by identifying the color style identifier of the object pointed to by the update instruction" includes:

[0047] When initializing the page, a web page view is created and the user agent of the web page view is obtained. A preset identifier is inserted into the user agent, and the inserted preset identifier represents the initial color style of the current page.

[0048] The page switching instruction identifies the object referred to by the command and updates the identifier of the current page user agent to the identifier of the object. The page switching instruction is used to indicate switching from the current page to a new page.

[0049] In this way, based on the page switching command, you can switch to other pages within the current page, such as switching from the first page to the second page. By modifying the user agent of the current page, the design webpage (i.e., H5 page) can directly obtain the user agent and quickly identify the identifier, so that the color style of the second page can be refreshed immediately after the page is switched, preventing the second page color refresh delay.

[0050] The phrase "create a webpage view and obtain the user agent of the webpage view when initializing the page, and insert a preset identifier into the user agent" can be understood as follows: each page is preset with an initial color style when it is created, that is, the identifier is marked in the user agent, so that the page can quickly display its initial color style when the application is opened.

[0051] Furthermore, the update instruction includes a page switching instruction, and refreshing the current page includes:

[0052] Based on the design of the webpage, there are at least two pages. The initial color style of each page is defined and an identifier is assigned according to the color style.

[0053] Extract the identifier from the user agent after the current page is updated;

[0054] Based on the page switching instruction, the current page is switched to the specified page in the webpage design, and the specified page is refreshed to the initial color style corresponding to the identifier.

[0055] Page switching instructions are used to indicate switching from the current page to a new page. It's important to note that the current page may have its initial color scheme, or it may have changed to a different color scheme after a mode replacement instruction. The new page will retain its initial color scheme. Page switching instructions switch from the current page to the new page, and the color scheme changes accordingly, such as switching from dark mode to normal mode. This is achieved by retrieving the identifier from the user agent of the current page, replacing it with the identifier represented by the initial color scheme of the new page, and then broadcasting the message. The webpage designer then reads the identifier from the user agent and refreshes the page, simultaneously updating the color scheme.

[0056] This allows the initial color and style of a new page to be displayed quickly upon switching to it, ensuring faster page switching efficiency, better smoothness, and a better user experience.

[0057] In one embodiment of the present invention, the determination of the user agent is also included:

[0058] The user agent for the current page is obtained based on the update instruction;

[0059] The system detects a specified position in the user agent string to determine if it contains an identifier. If not, it returns to retrieve the user agent for the current page and reports an error. If it does contain an identifier, it extracts the identifier.

[0060] By evaluating the program, we can enhance its operation, further reduce the error rate of the application when switching color styles, and improve its stability.

[0061] Furthermore, based on the update instruction, the identifier of the identified object is obtained, the identifier extracted from the user agent on the current page is updated and replaced, and a new user agent is formed to send the broadcast.

[0062] In one embodiment of the present invention, an electronic device is provided, including a memory and a processor, wherein when the computer program is executed by the processor, it implements the steps in the page style switching method described in any of the above embodiments.

[0063] In one embodiment of the present invention, a storage medium is provided, which stores a computer program. When the computer program is executed by a processor, it implements the steps in the page style switching method described in any of the above embodiments.

[0064] In summary, this invention mainly employs a method of modifying the user agent, inserting an identifier that represents the color style, obtaining the original user agent of the page based on a command, and then modifying the identifier in the user agent through a program so that the identifier can represent the color style that the current page is about to refresh. This is then broadcast to the design webpage (i.e., the H5 page), which then obtains the identifier in the user agent to refresh the color style.

[0065] The above solution, by inserting identifiers, allows web pages to quickly retrieve identifiers and refresh color styles according to preset correspondences. This saves loading time required for communication and transmission, resulting in faster page refresh speeds, smoother performance, and a better user experience.

[0066] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems and modules described above can be referred to the corresponding processes in the aforementioned method implementations, and will not be repeated here.

[0067] In the several embodiments provided in this application, it should be understood that the disclosed systems, methods, and approaches can be implemented in other ways. For example, the system implementations described above are merely illustrative. For instance, the division of modules is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple modules or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the shown or discussed mutual couplings, direct couplings, or communication connections may be through some interfaces; indirect couplings or communication connections between systems or modules may be electrical, mechanical, or other forms. The modules described as separate components may or may not be physically separate. The components shown as modules may or may not be physical modules, i.e., they may be located in one place or distributed across multiple network modules. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0068] Furthermore, the functional modules in the various embodiments of this application can be integrated into one processing module, or each module can exist physically separately, or two or more modules can be integrated into one module. The integrated module can be implemented in hardware or in a combination of hardware and software functional modules. The integrated module implemented as a software functional module can be stored in a computer-readable storage medium. This software functional module, stored in a storage medium, includes several instructions to cause a computer system (which may be a personal computer, server, or network system, etc.) or processor to execute some steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, a portable hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0069] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application.

Claims

1. A method for switching page styles, characterized in that, Applicable to systems that include native applications and web design, including: The native application is based on the design of the webpage and presets at least two color styles and defines different identifiers for each color style. The identifiers are used to represent the color style of the page. The native application detects the update command, obtains the user agent of the current page based on the update command, identifies the color style identifier corresponding to the object pointed to by the update command, updates the identifier in the obtained user agent of the current page to the identified color style identifier, and sends a broadcast signal to the designed webpage. After receiving the broadcast signal, the webpage detects the identifier in the updated user agent corresponding to the broadcast signal, matches the corresponding color style according to the detected identifier, and refreshes the current page.

2. The page style switching method according to claim 1, characterized in that, "Based on the design of the webpage, at least two color styles are preset, and different identifiers are defined for each color style" specifically includes: Define at least two theme modes, each theme mode corresponding to a different color style; Define different identifiers based on the number of theme patterns; Obtain the user agent for each theme pattern and insert the corresponding identifier at a specified part of the user agent to modify and form a custom string.

3. The page style switching method according to claim 1, characterized in that, The update instruction includes a pattern replacement instruction for the current page; "identifying the color style identifier corresponding to the object pointed to by the update instruction, and updating the identifier in the user agent of the current page obtained to the identified color style identifier" includes: When initializing the current page, a web page view is created and the user agent of the web page view is obtained. A preset identifier is inserted into the user agent, and the inserted preset identifier represents the initial color style of the current page. The identifier of the corresponding color style is identified based on the pattern replacement instruction, and the identifier of the current page user agent is updated. The pattern replacement instruction is used to represent the replacement of the color style of the current page.

4. The page style switching method according to claim 1, characterized in that, The update instruction includes a page switching instruction; "identifying the color style identifier corresponding to the object pointed to by the update instruction, and updating the identifier in the user agent of the current page obtained to the identified color style identifier" includes: When initializing the page, a web page view is created and the user agent of the web page view is obtained. A preset identifier is inserted into the user agent, and the inserted preset identifier represents the initial color style of the current page. The page switching instruction identifies the object referred to by the command and updates the identifier of the current page user agent to the identifier of the object. The page switching instruction is used to indicate switching from the current page to a new page.

5. The page style switching method according to claim 3, characterized in that, The update instruction includes a mode replacement instruction for the current page, and refreshing the current page includes: Based on the design of the webpage, at least one page is preset, and at least two color styles are preset for the specified page, with each color style having a different identifier; Extract the identifier from the updated user agent on the current page and refresh the webpage with the color style corresponding to the identifier.

6. The page style switching method according to claim 4, characterized in that, The update instruction includes a page switching instruction, and refreshing the current page includes: Based on the design of the webpage, there are at least two pages. The initial color style of each page is defined and an identifier is assigned according to the color style. Extract the identifier from the user agent after the current page is updated; Based on the page switching instruction, the current page is switched to the specified page in the webpage design, and the specified page is refreshed to the initial color style corresponding to the identifier.

7. The page style switching method according to claim 1, characterized in that, This also includes the determination of user agents: The user agent for the current page is obtained based on the update instruction; The system detects a specified position in the user agent string to determine if it includes an identifier. If not, it returns to retrieve the user agent for the current page and reports an error. If so, extract the identifier.

8. The page style switching method according to claim 7, characterized in that, Based on the update instruction, the identifier of the identified object is obtained, the identifier extracted from the user agent on the current page is updated and replaced, and a new user agent is formed to send the broadcast.

9. An electronic device, comprising a memory and a processor, characterized in that, The memory stores a computer program that can run on the processor, and when the program is executed on the processor, it implements the steps of the page style switching method as described in any one of claims 1 to 8.

10. A storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the steps of the page style switching method according to any one of claims 1 to 8.

Images