Methods for replacing interface materials in electronic magazines and related equipment
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- CHINA PING AN PROPERTY INSURANCE CO LTD
- Filing Date
- 2022-12-07
- Publication Date
- 2026-06-30
AI Technical Summary
Existing technologies suffer from poor performance and resource dependency in the development of e-magazine functions, leading to development difficulties.
By receiving and parsing initialization request instructions, the acquisition path of interface materials is obtained and rendered in the reserved display area of the e-magazine interface; by receiving user click instructions, parsing and calling update functions to update interface materials, and combining interface split-screen and H5 technology, the functions of left and right page turning and image zooming are realized.
It improves the user experience of reading e-magazines, and achieves a convenient interface display and dynamic updates that simulate the left and right page turning of a book.
Smart Images
Figure CN115828018B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of UI design technology, and in particular to a method for replacing interface materials in an electronic magazine and related equipment. Background Technology
[0002] With the government upgrading its product promotion online, it hopes to transform the past paper-based company monthly magazine into an online e-magazine open to all company users, and hopes to have a better interactive experience on the PC, creating a page-turning effect.
[0003] Currently, the common approach is to introduce relevant open-source plugins such as turn.js or use websites that create online e-magazines. However, this can lead to issues related to information security, quality, and continuous product maintenance. Furthermore, plugins like turn.js rely on the jQuery library, which is an older dependency that cannot be integrated into the existing codebase, resulting in development difficulties. Summary of the Invention
[0004] The purpose of this application is to propose a method for replacing interface materials in electronic magazines and related equipment, so as to solve the problem that the existing technology has poor performance and resource dependence in the development of electronic magazine functions, which causes development difficulties.
[0005] To address the aforementioned technical problems, this application provides a method for replacing interface materials in an electronic magazine, employing the following technical solution:
[0006] A method for replacing interface elements in an e-magazine includes the following steps:
[0007] Receive an electronic magazine interface initialization request instruction, wherein the initialization request instruction includes the acquisition path of the interface materials to be initialized, and the interface materials include image resources;
[0008] Parse the initialization request command to obtain the acquisition path of the interface material to be initialized;
[0009] The interface material to be initialized is obtained according to the acquisition path, and the interface material to be initialized is rendered in the reserved display area of the e-magazine interface;
[0010] Receive the user's command to retrieve and update via a click on the e-magazine interface;
[0011] Parse the update request instruction and obtain the parsing result corresponding to the update request instruction;
[0012] Based on the parsing results, the corresponding update function is called to retrieve and update the initialized interface materials.
[0013] Furthermore, before executing the step of receiving the electronic magazine interface initialization request instruction, the method further includes:
[0014] Obtain all the image resources required to constitute the electronic magazine;
[0015] Based on the order in which the image resources are arranged in the electronic magazine, all the image resources are placed into a preset array.
[0016] Furthermore, before performing the step of placing all the image resources into a preset array according to the order in which they are arranged in the electronic magazine, the method further includes:
[0017] Step 301: Count the total number of all image resources and record it as the first quantity;
[0018] Step 302: Call the array length acquisition function to obtain the number of image resources that can be stored in the preset array, and record it as the second quantity;
[0019] Step 303: By comparison, determine whether the second quantity is less than the first quantity;
[0020] Step 304: If the second quantity is less than the first quantity, then call the array expansion function to expand the preset array and obtain the new array after expansion.
[0021] Step 305: Repeat steps 302 to 304 until the second quantity is not less than the first quantity, stop the expansion process, obtain and update the new array after the last expansion process to the preset array.
[0022] Furthermore, before executing the steps of obtaining the initialized interface material according to the acquisition path and rendering the initialized interface material in the reserved display area of the e-magazine interface, the method further includes:
[0023] According to the preset interface split-screen component, the electronic magazine interface is divided into two display parts: a reserved display area on the left and a reserved display area on the right.
[0024] The reserved display areas on the left and right are respectively matched with pre-set H5 page identifiers;
[0025] Generate the image rendering path corresponding to the reserved display area on the left based on the H5 page identifier corresponding to the reserved display area on the left.
[0026] Generate the image rendering path corresponding to the reserved display area on the right based on the H5 page identifier corresponding to the reserved display area on the right.
[0027] The step of rendering the initialized interface materials in the reserved display area of the e-magazine interface specifically includes:
[0028] By using the image rendering path corresponding to the reserved display area on the left as the target path, the first display material is obtained from the preset array. The interface material rendering of the reserved display area on the left of the e-magazine is completed by using the first display material and the target path. The first display material is the interface material that is preset to be rendered in the reserved display area on the left during initialization.
[0029] By using the image rendering path corresponding to the reserved display area on the right as the target path, the second display material is obtained from the preset array. The interface material rendering of the reserved display area on the right of the e-magazine is completed by using the second display material and the target path. The second display material is the interface material that is preset to be rendered in the reserved display area on the right during initialization.
[0030] Furthermore, before performing the step of receiving the user's command to retrieve and update the magazine via a click on the e-magazine interface, the method further includes:
[0031] Based on preset CSS properties, the left-side reserved display area is matched and set with a left-turn page function and a first-click interactive area;
[0032] Based on preset CSS properties, the right-side reserved display area is matched and set with a right-turn page-turning function and a second click interaction area;
[0033] Based on preset CSS properties, set up image zoom-in function, image zoom-out function, left-side regular interactive area and right-side regular interactive area for the reserved display area on the left and the reserved display area on the right.
[0034] Furthermore, the step of parsing the retrieve update instruction and obtaining the parsing result corresponding to the retrieve update instruction specifically includes:
[0035] The update request command issued by clicking is parsed to obtain the coordinate position information of the click point on the e-magazine interface when the user clicks. The update request command includes the coordinate position information of the click point on the e-magazine interface when the user clicks.
[0036] The step of calling the corresponding update function to retrieve and update the initialized interface materials based on the parsing result specifically includes:
[0037] Based on the coordinate position information, identify the click interaction area where the clicked touch point is located;
[0038] If the click interaction area where the click touch point is located belongs to the first click interaction area, then the update function corresponding to the left page-turning function is called to realize the left page-turning;
[0039] If the click interaction area where the clicked touch point is located belongs to the second click interaction area, then the update function corresponding to the right page-turning function is called to realize the right page-turning;
[0040] If the clickable interaction area is located in either the left or right regular interaction area, the interface material will be scaled according to a preset judgment rule.
[0041] Furthermore, the step of scaling the interface materials according to preset judgment rules specifically includes:
[0042] Based on the preset monitoring log, the scaling status of the corresponding image in the click interaction area before the current click interaction is identified, wherein the monitoring log records the scaling status information of the image resources currently displayed in the e-magazine interface;
[0043] If the image at the clicked interaction area was in a shrunk state before this click interaction, then the update function corresponding to the image magnification function is called to magnify and display the image at the clicked interaction area.
[0044] If the image at the clickable area was in a zoomed-in state before this click interaction, then the update function corresponding to the image zoom-out function is called to zoom out and display the image at the clickable area.
[0045] To address the aforementioned technical problems, this application also provides an electronic magazine interface material replacement device, which employs the following technical solution:
[0046] An electronic magazine interface material replacement device includes:
[0047] An initialization instruction receiving module is used to receive an electronic magazine interface initialization request instruction, wherein the initialization request instruction includes the acquisition path of the interface material to be initialized, and the interface material includes image resources;
[0048] The first instruction parsing module is used to parse the initialization request instruction and obtain the acquisition path of the interface material to be initialized;
[0049] The interface material rendering module is used to obtain the initialized interface material according to the acquisition path, and render the initialized interface material in the reserved display area of the e-magazine interface.
[0050] The update command receiving module is used to receive the update command issued by the user through a click on the electronic magazine interface;
[0051] The second instruction parsing module is used to parse the call update instruction and obtain the parsing result corresponding to the call update instruction;
[0052] The interface material update execution module is used to call the corresponding update function to retrieve and update the initialized interface materials based on the parsing results.
[0053] To address the aforementioned technical problems, this application also provides a computer device that employs the following technical solution:
[0054] A computer device includes a memory and a processor, wherein the memory stores computer-readable instructions, and the processor executes the computer-readable instructions to implement the steps of the above-described electronic magazine interface material replacement method.
[0055] To address the aforementioned technical problems, this application also provides a computer-readable storage medium, employing the technical solution described below:
[0056] A computer-readable storage medium storing computer-readable instructions, which, when executed by a processor, implement the steps of the electronic magazine interface material replacement method described above.
[0057] Compared with the prior art, the embodiments of this application have the following main advantages:
[0058] The electronic magazine interface material replacement method described in this application receives and parses an initialization request instruction to obtain the acquisition path of the interface material to be initialized; obtains the interface material to be initialized according to the acquisition path, and renders the interface material to be initialized in the reserved display area of the electronic magazine interface; receives a retrieval update instruction issued by the user through a click on the electronic magazine interface; parses the retrieval update instruction, and calls the corresponding update function to retrieve and update the interface material to be initialized based on the parsing result. Through interface split-screen and H5 implementation, the electronic magazine can be conveniently developed and displayed after the interface material is rendered in the reserved display area. Left and right page turning functions and image zooming functions are set to simulate the dynamic updates of left and right page turning in a book, improving the user experience of electronic magazine reading. Attached Figure Description
[0059] To more clearly illustrate the solutions in this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0060] Figure 1 This is an exemplary system architecture diagram to which this application can be applied;
[0061] Figure 2 A flowchart of an embodiment of the electronic magazine interface material replacement method according to this application;
[0062] Figure 3 A flowchart of an embodiment of the electronic magazine interface material replacement method of this application for creating a preset array for material storage;
[0063] Figure 4 yes Figure 2 A flowchart of a specific implementation of step 206 shown;
[0064] Figure 5 yes Figure 4 A flowchart of a specific implementation of step 404 shown;
[0065] Figure 6 A schematic diagram of the structure of an embodiment of the electronic magazine interface material replacement device according to this application;
[0066] Figure 7 A schematic diagram of the structure of an embodiment of the computer device according to this application. Detailed Implementation
[0067] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains; the terminology used herein in the specification of the application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having," and any variations thereof, in the specification, claims, and foregoing drawings of this application, are intended to cover non-exclusive inclusion. The terms "first," "second," etc., in the specification, claims, or foregoing drawings of this application are used to distinguish different objects, not to describe a particular order.
[0068] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.
[0069] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings.
[0070] like Figure 1 As shown, system architecture 100 may include terminal devices 101, 102, and 103, a network 104, and a server 105. Network 104 serves as the medium for providing communication links between terminal devices 101, 102, and 103 and server 105. Network 104 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.
[0071] Users can use terminal devices 101, 102, and 103 to interact with server 105 via network 104 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 101, 102, and 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social media platform software, etc.
[0072] Terminal devices 101, 102, and 103 can be various electronic devices with displays and support web browsing, including but not limited to smartphones, tablets, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 players (Moving Picture Experts Group Audio Layer IV), laptops, and desktop computers, etc.
[0073] Server 105 can be a server that provides various services, such as a backend server that supports the pages displayed on terminal devices 101, 102, and 103.
[0074] It should be noted that the electronic magazine interface material replacement method provided in this application embodiment is generally executed by a server / terminal device, and correspondingly, the electronic magazine interface material replacement device is generally set in the server / terminal device.
[0075] It should be understood that Figure 1The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.
[0076] Continue to refer to Figure 2 The diagram illustrates a flowchart of an embodiment of the electronic magazine interface material replacement method according to this application. The electronic magazine interface material replacement method includes the following steps:
[0077] Step 201: Receive the electronic magazine interface initialization request instruction.
[0078] In this embodiment, the initialization request instruction includes the acquisition path of the interface materials to be initialized, and the interface materials include image resources.
[0079] In this embodiment, before executing the step of receiving the electronic magazine interface initialization request instruction, the method further includes: obtaining all image resources required to constitute the electronic magazine; and placing all image resources into a preset array according to the order in which the image resources are arranged in the electronic magazine.
[0080] Continue to refer to Figure 3 Before performing the step of placing all the image resources into a preset array according to the order in which they are arranged in the electronic magazine, Figure 3 A flowchart illustrating an embodiment of the electronic magazine interface material replacement method according to this application, which creates a preset array for material storage, is shown, including:
[0081] Step 301: Count the total number of all image resources and record it as the first quantity;
[0082] Step 302: Call the array length acquisition function to obtain the number of image resources that can be stored in the preset array, and record it as the second quantity;
[0083] Step 303: By comparison, determine whether the second quantity is less than the first quantity;
[0084] Step 304: If the second quantity is less than the first quantity, then call the array expansion function to expand the preset array and obtain the new array after expansion.
[0085] Step 305: Repeat steps 302 to 304 until the second quantity is not less than the first quantity, stop the expansion process, obtain and update the new array after the last expansion process to the preset array.
[0086] By judging and expanding the preset array, it is ensured that the interface materials can be completely placed into the preset array.
[0087] Furthermore, a specific implementation of placing all image resources into a preset array according to the order in which the image resources are arranged in the electronic magazine is as follows: obtain a pre-created empty array fileList, wherein the empty array fileList can store the number of image resources, that is, the length of the empty array fileList is not less than the number of all image resources; and place all image resources into the empty array.
[0088] Step 202: Parse the initialization request instruction to obtain the acquisition path of the interface material to be initialized.
[0089] Step 203: Obtain the interface material to be initialized according to the acquisition path, and render the interface material to be initialized in the reserved display area of the e-magazine interface.
[0090] In this embodiment, before executing the steps of obtaining the initialized interface material according to the acquisition path and rendering the initialized interface material in the reserved display area of the e-magazine interface, the method further includes: dividing the e-magazine interface into two display parts, a left reserved display area and a right reserved display area, according to a preset interface split-screen component; matching the left reserved display area and the right reserved display area with pre-set H5 page identifiers respectively; generating an image rendering path corresponding to the left reserved display area according to the H5 page identifier corresponding to the left reserved display area; and generating an image rendering path corresponding to the right reserved display area according to the H5 page identifier corresponding to the right reserved display area.
[0091] By using a split-screen interface, the e-magazine is displayed in a book-style format after the interface materials are rendered into the reserved display area. This simulates the left-right page display of a book, which is more in line with people's reading habits. The e-magazine, implemented using native HTML5, has better compatibility, allowing for seamless display across different platforms and browsers, and also facilitates centralized and secure data maintenance by business personnel.
[0092] Furthermore, the specific implementation of matching the reserved display area on the left and the reserved display area on the right with the pre-set H5 page identifier is as follows: the reserved display area on the left is matched with the pre-set H5 page identifier scopeA, i.e., area A, and the reserved display area on the right is matched with the pre-set H5 page identifier scopeB, i.e., area B.
[0093] In this embodiment, the step of rendering the initialized interface material in the reserved display area of the e-magazine interface specifically includes: obtaining a first display material from the preset array by using the image rendering path corresponding to the left reserved display area as the target path; and completing the rendering of the interface material in the left reserved display area of the e-magazine using the first display material and the target path, wherein the first display material is the interface material preset to be rendered in the left reserved display area during initialization; and obtaining a second display material from the preset array by using the image rendering path corresponding to the right reserved display area as the target path; and completing the rendering of the interface material in the right reserved display area of the e-magazine using the second display material and the target path, wherein the second display material is the interface material preset to be rendered in the right reserved display area during initialization.
[0094] Step 204: Receive the update command sent by the user through a click on the e-magazine interface.
[0095] In this embodiment, before executing the step of receiving the user's retrieval and update command issued by clicking on the e-magazine interface, the method further includes: matching and setting a left-turning page function and a first click interaction area for the left reserved display area according to preset CSS properties; matching and setting a right-turning page function and a second click interaction area for the right reserved display area according to preset CSS properties; and matching and setting an image zoom-in function, an image zoom-out function, a left-side regular interaction area, and a right-side regular interaction area for the left and right reserved display areas according to preset CSS properties.
[0096] By setting up left and right page-turning and image zooming functions, the display method simulating the left and right pages of a book is made more dynamic, improving the user experience of e-magazine reading.
[0097] Step 205: Parse the retrieval update instruction and obtain the parsing result corresponding to the retrieval update instruction.
[0098] In this embodiment, the step of parsing the retrieval update command and obtaining the parsing result corresponding to the retrieval update command specifically includes: parsing the retrieval update command issued by clicking, and obtaining the coordinate position information of the click point on the e-magazine interface when the user clicks, wherein the retrieval update command includes the coordinate position information of the click point on the e-magazine interface when the user clicks.
[0099] Step 206: Based on the parsing result, call the corresponding update function to retrieve and update the initialized interface materials.
[0100] Continue to refer to Figure 4 , Figure 4 yes Figure 2 A flowchart of a specific implementation of step 206 shown includes:
[0101] Step 401: Identify the click interaction area where the clicked touch point is located based on the coordinate position information;
[0102] Step 402: If the click interaction area where the click touch point is located belongs to the first click interaction area, then call the update function corresponding to the left page turning function to realize the left page turning;
[0103] Step 403: If the click interaction area where the clicked touch point is located belongs to the second click interaction area, then call the update function corresponding to the right page-turning function to realize the right page-turning;
[0104] Step 404: If the click interaction area where the clicked touch point is located belongs to the left regular interaction area or the right regular interaction area, then the interface material is scaled according to the preset judgment rules.
[0105] Continue to refer to Figure 5 , Figure 5 yes Figure 4 A flowchart of a specific implementation of step 404 shown includes:
[0106] Step 501: Based on the preset monitoring log, identify the scaling status of the corresponding image in the click interaction area before this click interaction, wherein the monitoring log records the scaling status information of the image resources currently displayed in the e-magazine interface.
[0107] Step 502: If the image corresponding to the click interaction area was in a shrunk state before the current click interaction, then call the update function corresponding to the image magnification function to magnify and display the image corresponding to the click interaction area.
[0108] Step 503: If the image corresponding to the click interaction area was in a zoomed-in state before the current click interaction, then call the update function corresponding to the image zoom-out function to zoom out and display the image corresponding to the click interaction area.
[0109] This application receives and parses initialization request instructions to obtain the acquisition path of the interface materials to be initialized; obtains the interface materials to be initialized according to the acquisition path, and renders the interface materials to be initialized in the reserved display area of the e-magazine interface; receives the retrieval and update instructions issued by the user through clicks in the e-magazine interface; parses the retrieval and update instructions, and calls the corresponding update function to retrieve and update the interface materials to be initialized based on the parsing results. Through interface split-screen and H5 implementation, the e-magazine can be conveniently developed and displayed after the interface materials are rendered in the reserved display area. Left and right page turning functions and image zooming functions are set to simulate the dynamic updates of left and right page turning in a book, improving the user experience of e-magazine reading.
[0110] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) is the theory, method, technology, and application system that uses digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to obtain optimal results.
[0111] Foundational technologies for artificial intelligence generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interactive systems, and mechatronics. AI software technologies mainly encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.
[0112] In this embodiment, an initialization request instruction is received and parsed to obtain the acquisition path of the interface materials to be initialized; the interface materials to be initialized are obtained according to the acquisition path, and rendered in the reserved display area of the e-magazine interface; an update command is received from the user via click in the e-magazine interface; the update command is parsed, and the corresponding update function is called to update the interface materials to be initialized based on the parsing result. By using a split-screen interface and H5 implementation, the e-magazine can be conveniently developed and displayed after the interface materials are rendered in the reserved display area. Left and right page turning functions and image zooming functions are set to simulate the dynamic updates of left and right page turning in a book, improving the user experience of e-magazine reading.
[0113] Further reference Figure 6 As a response to the above Figure 2 The implementation of the method shown in this application provides an embodiment of an electronic magazine interface material replacement device, which is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.
[0114] like Figure 6 As shown, the electronic magazine interface material replacement device 600 described in this embodiment includes: an initialization command receiving module 601, a first command parsing module 602, an interface material rendering module 603, an update command receiving module 604, a second command parsing module 605, and an interface material update execution module 606. Wherein:
[0115] An initialization instruction receiving module 601 is used to receive an electronic magazine interface initialization request instruction, wherein the initialization request instruction includes the acquisition path of the interface material to be initialized, and the interface material includes image resources;
[0116] The first instruction parsing module 602 is used to parse the initialization request instruction and obtain the acquisition path of the interface material to be initialized;
[0117] The interface material rendering module 603 is used to obtain the initialized interface material according to the acquisition path, and render the initialized interface material in the reserved display area of the electronic magazine interface.
[0118] The update instruction receiving module 604 is used to receive the update instruction issued by the user through a click on the electronic magazine interface;
[0119] The second instruction parsing module 605 is used to parse the call update instruction and obtain the parsing result corresponding to the call update instruction;
[0120] The interface material update execution module 606 is used to call the corresponding update function to retrieve and update the initialized interface materials based on the parsing result.
[0121] In some specific embodiments of this application, the electronic magazine interface material replacement device 600 further includes an interface split-screen setting module. This module is used to divide the electronic magazine interface into two display parts: a left reserved display area and a right reserved display area, based on a preset interface split-screen component. It is also used to match pre-set H5 page identifiers to the left and right reserved display areas respectively; to generate an image rendering path corresponding to the left reserved display area based on the H5 page identifier corresponding to the left reserved display area; and to generate an image rendering path corresponding to the right reserved display area based on the H5 page identifier corresponding to the right reserved display area.
[0122] In some specific embodiments of this application, the electronic magazine interface material replacement device 600 further includes a dynamic function setting module. The dynamic function setting module is used to match and set a left-turn page function and a first click interaction area for the left reserved display area according to preset CSS properties; it is also used to match and set a right-turn page function and a second click interaction area for the right reserved display area according to preset CSS properties; and it is also used to match and set an image zoom function, an image zoom function, a left regular interaction area, and a right regular interaction area for the left reserved display area and the right reserved display area according to preset CSS properties.
[0123] This application receives and parses initialization request instructions to obtain the acquisition path of the interface materials to be initialized; obtains the interface materials to be initialized according to the acquisition path, and renders the interface materials to be initialized in the reserved display area of the e-magazine interface; receives the retrieval and update instructions issued by the user through clicks in the e-magazine interface; parses the retrieval and update instructions, and calls the corresponding update function to retrieve and update the interface materials to be initialized based on the parsing results. Through interface split-screen and H5 implementation, the e-magazine can be conveniently developed and displayed after the interface materials are rendered in the reserved display area. Left and right page turning functions and image zooming functions are set to simulate the dynamic updates of left and right page turning in a book, improving the user experience of e-magazine reading.
[0124] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing related hardware through computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above methods. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, or read-only memory (ROM), or random access memory (RAM).
[0125] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.
[0126] To address the aforementioned technical problems, embodiments of this application also provide a computer device. Please refer to [link / reference needed]. Figure 7 , Figure 7 This is a basic structural block diagram of the computer device in this embodiment.
[0127] The computer device 7 includes a memory 7a, a processor 7b, and a network interface 7c that are interconnected via a system bus. It should be noted that only the computer device 7 with components 7a-7c is shown in the figure; however, it should be understood that it is not required to implement all the shown components, and more or fewer components can be implemented alternatively. Those skilled in the art will understand that the computer device described here is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes, but is not limited to, microprocessors, application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.
[0128] The computer device can be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device can interact with the user via a keyboard, mouse, remote control, touchpad, or voice control.
[0129] The memory 7a includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 7a may be an internal storage unit of the computer device 7, such as the hard disk or memory of the computer device 7. In other embodiments, the memory 7a may also be an external storage device of the computer device 7, such as a plug-in hard disk, smart media card (SMC), secure digital card (SD), flash card, etc., equipped on the computer device 7. Of course, the memory 7a may also include both the internal storage unit and its external storage device of the computer device 7. In this embodiment, the memory 7a is typically used to store the operating system and various application software installed on the computer device 7, such as computer-readable instructions for replacing electronic magazine interface materials. In addition, the memory 7a can also be used to temporarily store various types of data that have been output or will be output.
[0130] In some embodiments, the processor 7b may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip. The processor 7b is typically used to control the overall operation of the computer device 7. In this embodiment, the processor 7b is used to execute computer-readable instructions stored in the memory 7a or to process data, for example, to execute computer-readable instructions for the electronic magazine interface material replacement method.
[0131] The network interface 7c may include a wireless network interface or a wired network interface, which is typically used to establish communication connections between the computer device 7 and other electronic devices.
[0132] The computer device proposed in this embodiment belongs to the field of UI design technology. This application receives and parses an initialization request instruction to obtain the acquisition path of the interface materials to be initialized; obtains the interface materials to be initialized according to the acquisition path, and renders the interface materials to be initialized in the reserved display area of the e-magazine interface; receives a retrieval and update instruction issued by the user through a click on the e-magazine interface; parses the retrieval and update instruction, and calls the corresponding update function to retrieve and update the interface materials to be initialized based on the parsing result. Through interface split-screen and H5 implementation, the e-magazine can be conveniently developed and displayed after the interface materials are rendered in the reserved display area. Left and right page turning functions and image zooming functions are set to simulate the dynamic updates of left and right page turning in a book, improving the user experience of e-magazine reading.
[0133] This application also provides another embodiment, namely, providing a computer-readable storage medium storing computer-readable instructions that can be executed by a processor to cause the processor to perform the steps of the electronic magazine interface material replacement method described above.
[0134] The computer-readable storage medium proposed in this embodiment belongs to the field of UI design technology. This application receives and parses an initialization request instruction to obtain the acquisition path of the interface materials to be initialized; obtains the interface materials to be initialized according to the acquisition path, and renders the initialized interface materials in the reserved display area of the e-magazine interface; receives a retrieval and update instruction issued by the user through a click on the e-magazine interface; parses the retrieval and update instruction, and calls the corresponding update function to retrieve and update the initialized interface materials according to the parsing result. Through interface split-screen and H5 implementation, the e-magazine can be conveniently developed and displayed after the interface materials are rendered in the reserved display area. Left and right page turning functions and image zooming functions are set to simulate the dynamic updates of left and right page turning in a book, improving the user experience of e-magazine reading.
[0135] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.
[0136] Obviously, the embodiments described above are only some embodiments of this application, not all embodiments. The accompanying drawings show preferred embodiments of this application, but do not limit the patent scope of this application. This application can be implemented in many different forms; rather, the purpose of providing these embodiments is to provide a more thorough and comprehensive understanding of the disclosure of this application. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing specific embodiments, or make equivalent substitutions for some of the technical features. Any equivalent structures made using the content of this application's specification and drawings, directly or indirectly applied to other related technical fields, are similarly within the scope of patent protection of this application.
Claims
1. A method for replacing interface materials in an electronic magazine, characterized in that, Includes the following steps: Receive an electronic magazine interface initialization request instruction, wherein the initialization request instruction includes the acquisition path of the interface materials to be initialized, and the interface materials include image resources; Parse the initialization request command to obtain the acquisition path of the interface material to be initialized; The interface material to be initialized is obtained according to the acquisition path, and the interface material to be initialized is rendered in the reserved display area of the e-magazine interface. Receive the user's command to retrieve and update via a click on the e-magazine interface; Parse the update request instruction and obtain the parsing result corresponding to the update request instruction; Based on the parsing results, the corresponding update function is called to retrieve and update the initialized interface materials; The method further includes, before executing the steps of obtaining the initialized interface material according to the acquisition path and rendering the initialized interface material in the reserved display area of the e-magazine interface: According to the preset interface split-screen component, the electronic magazine interface is divided into two display parts: a reserved display area on the left and a reserved display area on the right. The reserved display areas on the left and right are respectively matched with pre-set H5 page identifiers. Specifically, the reserved display area on the left is matched with a pre-set H5 page identifier representing area A, and the reserved display area on the right is matched with a pre-set H5 page identifier representing area B. Generate the image rendering path corresponding to the reserved display area on the left based on the H5 page identifier corresponding to the reserved display area on the left. Generate the image rendering path corresponding to the reserved display area on the right based on the H5 page identifier corresponding to the reserved display area on the right. Prior to the step of receiving the user's command to retrieve and update the magazine via a click on the e-magazine interface, the method further includes: Based on preset CSS properties, the left-side reserved display area is matched and set with a left-turn page function and a first-click interactive area; Based on preset CSS properties, the right-side reserved display area is matched and set with a right-turn page-turning function and a second click interaction area; Based on preset CSS properties, set up image zoom-in function, image zoom-out function, left-side regular interactive area and right-side regular interactive area for the reserved display area on the left and the reserved display area on the right.
2. The method for replacing electronic magazine interface materials according to claim 1, characterized in that, Before executing the step of receiving the electronic magazine interface initialization request instruction, the method further includes: Obtain all the image resources required to constitute the electronic magazine; Based on the order in which the image resources are arranged in the electronic magazine, all the image resources are placed into a preset array.
3. The method for replacing electronic magazine interface materials according to claim 2, characterized in that, Before performing the step of placing all the image resources into a preset array according to the order in which they are arranged in the electronic magazine, the method further includes: Step 301: Count the total number of all image resources and record it as the first quantity; Step 302: Call the array length acquisition function to obtain the number of image resources that can be stored in the preset array, and record it as the second quantity; Step 303: By comparison, determine whether the second quantity is less than the first quantity; Step 304: If the second quantity is less than the first quantity, then call the array expansion function to expand the preset array and obtain the new array after expansion. Step 305: Repeat steps 302 to 304 until the second quantity is not less than the first quantity, stop the expansion process, obtain and update the new array after the last expansion process to the preset array.
4. The method for replacing electronic magazine interface materials according to any one of claims 2 or 3, characterized in that, The step of rendering the initialized interface materials in the reserved display area of the e-magazine interface specifically includes: By using the image rendering path corresponding to the reserved display area on the left as the target path, the first display material is obtained from the preset array. The interface material rendering of the reserved display area on the left of the e-magazine is completed by using the first display material and the target path. The first display material is the interface material that is preset to be rendered in the reserved display area on the left during initialization. By using the image rendering path corresponding to the reserved display area on the right as the target path, the second display material is obtained from the preset array. The interface material rendering of the reserved display area on the right of the e-magazine is completed by using the second display material and the target path. The second display material is the interface material that is preset to be rendered in the reserved display area on the right during initialization.
5. The method for replacing electronic magazine interface materials according to claim 1, characterized in that, The step of parsing the retrieval update instruction and obtaining the parsing result corresponding to the retrieval update instruction specifically includes: The update request command issued by clicking is parsed to obtain the coordinate position information of the click point on the e-magazine interface when the user clicks. The update request command includes the coordinate position information of the click point on the e-magazine interface when the user clicks. The step of calling the corresponding update function to retrieve and update the initialized interface materials based on the parsing result specifically includes: Based on the coordinate position information, identify the click interaction area where the clicked touch point is located; If the click interaction area where the click touch point is located belongs to the first click interaction area, then the update function corresponding to the left page-turning function is called to realize the left page-turning; If the click interaction area where the clicked touch point is located belongs to the second click interaction area, then the update function corresponding to the right page-turning function is called to realize the right page-turning; If the clickable interaction area is located in either the left or right regular interaction area, the interface material will be scaled according to a preset judgment rule.
6. The method for replacing electronic magazine interface materials according to claim 5, characterized in that, The step of scaling the interface materials according to the preset judgment rules specifically includes: Based on the preset monitoring log, the scaling status of the corresponding image in the click interaction area before the current click interaction is identified, wherein the monitoring log records the scaling status information of the image resources currently displayed in the e-magazine interface; If the image at the clicked interaction area was in a shrunk state before this click interaction, then the update function corresponding to the image magnification function is called to magnify and display the image at the clicked interaction area. If the image at the clickable area was in a zoomed-in state before this click interaction, then the update function corresponding to the image zoom-out function is called to zoom out and display the image at the clickable area.
7. A device for replacing interface materials in an electronic magazine, characterized in that, The electronic magazine interface material replacement device implements the steps of the electronic magazine interface material replacement method as described in any one of claims 1 to 6, and the electronic magazine interface material replacement device includes: An initialization instruction receiving module is used to receive an electronic magazine interface initialization request instruction, wherein the initialization request instruction includes the acquisition path of the interface material to be initialized, and the interface material includes image resources; The first instruction parsing module is used to parse the initialization request instruction and obtain the acquisition path of the interface material to be initialized; The interface material rendering module is used to obtain the initialized interface material according to the acquisition path, and render the initialized interface material in the reserved display area of the e-magazine interface. The update command receiving module is used to receive the update command issued by the user through a click on the electronic magazine interface; The second instruction parsing module is used to parse the call update instruction and obtain the parsing result corresponding to the call update instruction; The interface material update execution module is used to call the corresponding update function to retrieve and update the initialized interface materials based on the parsing result; The interface split-screen setting module is used to divide the e-magazine interface into two display parts: a left-side reserved display area and a right-side reserved display area, based on preset interface split-screen components. It is also used to match pre-set H5 page identifiers to the left-side and right-side reserved display areas respectively. Specifically, it matches a pre-set H5 page identifier representing area A to the left-side reserved display area and a pre-set H5 page identifier representing area B to the right-side reserved display area. Furthermore, it is used to generate an image rendering path corresponding to the left-side reserved display area based on the H5 page identifier corresponding to the left-side reserved display area, and also to generate an image rendering path corresponding to the right-side reserved display area based on the H5 page identifier corresponding to the right-side reserved display area. The dynamic function setting module is used to match and set a left-turn page function and a first click interaction area for the reserved display area on the left according to preset CSS properties; it is also used to match and set a right-turn page function and a second click interaction area for the reserved display area on the right according to preset CSS properties; and it is also used to match and set an image zoom function, an image zoom function, a left-side regular interaction area, and a right-side regular interaction area for the reserved display areas on the left and right according to preset CSS properties.
8. A computer device comprising a memory and a processor, the memory storing computer-readable instructions, wherein the processor, when executing the computer-readable instructions, implements the steps of the electronic magazine interface material replacement method as described in any one of claims 1 to 6.
9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the electronic magazine interface material replacement method as described in any one of claims 1 to 6.