Dynamic resurfacing method and electronic device

Abstract

This application provides a dynamic skin-changing method and an electronic device. The method includes: responding to the startup of the target program, obtaining and loading an initial skin resource package from the server, responding to the user's skin-changing operation, obtaining the identifier of the target skin, obtaining the target skin resource package of the target skin from the server based on the identifier of the target skin, loading the target skin resource package, and displaying the target skin on the client. This application avoids occupying the limited space of the target program's main package by uploading the skin resources to the server, greatly reducing the review and loading speed of the target program. Furthermore, by uploading the skin resource package to the server, new skins can be dynamically launched without the need for a new version, meeting the needs of dynamic adjustment.

Description

Technical Field

[0001] This application relates to the field of dynamic skinning technology, and more specifically, to a dynamic skinning method and an electronic device. Background Technology

[0002] In today's rapidly developing digital economy, users are demanding higher levels of personalized experience and performance from applications. For example, WeChat Mini Programs, with their lightweight advantage of requiring no download or installation, have become a crucial platform connecting users and services. Developers can use the UniApp framework to develop WeChat Mini Programs. In UniApp-based WeChat Mini Program development practices, theme customization is a key method for enhancing the personalized user experience.

[0003] In existing technologies, theme customization can be achieved in the following ways: theme resources are managed by using static packaging, and all resources such as styles and images related to multiple skins are built into the main package of the mini program, and theme switching is achieved through preset code.

[0004] However, static packaging means that adding or modifying a theme requires recoding and releasing a new version of the mini-program, making it unresponsive to dynamic adjustments needed by operations teams and extremely inflexible. Furthermore, all skin resources occupy the limited space of the main package, easily reaching or exceeding the WeChat mini-program's maximum main package size, causing the mini-program to fail review or load slowly, severely impacting user experience. Summary of the Invention

[0005] The purpose of this application is to provide a dynamic skinning method and electronic device to address the shortcomings of the prior art, thereby solving the problems of poor flexibility and excessive main package space usage in the prior art.

[0006] To achieve the above objectives, the technical solution adopted in this application is as follows: In a first aspect, this application provides a dynamic skinning method, which is applied to a client in a target software system, the target software system including the client and a server, and the method includes: In response to the startup of the target program, an initial skin resource package is obtained from the server and loaded. The initial skin resource package includes: a default skin resource package or a skin resource package loaded after the target program was last started. Respond to the user's skin-changing request and obtain the target skin's identifier; Based on the identifier of the target skin, obtain the target skin resource package from the server; Load the target skin resource package to render the target skin on the client.

[0007] Optionally, before the client responds to the user's skin-changing operation and obtains the identifier of the target skin, it further includes: The skin resource pack configuration information is obtained from the server. The skin resource pack configuration information includes: the identifier of each skin resource pack and the storage address of each skin resource pack on the server. The skin resource pack configuration information is stored on the client.

[0008] Optionally, obtaining the target skin resource package from the server based on the identifier of the target skin includes: Based on the identifier of the target skin, the target interface of the server is invoked to obtain the target skin resource package of the target skin from the storage address corresponding to the target skin through the target interface.

[0009] Optionally, loading the target skin resource package includes: The style and image corresponding to the target skin are obtained by parsing the target skin resource package; Inject the style and image corresponding to the target skin into the target program.

[0010] Optionally, after loading the target skin resource package, the method further includes: The target skin resource pack is stored on the client.

[0011] Optionally, the process of generating the target skin resource package includes: Retrieve skin resource data of the target skin designed by the user according to the interface design specifications from the preset resource directory. The skin resource data includes: multiple static resource data and multiple resource mapping files. The target program is tested based on the skin resource data. After the test is passed, in response to the user-triggered packaging command, the skin resource data under the preset resource directory is packaged to generate the target skin resource package; Upload the target skin resource package to the target path on the server.

[0012] Optionally, after uploading the target skin resource package to the target path on the server, the method further includes: Responding to a test command triggered by a user, the test command includes the target path of the skin resource package to be tested on the server; According to the preset path mapping rules, the target path of the skin resource package to be tested is mapped to the path to be tested in the preset resource directory; Based on the test path in the preset resource directory, obtain the skin resource package to be tested, and perform testing based on the test resource.

[0013] Optionally, before testing the target program based on the skin resource data, the method further includes: Based on the skin resource data, static resource file information, static resource target documents, and new interface design specifications are generated. The static resource file information includes the path mapping relationship between each static resource data and each resource mapping file in the preset resource directory. The static resource target document is used to record the hierarchical relationship of each static resource data and resource mapping file stored in the preset resource directory. The interface design specifications include interface elements, interaction logic, and layout rules.

[0014] Optionally, the method further includes: Obtain the target interface design specifications and convert them into a new resource mapping file; Obtain the target resource mapping file and convert it into a new target interface design specification.

[0015] Secondly, this application provides an electronic device, including: a processor, a storage medium, and a bus, wherein the storage medium stores machine-readable instructions executable by the processor, and when the electronic device is running, the processor communicates with the storage medium via the bus, and the processor executes the machine-readable instructions to perform the steps of the dynamic skinning method described above.

[0016] Thirdly, this application provides a target software system, which includes a client and a server, wherein the client is used to execute the dynamic skinning method as described in the first aspect.

[0017] Fourthly, this application provides a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the steps of the dynamic skinning method described above.

[0018] The beneficial effects of this application are as follows: Upon responding to the startup of the target program, an initial skin resource package is obtained and loaded from the server. In response to the user's skin-changing operation, the identifier of the target skin is obtained. Based on the identifier, the target skin resource package is obtained from the server and loaded to present the target skin on the client. In this embodiment, the skin resource package is uploaded to the server. When the target program runs, the server obtains the skin resource package, eliminating the need for the main package of the target program to store skin resources, saving significant space and ensuring fast startup and smooth operation of the target program, thus improving the user experience. Furthermore, since the skin resource packages are cached on the server, hot updates of skins can be achieved through the server, allowing for dynamic updates of new skin themes without requiring a new release, significantly improving business responsiveness. Attached Figure Description

[0019] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 This is a schematic diagram of a scenario for a dynamic skinning method provided in an embodiment of this application; Figure 2 This is a flowchart illustrating a dynamic skinning method provided in an embodiment of this application; Figure 3 This is a flowchart illustrating the generation process of the target skin resource package provided in this application embodiment; Figure 4 This is a schematic diagram of a test process provided in an embodiment of this application; Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0021] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. It should be understood that the accompanying drawings in this application are for illustrative and descriptive purposes only and are not intended to limit the scope of protection of this application. Furthermore, it should be understood that the schematic drawings are not drawn to scale. The flowcharts used in this application illustrate operations implemented according to some embodiments of this application. It should be understood that the operations in the flowcharts may not be implemented in sequence, and steps without logical contextual relationships may be reversed or implemented simultaneously. In addition, those skilled in the art, guided by the content of this application, may add one or more other operations to the flowcharts, or remove one or more operations from the flowcharts.

[0022] Furthermore, the described embodiments are merely some, not all, of the embodiments of this application. The components of the embodiments of this application described and illustrated herein can typically be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0023] It should be noted that the term "comprising" will be used in the embodiments of this application to indicate the presence of the features declared thereafter, but does not exclude the addition of other features.

[0024] In existing technologies, the static packaging method for theme resource management cannot respond to the dynamic adjustment needs of the operation side, resulting in extremely poor flexibility. Furthermore, skin resources occupy limited space in the main package, which can easily lead to the target program failing to pass the review or loading slowly, thus affecting the user experience.

[0025] Based on this, this application provides a dynamic skinning method. The method includes: during the target program development phase, acquiring multiple skin resource data designed by the user in a preset resource directory; then packaging each skin resource data into a skin resource package and uploading it to the server; after the target program starts, the server obtains the target skin resource package and loads it, so that the target skin appears on the client. This application avoids occupying the limited space of the target program's main package by packaging and uploading skin resources to the server, greatly reducing the review and loading speed of the target program. Furthermore, uploading the skin resource package to the server allows for dynamic deployment of new themes without the need for a new release, meeting the dynamic adjustment needs of the operations team.

[0026] Next, refer to Figure 1 This section introduces the scenarios for dynamic skinning methods. Among them, Figure 1 This is a schematic diagram of a dynamic skinning method provided in an embodiment of this application.

[0027] like Figure 1 As shown, the dynamic skinning method is applied to the client side of the target software system, which includes both a client and a server. The client can be deployed on an electronic device; specifically, it can be deployed on an electronic device running the target program or on the electronic device generating the target skin resource package. The target program could be, for example, a WeChat mini-program. The server can be deployed on a cloud server.

[0028] Next, refer to Figure 2 This section introduces the dynamic skin-skinning method. Among other things, Figure 2 This is a flowchart illustrating a dynamic skinning method provided in an embodiment of this application.

[0029] S201. In response to the startup of the target program, obtain and load the initial skin resource package from the server. The initial skin resource package includes: the default skin resource package or the skin resource package loaded after the target program was last started.

[0030] The default skin resource pack is the basic skin preset by the target program at the factory, ensuring that the default style is available when the user opens the program for the first time.

[0031] The skin resource package loaded after the last launch is: if the user has switched skins before, the target program will record the skin information and load the skin directly in this launch to maintain the continuity of user operation.

[0032] Specifically, upon the first launch of the program, since the client has no local skin identifier, the default skin identifier is automatically used as the request parameter. Subsequent launches retrieve the previously stored skin identifier from the local cache to ensure request accuracy. The request is then sent to the server. Upon receiving the request, the server first verifies the validity of the skin identifier. If invalid, it returns the default skin resource package; if valid, it directly returns the download address of the corresponding resource package, such as a Content Delivery Network (CDN) address. The client then downloads and loads the corresponding skin resource package based on the download address.

[0033] Optionally, after loading, the client will parse the styles and images corresponding to the target skin in the resource package, quickly render the interface of the corresponding skin, and complete the initial display at startup. The style files corresponding to the target skin may include Cascading Style Sheets (CSS) and theme color variables, while the images are static resources, including various images and icons.

[0034] S202. Respond to the user's skin-changing operation and obtain the identifier of the target skin.

[0035] Optionally, the skin-changing entry point on the client interface will be pre-associated with a skin identifier. When a user actively triggers a skin-changing operation in the target program, the client will listen to this operation and use the skin identifier associated with the skin-changing entry point corresponding to the user-triggered skin-changing operation as the identifier of the target skin.

[0036] S203. Based on the identifier of the target skin, obtain the target skin resource package from the server.

[0037] Optionally, the server can adopt a three-tier architecture consisting of a main service, object storage, and CDN. The main service handles request logic, object storage stores skin package resources, and the CDN is responsible for resource distribution.

[0038] As an optional implementation, when the client sends a request including the identifier of the target skin, the server can first verify the user's permissions, then query the mapping table based on the identifier, and return the CDN address, so that the client can obtain the target skin resource of the target skin from the server based on the CDN address.

[0039] S204. Load the target skin resource package to display the target skin on the client.

[0040] As an optional implementation, after the client downloads the target skin resource package, it first verifies its integrity using the verification value returned by the server to prevent resource corruption. After successful verification, the package is decompressed, and resource mapping files and static resource data are extracted. Image resources are then cached in a local temporary directory. The resource mapping files include CSS files and theme color variable configuration information, among other things.

[0041] Inject the skin's resource mapping files and static resource data into the global style so that the target skin is displayed on the client side.

[0042] In this embodiment, upon responding to the target program's startup, an initial skin resource package is retrieved and loaded from the server. In response to the user's skin-changing operation, the target skin's identifier is obtained. Based on the identifier, the target skin resource package is retrieved from the server and loaded to display the target skin on the client. This embodiment uploads the skin resource package to the server. When the target program runs, the server retrieves the skin resource package, eliminating the need for the target program's main package to store skin resources, saving significant space and ensuring fast startup and smooth operation, thus improving user experience. Furthermore, since the skin resource packages are cached on the server, hot updates of skins can be achieved through the server, allowing for dynamic updates of new skin themes without requiring a new release, significantly improving business responsiveness.

[0043] As an optional implementation, before the client responds to the user's skin-changing operation and obtains the identifier of the target skin, the following steps can also be performed: Optionally, skin resource pack configuration information can be obtained from the server. The skin resource pack configuration information includes: the identifier of each skin resource pack and the storage address of each skin resource pack on the server.

[0044] The storage address of each skin resource package on the server can be the CDN link of that skin, and the client can download the skin resource package based on that storage address.

[0045] Optionally, skin resource pack configuration information can be stored on the client.

[0046] As an optional implementation, when the target application starts, the Vue framework, based on the Universal Application (uni-app) framework, uses Vuex, a global state management tool, to collect and store all skin resource package configuration information and CSS style rules into the Vuex global state. This ensures that any page or component within the application can directly read this information without repeated storage or transmission. Furthermore, the style rules and configuration information of each skin are bound to the target application's UI rendering logic, so that updating the corresponding state values ​​via Vuex automatically updates the styles of all associated UI elements.

[0047] In this embodiment, the efficiency of dynamic skin changing is improved by obtaining skin resource package configuration information from the server in advance.

[0048] Optionally, obtaining the target skin resource package of the target skin from the server in step S203 can be achieved in the following way: based on the identifier of the target skin, call the target interface of the server to obtain the target skin resource package of the target skin from the storage address corresponding to the target skin through the target interface.

[0049] Optionally, the client determines the storage address of the skin resource package on the server based on the skin resource package configuration information and the identifier of the target skin, and then calls the target interface on the server to retrieve the target skin resource package of the target skin from the storage address.

[0050] In this embodiment, the target skin resource package is obtained by calling the target interface of the server, thereby ensuring the accuracy of resource acquisition.

[0051] Optionally, the loading of the target skin resource package in step S204 above can be implemented as follows: Optionally, the style and image corresponding to the target skin can be obtained by parsing from the target skin resource package.

[0052] The styles corresponding to the target skin can be CSS files and resource mapping files, such as rules for button colors and background colors. Images can be skin-specific button icons, background images, decorative elements, etc.

[0053] Specifically, the target skin resource package can be a compressed file, which the client can decompress to obtain the style and images corresponding to the target skin.

[0054] Optionally, the style and image corresponding to the target skin can be injected into the target program.

[0055] Optionally, the client writes the rules from the parsed styles into the application's global style system. Specifically, for resource mapping files, by dynamically modifying the variable value of the application's root element, all buttons, text, etc., that reference that variable will automatically change color synchronously. For specific CSS files, by creating type tags and inserting them into the page header, the original styles are overridden using CSS cascading priority.

[0056] Optionally, the client caches the parsed image to a local temporary directory, then finds the component in the target application that needs the image replaced, and modifies the image path from the original skin's image path to the target skin's local cache path.

[0057] Optionally, dynamic skinning can be achieved by parsing the target skin resource package and injecting the parsed target skin's corresponding style and image into the target program.

[0058] As an optional implementation, after loading the target skin resource pack, the following steps can also be performed: store the target skin resource pack on the client.

[0059] Optionally, after loading the target skin resource package, to ensure that it doesn't need to be downloaded from the server again the next time the skin is used, but can be read directly from the local storage, thus improving skin-changing speed, the target skin resource package can be stored on the client. Furthermore, the skin resource package configuration information can be updated to ensure that the identifier of the target skin's resource package corresponds to the local storage address.

[0060] As an optional implementation, when the target application is launched for the first time, the `onLaunch` method is executed. Specifically, this initializes the skin state in Vuex, such as setting a default skin resource package, calling the server-side interface to obtain the latest skin resource package configuration information and storing it locally on the client, or reading the skin resource package loaded after the last launch from the local cache to prepare for loading the initial skin later. When the target application is switched from the background to the foreground, or after executing `onLaunch`, `onShow` is executed. Specifically, if the skin resource package configuration information has been updated, the latest configuration is automatically downloaded from the server, and a skin update command pushed by the server is received, triggering the skin-changing process. The skin update command is triggered when the operation side forcibly pushes a skin. After Vuex receives the skin update command from the server, it automatically updates the style of the interface elements based on the new style and images according to the preset event handling logic, achieving a dynamic effect of immediate skin color switching without restarting the application.

[0061] Next, refer to Figure 3 This paper introduces the process of generating the target skin resource package in the dynamic skin-swapping method. Specifically, Figure 3This is a flowchart illustrating the process of generating the target skin resource package according to an embodiment of this application. It is worth noting that the process of generating the target skin resource package and the processes executed in steps S201-S204 can be applied to different electronic devices.

[0062] S301. Obtain the skin resource data of the target skin designed by the user according to the interface design specifications from the preset resource directory. The skin resource data includes: multiple static resource data and multiple resource mapping files.

[0063] The preset resource directory can be a local folder path pre-defined by the development team, such as / static / skins / , used to uniformly store all resources for a certain skin, such as / static / skins / dark / theme.css, avoiding management chaos caused by scattered files. It is worth noting that the preset resource directory can be the directory used in the development of the target program in the prior art, and no adjustment to design habits is required when executing the method of this embodiment.

[0064] Interface design guidelines are standards for skin development established by user interface (UI) designers. For example, button icons must be 48×48px in size to ensure that the resource structure of different skins is consistent.

[0065] Skin resource data can include multiple static resource data sets and multiple resource mapping files. The static resource data can be visual files such as images and icons, while the resource mapping files can be configuration files that associate static resources with client-side UI elements, and can be in JSON format. For example, the client can use the static module bundling tool Webpack to package the developer's design content into skin resource data.

[0066] Optionally, after completing the skin design according to the interface design specifications, the designer places all static resource data and resource mapping files into a preset resource directory. The development team can automatically scan this directory, read and verify the integrity of the resources, providing standardized input for subsequent steps. The development tool could be, for example, a UniApp IDE plugin. S302. Test the target program based on skin resource data.

[0067] Optionally, resource integrity testing, visual consistency testing, compatibility testing, and functional conflict testing can be performed on the skin resource data.

[0068] Specifically, the development tool provides a skin preview function, which temporarily injects skin resources from a preset resource directory into the target program's test environment. Developers / testers check the above indicators through simulated operations. If problems are found, they are reported to the UI designer for modification. The UI designer designs a new interface design specification, and the developers continue to use the target skin's skin resource data based on the new interface design specification until the test is passed.

[0069] S303. After the test is passed, respond to the user-triggered packaging command, package the skin resource data in the preset resource directory, and generate the target skin resource package.

[0070] Optionally, developers can trigger a packaging command through development tools, and the client will package the skin resource data in a preset resource directory to generate the target skin resource package. The packaging command can be either a user command for uploading the target program or a command for uploading the skin resource package.

[0071] S304. Upload the target skin resource package to the target path on the server.

[0072] Specifically, the server presets a storage address for skin resources, which can be associated with a skin identifier, making it easy for the server to find resources according to the identifier.

[0073] It's worth noting that the development tools can automatically upload the target skin resource package to the target path via the upload interface provided by the server, without requiring manual operation. These development tools can be, for example, Object Storage Service (OSS), Software Development Kit (SDK), Continuous Integration (CI) tools, and Continuous Deployment (CD) tools.

[0074] After the upload is complete, the server automatically updates the skin resource configuration library, recording key information such as the identifier of the resource package, so that the client can find the corresponding resource package address by using the identifier when making a request.

[0075] In this embodiment, skin resource data of the target skin designed by the user according to the interface design specifications is obtained from a preset resource directory. Based on the skin resource data, the target program is tested. After the test passes, in response to the user-triggered packaging command, the skin resource data in the preset resource directory is packaged to generate a target skin resource package, which is then uploaded to the target path on the server. In this embodiment, developers can perform development and design within the preset resource directory without changing their original development habits, improving the developer experience. Furthermore, uploading the skin resource package to the server helps optimize the size of the target program.

[0076] As an optional implementation method, refer to Figure 4 Following step S304 above, that is, after uploading the target skin resource package to the target path on the server, the following steps can also be performed. Among them, Figure 4 This is a schematic diagram of a test process provided in an embodiment of this application.

[0077] S401, Respond to the test command triggered by the user. The test command includes the target path of the skin resource package to be tested on the server.

[0078] Specifically, developers / testers initiate a test operation through the development tools, which generates a test command. The target path of the skin resource package to be tested on the server is the address where the skin resource package is stored after being uploaded to the server. For example, the target path could be / server-resources / skins / new-year-v1.zip.

[0079] Optionally, conditional compilation can be used to distinguish between the development and production environments. If it is a production environment, then step S402 and subsequent steps can be executed.

[0080] S402. According to the preset path mapping rules, map the target path of the skin resource package to be tested to the test path in the preset resource directory.

[0081] Optionally, a local proxy server in the client (such as webpack-dev-server) can invoke predefined path mapping rules to transform the target path. Path mapping rules are a set of predefined transformation logic that maps remote paths to local addresses. For example, the rule might be set to: the server path / server-resources / skins / corresponds to the local path / local-static / skins-test / .

[0082] This step is used to convert the server's resource address into a locally accessible address through path mapping rules, allowing the local development environment to simulate the process of accessing server resources by directly accessing the local directory, thus solving the problem of low testing efficiency when directly accessing server resources.

[0083] S403. Based on the test path in the preset resource directory, obtain the skin resource package to be tested, and perform the test based on the test resource.

[0084] Optionally, after completing the path mapping, the client will read the skin resource package from the test path in the local preset resource directory. The resource package read at this time is essentially a local copy of the resources corresponding to the target path on the server. Subsequently, the client will perform tests based on these local resources: for example, parsing the skin package and injecting it into the target program, checking whether the styles work correctly, whether the images load completely, and whether there are any conflicts with other functions. Because the local path and the server path are logically consistent through mapping rules, the test results can truly reflect the actual effect of the skin package in the production environment.

[0085] In this embodiment, by following the preset path mapping rules, the target path of the skin resource package to be tested is mapped to the path to be tested in the preset resource directory, thereby realizing the process of testing server resources in the local environment and improving the efficiency and accuracy of skin resource testing before going online.

[0086] As an optional implementation, before step S302 above, that is, before testing the target program based on skin resource data, the following steps may also be performed.

[0087] Optionally, based on the skin resource data, static resource file information, static resource target documents, and new interface design specifications are generated. The static resource file information includes the path mapping relationship between each static resource data and each resource mapping file in the preset resource directory. The static resource target document is used to record the hierarchical relationship of each static resource data and resource mapping file stored in the preset resource directory. The interface design specifications include interface elements, interaction logic, and layout rules.

[0088] Optionally, static resource file information, static resource target documents, and new interface design specifications are generated to transform the scattered skin resource data designed by developers into structured information and unified design standards that can be recognized by the development and testing processes.

[0089] Specifically, static resource file information is used to record the specific paths of each static resource data and resource mapping file in the preset resource directory, forming a mapping relationship table between resource identifiers and storage paths.

[0090] The static resource target document records the hierarchical storage structure of all static resources and resource mapping files in the preset resource directory, i.e., the folder nesting relationship.

[0091] During development, the UI design guidelines generated by the UI designer may be modified to obtain new UI design guidelines.

[0092] It is worth noting that the static resource file information, static resource target documents, and new interface design specifications are updated in real time during the development process. When developers need to design a new skin, they can develop and design based on the latest static resource file information, static resource target documents, and new interface design specifications to improve development efficiency.

[0093] As an alternative implementation, if the test fails, the new interface design specifications can be fed back to the UI designer so that the UI designer can further optimize the design based on the new interface design specifications.

[0094] In this embodiment, static resource file information, static resource target documents, and new interface design specifications are generated based on skin resource data, thereby improving development and testing efficiency.

[0095] This embodiment also provides two file mapping methods for the development phase: As an optional implementation, the target interface design specification is obtained and converted into a new resource mapping file.

[0096] As another optional implementation, the target resource mapping file is obtained and converted into a new target interface design specification.

[0097] The target interface design specifications and target resource mapping files can be updated interface design specifications or resource mapping files by UI designers or developers.

[0098] Optionally, in this embodiment, the abstract target interface design specifications can be converted into resource mapping files that developers can use directly based on the webpack plugin script, and the differences in styles between skins can be unified, thus solving the file connection problem between UI designers and developers.

[0099] In this embodiment, the differences between themes are reduced by converting the target interface design specifications and resource mapping files to each other.

[0100] This application also provides an electronic device, such as... Figure 5The diagram shown is a structural schematic of an electronic device provided in an embodiment of this application, including a processor 501, a memory 502, and a bus. The memory 502 stores machine-readable instructions executable by the processor 501. When the computer device is running, the processor 501 and the memory 502 communicate via the bus, and the processor 501 executes the machine-readable instructions to perform the aforementioned dynamic skinning method.

[0101] This application also provides a computer-readable storage medium storing a computer program, which, when run by a processor, executes the steps of the above-described dynamic skinning method.

[0102] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems and devices described above can be referred to the corresponding processes in the method embodiments, and will not be repeated here. In the several embodiments provided in this application, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of modules is only a logical functional division, and in actual implementation, there may be other division methods. Furthermore, multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed mutual coupling or direct coupling or communication connection can be through some communication interfaces; the indirect coupling or communication connection of devices or modules can be electrical, mechanical, or other forms.

[0103] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. If the functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this invention. The aforementioned storage medium includes: USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, optical disks, and other media capable of storing program code.

[0104] The above are merely specific embodiments of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application.

Claims

1. A dynamic skin-swapping method, characterized in that, The method is applied to a client in a target software system, the target software system including the client and a server, and the method includes: In response to the startup of the target program, an initial skin resource package is obtained from the server and loaded. The initial skin resource package includes: a default skin resource package or a skin resource package loaded after the target program was last started. Respond to the user's skin-changing request and obtain the target skin's identifier; Based on the identifier of the target skin, obtain the target skin resource package from the server; Load the target skin resource package to render the target skin on the client.

2. The dynamic skin-skinning method according to claim 1, characterized in that, Before the client responds to the user's skin-changing operation and obtains the identifier of the target skin, it also includes: The skin resource pack configuration information is obtained from the server. The skin resource pack configuration information includes: the identifier of each skin resource pack and the storage address of each skin resource pack on the server. The skin resource pack configuration information is stored on the client.

3. The dynamic skin-skinning method according to claim 2, characterized in that, The step of obtaining the target skin resource package from the server based on the identifier of the target skin includes: Based on the identifier of the target skin, the target interface of the server is invoked to obtain the target skin resource package of the target skin from the storage address corresponding to the target skin through the target interface.

4. The dynamic skin-skinning method according to claim 1, characterized in that, Loading the target skin resource package includes: The style and image corresponding to the target skin are obtained by parsing the target skin resource package; Inject the style and image corresponding to the target skin into the target program.

5. The dynamic skin-skinning method according to claim 1, characterized in that, After loading the target skin resource package, the process also includes: The target skin resource pack is stored on the client.

6. The dynamic skin-skinning method according to any one of claims 1-5, characterized in that, The process of generating the target skin resource package includes: Retrieve skin resource data of the target skin designed by the user according to the interface design specifications from the preset resource directory. The skin resource data includes: multiple static resource data and multiple resource mapping files. The target program is tested based on the skin resource data. After the test is passed, in response to the user-triggered packaging command, the skin resource data under the preset resource directory is packaged to generate the target skin resource package; Upload the target skin resource package to the target path on the server.

7. The dynamic skin-skinning method according to claim 6, characterized in that, After uploading the target skin resource package to the target path on the server, the method further includes: Responding to a test command triggered by a user, the test command includes the target path of the skin resource package to be tested on the server; According to the preset path mapping rules, the target path of the skin resource package to be tested is mapped to the path to be tested in the preset resource directory; Based on the test path in the preset resource directory, obtain the skin resource package to be tested, and perform testing based on the test resource.

8. The dynamic skin-skinning method according to claim 6, characterized in that, Before testing the target program based on the skin resource data, the method further includes: Based on the skin resource data, static resource file information, static resource target documents, and new interface design specifications are generated. The static resource file information includes the path mapping relationship between each static resource data and each resource mapping file in the preset resource directory. The static resource target document is used to record the hierarchical relationship of each static resource data and resource mapping file stored in the preset resource directory. The interface design specifications include interface elements, interaction logic, and layout rules.

9. The dynamic skin-skinning method according to claim 6, characterized in that, The method further includes: Obtain the target interface design specifications and convert them into a new resource mapping file; Obtain the target resource mapping file and convert it into a new target interface design specification.

10. An electronic device, characterized in that, include: A processor and a memory, the memory storing machine-readable instructions executable by the processor, which, when the electronic device is running, are executed by the processor to perform the steps of the dynamic skinning method as described in any one of claims 1 to 9.

Images