Page processing method, device, electronic device and storage medium

Abstract

The embodiments of the present invention are applicable to the field of Internet technology, and provide a page processing method, device, electronic device and storage medium, wherein the page processing method includes: obtaining first page data of a first page; the first page is represented as a page in an application; the first page data represents the code corresponding to the RN component constituting the first page; based on a setting plug-in, the first page data is converted into second page data; the setting plug-in is used to convert the code corresponding to the RN component into the code corresponding to the hypertext markup language HTML component; and rendering a second page corresponding to the second page data through a browser.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a page processing method, device, electronic device and storage medium. Background Art

[0002] E-commerce application software (APP) is usually developed based on RN (React Native) architecture. Through the design platform used to design the interface of e-commerce stores, users can realize their personalized interface requirements for e-commerce stores. In order to enable users to intuitively experience the visual effects of the designed e-commerce store interface presented on the e-commerce APP, in the related technology, for each RN component developed on the APP side, it is necessary to develop an H5 (HTML5) component corresponding to the RN component on the design platform, resulting in low development efficiency. Summary of the invention

[0003] In order to solve the above problems, an embodiment of the present invention provides a page processing method, device, electronic device and storage medium, so as to at least solve the problem that for each RN component developed on the APP side in the related technology, an H5 component corresponding to the RN component needs to be developed.

[0004] The technical solution of the present invention is achieved in this way:

[0005] In a first aspect, an embodiment of the present invention provides a page processing method, the method comprising:

[0006] Acquire first page data of a first page; the first page is represented as a page in an application; the first page data represents a code corresponding to an RN component constituting the first page;

[0007] Converting the first page data into the second page data based on a setting plug-in; the setting plug-in is used to convert the code corresponding to the RN component into the code corresponding to the Hypertext Markup Language HTML component;

[0008] The second page corresponding to the second page data is rendered by the browser.

[0009] In one embodiment, the method further comprises:

[0010] Acquire third page data; the third page data represents operation data of operating the HTML components constituting the second page in the browser;

[0011] The page content of the second page is updated based on the third page data.

[0012] In one embodiment, rendering the second page corresponding to the second page data by a browser includes:

[0013] Create a DIV container that matches the size of the first page;

[0014] Create an iframe page frame in the DIV container;

[0015] Based on the iframe page frame and the second page data, the second page is rendered.

[0016] In one embodiment, updating the page content of the second page based on the third page data includes:

[0017] modifying the second page data corresponding to the second page based on the third page data;

[0018] The browser renders the second page corresponding to the modified second page data.

[0019] In one embodiment, when rendering the second page corresponding to the second page data through the browser, the method further includes:

[0020] The second page data is obtained from a content delivery network CDN.

[0021] In one embodiment, operating the HTML component constituting the second page includes any one of the following:

[0022] Initialize HTML components;

[0023] Select the HTML component;

[0024] Added HTML component;

[0025] Remove HTML components;

[0026] Adjust the order of HTML components;

[0027] Updates the HTML component.

[0028] In one embodiment, the obtaining of the third page data includes:

[0029] The third page data is obtained from the setting server.

[0030] In a second aspect, an embodiment of the present invention provides a page processing device, the device comprising:

[0031] An acquisition module, configured to acquire first page data of a first page; the first page is represented as a page in an application; the first page data represents a code corresponding to an RN component constituting the first page;

[0032] A conversion module, used to convert the first page data into second page data based on a setting plug-in; the setting plug-in is used to convert the code corresponding to the RN component into the code corresponding to the hypertext markup language HTML component;

[0033] A rendering module is used to render the second page corresponding to the second page data through a browser.

[0034] In a third aspect, an embodiment of the present invention provides an electronic device, comprising a processor and a memory, wherein the processor and the memory are interconnected, wherein the memory is used to store a computer program, the computer program comprises program instructions, and the processor is configured to call the program instructions to execute the steps of the page processing method provided in the first aspect of the embodiment of the present invention.

[0035] In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, including: the computer-readable storage medium stores a computer program. When the computer program is executed by a processor, the steps of the page processing method provided in the first aspect of the embodiment of the present invention are implemented.

[0036] The embodiment of the present invention obtains the first page data of the first page, converts the first page data into the second page data based on the setting plug-in, and renders the second page corresponding to the second page data through the browser. The first page is represented as a page in the application; the first page data represents the code corresponding to the RN component constituting the first page; the setting plug-in is used to convert the code corresponding to the RN component into the code corresponding to the HTML component. The embodiment of the present invention converts the code of the first page data by setting the plug-in, so only one set of RN components needs to be developed to realize the display of the e-commerce store interface on the e-commerce APP on the design platform, and there is no need to develop the H5 component corresponding to the RN component on the design platform, which reduces the development workload and improves the development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Figure 1 It is a schematic diagram of a design process of an electronic store interface provided by an embodiment of the present invention;

[0038] Figure 2 It is a schematic diagram of a design process of an electronic store interface provided by an embodiment of the present invention;

[0039] Figure 3 It is a schematic diagram of an implementation flow of a page processing method provided by an embodiment of the present invention;

[0040] Figure 4 It is a schematic diagram of the implementation flow of another page processing method provided by an embodiment of the present invention;

[0041] Figure 5It is a schematic diagram of the implementation flow of another page processing method provided by an embodiment of the present invention;

[0042] Figure 6 It is a schematic diagram of the implementation flow of another page processing method provided by an embodiment of the present invention;

[0043] Figure 7 It is a schematic diagram of the design process of an electronic store interface provided by an application embodiment of the present invention;

[0044] Figure 8 This is a schematic diagram of a rendering process of an H5 page provided by an application embodiment of the present invention;

[0045] Fig. 9 It is a schematic diagram of the design process of an electronic store interface provided by an application embodiment of the present invention;

[0046] Fig.10 It is a schematic diagram of the design process of an electronic store interface provided by an application embodiment of the present invention;

[0047] Fig.11 is a schematic diagram of a page processing device provided by an embodiment of the present invention;

[0048] Fig.12 It is a schematic diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0049] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0050] RN (React Native) is a hybrid mobile application development framework. E-commerce apps are usually developed based on RN components, but design platforms and HTML pages can only be developed using H5 components. This means that for every RN component developed on the app side, an H5 component corresponding to the RN component needs to be developed on the design platform, so that the e-commerce store interface designed on the design platform can be consistent with the e-commerce store interface displayed on the e-commerce app. However, this requires the development of two versions of components, which is inefficient.

[0051] In view of the shortcomings of the above-mentioned related technologies, an embodiment of the present invention provides a page processing method, which can at least reduce the development workload and improve the development efficiency. In order to illustrate the technical solution of the present invention, a specific embodiment is used for description below.

[0052] refer to Figure 1 , Figure 1 It is a schematic diagram of the design process of an e-commerce store interface provided by an embodiment of the present invention. In the related art, an e-commerce platform provides a design platform for designing an e-commerce store interface. The design platform is usually run in a World Wide Web (WEB) browser on a PC. The design platform has a component selection panel and a preview area. The component selection panel provides some component templates for users to design and use. Each component in the web page, such as the header, content area, pop-up box and even the confirmation button, can become a component. Each component has independent HTML, CSS, and JS codes. A component can be simply understood as a piece of a web page, and multiple components constitute a complete web page. The preview area is used to preview the visual effect of the designed e-commerce store interface on the e-commerce APP. Users can use the component templates in the component selection panel to design the e-commerce store interface displayed in the preview area, and can also operate the components that constitute the e-commerce store interface displayed in the preview area. When the user is satisfied with the designed e-commerce store interface displayed in the preview area, the design result is published to the e-commerce APP for display. For example, in Figure 1 In the design, the user selects the component 1 template and the component 2 template to design the e-commerce store interface, and the corresponding component 1 instance and component 2 instance are displayed in the preview area. After the design result is published to the e-commerce APP, the component 1 floor and component 2 floor are displayed in the e-commerce APP's e-commerce store interface. Since the e-commerce store interface presented on the e-commerce APP is generally laid out in a vertical list format, similar to a building, the area where each component is displayed in the e-commerce store interface is called a floor.

[0053] refer to Figure 2 , Figure 2 The present invention provides an electronic store interface design process diagram. Figure 2 The design data array in is the final design result of the electronic store interface by the user in the design platform. The design data array includes multiple floor data, and one floor data corresponds to one RN component. For example, the floor 1 data corresponds to RN component 1. The design data array is sent to the RN page, which is the electronic store interface displayed in the e-commerce APP. Rendering the RN page means that the designed electronic store interface can be displayed in the e-commerce APP.

[0054] Figure 3 1 is a schematic diagram of an implementation flow of a page processing method provided by an embodiment of the present invention. The execution subject of the page processing method is an electronic device, and the electronic device includes a desktop computer, a notebook computer, and a server. Figure 3 , the page processing methods include:

[0055] S301, obtaining first page data of a first page; the first page is represented as a page in an application; the first page data represents the code corresponding to the RN component constituting the first page.

[0056] Here, the application refers to an e-commerce APP, the first page refers to an e-commerce store interface in the e-commerce APP, the first page is composed of RN components, and the first page data represents the code corresponding to the RN components that constitute the first page.

[0057] The first page data can be obtained from the APP. Every time the user designs the store page on the design platform, the first page data of the first page is stored in the server, and the second page data is obtained from the server.

[0058] S302, converting the first page data into second page data based on a setting plug-in; the setting plug-in is used to convert the code corresponding to the RN component into the code corresponding to the hypertext markup language HTML component.

[0059] Here, the plugin is set to RNW (React Native Web) plugin. The RNW plugin can implement the RN component as a WEB-side and package a code that can run on the WEB-side. The first page data is processed by the RNW plugin to obtain the second page data. The second page data represents the code of the HTML component of the corresponding HTML page.

[0060] In one embodiment, after converting the first page data into the second page data based on the setting plug-in, the second page data is stored in a content delivery network CDN.

[0061] S303: Rendering a second page corresponding to the second page data through a browser.

[0062] Here, the browser is a WEB browser, and the page content of the second page is the same as the page content of the first page in the application.

[0063] In one embodiment, when rendering the second page corresponding to the second page data through the browser, the method further includes:

[0064] The second page data is obtained from a content delivery network CDN.

[0065] The first page data is converted into the second page data based on the setting plug-in, and the obtained second page data is stored in the content delivery network (CDN). CDN is an intelligent virtual network built on the basis of the existing network. It relies on edge servers deployed in various places and uses the load balancing, content distribution, scheduling and other functional modules of the central platform to enable users to obtain the required content nearby, reduce network congestion, and improve user access response speed and hit rate.

[0066] In actual applications, the code of RN components is compiled through the RNW plug-in to output static JS files and CSS files. The output static resources have the ability to perform H5 rendering on all RN components. The static resources are stored in the CDN. The WEB browser obtains static resources from the CDN to generate HTML web pages, which can improve the loading speed of HTML web pages and enable the WEB browser to quickly generate web page content.

[0067] The design platform for designing the e-commerce store interface can be accessed through a WEB browser. Since the second page data corresponds to the code corresponding to the HTML component, the second page corresponding to the second page data can be rendered through the WEB browser, and the page content of the second page is the same as the page content of the first page in the application. In this way, the user can intuitively feel the visual effect of the designed e-commerce store interface presented on the e-commerce APP on the design platform.

[0068] refer to Figure 4 In one embodiment, rendering the second page corresponding to the second page data by the browser includes:

[0069] S401: Create a DIV container with a size consistent with that of the first page.

[0070] Here, DIV is a block-level element, which is a container that can be used to group other HTML elements. The tag defines a delimited block or section in an HTML document.

[0071] In actual application, you can open the design platform through a WEB browser and create a DIV container in the preview area of ​​the design platform. The preview area can be a rectangular area similar to the terminal screen, and the width of the DIV container can be a pixel width similar to the mobile phone screen, such as a pixel width of 375px or 414px. The height of the DIV container is consistent with the height of the H5 page, and the H5 page is the second page. Set the page background positioning mode of the setting area to fixed, and the top, bottom, left and right margins to 0. Then set overflow-y to auto to allow vertical scrolling. In this way, if the height of the H5 page in the setting area exceeds the height of the existing display, you can scroll down the entire page background to achieve a scrolling view operation similar to a mobile phone screen.

[0072] S402: Create an iframe page frame in the DIV container.

[0073] <iframe>The tag specifies an inline frame, which is used to embed another document in the current HTML document. An iframe page frame is created in the DIV container, and the width of the iframe page frame is the same as that of the DIV. The iframe page frame is used because the iframe page frame can load a page independently, and the sandbox and scope of the page can be isolated from the setting platform to avoid conflicts in variables and naming. This can better load and simulate a mobile H5 page.

[0074] S403, based on the iframe page framework and the second page data, rendering to obtain the second page.

[0075] The second page data is loaded in the iframe page frame, and the WEB browser renders the second page data to obtain the second page. Here, the second page is an HTML page, specifically an H5 (HTML5) page.

[0076] In practical applications, an H5 page can be displayed in an iframe page framework based on the following code.

[0077]

[0078] The page loaded in the iframe page frame is a WEB page, and the page content needs to include the introduction of the static resources of the H5 page and the H5 page content entrance.

[0079] The static resources of the H5 page are introduced through link and script, and a DIV container element with id J_app (which must be the same as the container binding entry name of HTML) is created in the body. In this way, after the static resources are loaded and executed, all H5 page contents will be automatically displayed in the DIV container. The specific execution code is as follows:

[0079]

[0081] Among them, the static resources of the H5 page are stored in the CDN.

[0082] Through the above steps, the H5 page corresponding to the second page data can be loaded and displayed in the preview area of ​​the setting platform.

[0083] In an embodiment of the present invention, first page data of a first page is obtained, the first page data is converted into second page data based on a set plug-in, and a second page corresponding to the second page data is rendered through a browser. Wherein, the first page represents a page in an application; the first page data represents the code corresponding to the RN components that make up the first page; the set plug-in is used to convert the code corresponding to the RN components into the code corresponding to the HTML components. In the embodiment of the present invention, the first page data is converted into second page data through the set plug-in. Therefore, only one set of RN components needs to be developed to display the electronic store interface in the e-commerce APP on the design platform, and there is no need to separately develop H5 components corresponding to the RN components on the design platform, reducing the development workload and improving the development efficiency.

[0084] Referring to Figure 5, in one embodiment, the page processing method further includes:

[0085] S501, obtaining third page data; the third page data represents operation data for operating on the HTML components that make up the second page in the browser.

[0086] The design platform can be run through a WEB browser. After opening the design platform through the WEB browser, the second page is displayed in the preview area of the design platform. The page content of the second page is the same as the electronic store interface on the e-commerce APP.

[0087] The user can perform design operations on the electronic store page displayed on the second page through the design platform to obtain the operation data input by the user on the design platform. The second page is an HTML page and is composed of HTML components. Designing the second page means operating on the HTML components that make up the second page.

[0088] Here, in one embodiment, operating the HTML component constituting the second page includes any of the following: Initialize HTML components; Select HTML component;

[0091] Add HTML component; Delete HTML components;

[0093] Adjust the order of HTML components;

[0094] Update HTML components.

[0095] In one embodiment, obtaining the third page data includes:

[0096] Obtain the third page data from the setting server.

[0097] Each time the user designs the electronic store interface on the design platform, the operation data is sent to the setting server for storage. In this way, after the user changes the electronic device, the operation data can also be obtained from the setting server to design the electronic store interface.

[0098] In actual application, the third page data can be loaded based on an asynchronous request of XML Http Request.

[0099] S502, updating the page content of the second page based on the third page data.

[0100] The H5 component data in the second page is updated according to the third page data, and then the browser re-renders to update the second page, so that the user can intuitively feel the visual effect of the designed e-commerce store page presented on the e-commerce APP.

[0101] In one embodiment, updating the page content of the second page based on the third page data includes:

[0102] S601, modify the second page data corresponding to the second page based on the third page data.

[0103] The user inputs operation data on the design platform to design the electronic store interface, and the final design result of the electronic store interface needs to be reflected in the preview area of ​​the design platform.In one embodiment, because the iframe page framework isolates the design platform and the preview area into a parent frame and a child frame, the two are different in terms of code modules and page sandboxes, so a communication module (communication layer) needs to be created to ultimately apply the design results to the preview area.

[0104] In practical applications, the communication module is implemented through an H5 page. First, a renderMessager object is registered in the window.parent object of the WEB browser, and then a sendMessage2APP method is created. The sendMessage2APP method includes two parameters, one is the msg operation information, which is an object; the other is {code:xxx, data:xxx}, where code represents the operation type and data represents the operation data required to update the second page. The second parameter is callback, which is the callback of the current operation.

[0105] The second page data corresponding to the second page is modified according to the third page data. First, the operation type corresponding to the third page data is determined, and the components constituting the second page are adjusted according to the operation type and the third page data.

[0106] With specific reference to Table 1, different operation types require different parameters, and the operation types generally include initializing a floor (fill), selecting a floor (select), adding a new floor (add), deleting a floor (del), adjusting the floor order (position), and updating the floor (update). Here, the floor refers to the H5 component of the second page, and each floor is set with a unique floorId.

[0107]

[0108] Table 1

[0110] When adding a new floor, you can select the H5 component displayed in the preview area and copy it, so that you can add a new H5 component to the second page.

[0111] As can be seen from the above table, the above six operations are all performed on the H5 components displayed in the preview area, and there is no need to newly develop H5 components on the design platform. Thus, the development of H5 components can be avoided, the development workload can be reduced, and the development efficiency can be improved.

[0112] S602. Render the second page corresponding to the modified second page data through the browser.

[0113] In practical applications, after the user performs a design operation on the design platform, the parameters required for the corresponding operation type are obtained. The parameters are the parameters corresponding to the design type in the above table. Then, the send Message2APP method is called to pass the operation type and the corresponding parameters to the second page in the preview interface. The second page modifies the component data in the second page through the third column of the above table, and finally renders the component data of the modified second page to implement the response to the user's design operation.

[0114] After completing the design of the e-commerce store page, create an array of update CallBacks as the return queue for the completion of the operation.

[0115] Refer to Figure 7. Figure 7 is a schematic diagram of the design process of an e-commerce store interface provided by an application embodiment of the present invention. The user performs a design operation on the design platform, and the design platform obtains the operation type and the corresponding operation data of the user. Figure 7 includes six operation types: initializing a floor (fill), selecting a floor (select), adding a new floor (add), deleting a floor (del), adjusting the floor order (position), and updating a floor (update). The operation data corresponding to the operation type is sent to the second page through the communication module. The second page updates the floor data according to the operation data, and the browser renders the floor data of the updated second page to implement the response to the user's design.Among them, the floor data refers to component data.

[0116] Referring to Figure 8, Figure 8 is a schematic diagram of the rendering process of an H5 page provided by an application embodiment of the present invention. The H5 page in Figure 8 is used to be displayed in the preview area of the design platform. In actual applications, on the APP side, component rendering is generally implemented through FlatList. FlatList is a high-performance list component provided by RN. When creating an H5 page, first create a View container to replace FlatList. The View container is the same as the DIV in HTML code and can wrap other components or be wrapped inside other components. The View container uses the vertical layout method of Flex layout to set the internal layout as a vertical list layout. Then render all the floor data from top to bottom. The View container does not set a fixed height, and its height is the sum of the heights of all internal floors. Among them, the floor refers to the component.

[0117] In Figure 8, the floor data array includes multiple floor data. The floor data is component data. Each floor data corresponds to a component data. Each floor data requires a View container as the outermost container. The View container needs to set the key attribute to avoid rendering engine warnings and diff algorithm comparison failures. The diff algorithm is used to calculate the changed part in the complex rendering node and then perform atomic update operations on this part without re-rendering the entire page. The key attribute value is the unique ID (floorId) of all floors. The View container contains 2 child nodes: 1. The component corresponding to the floor; 2. The mask.The mask size is the same as the size rendered by the floor. The mask has two states: the selected state (showing a semi-transparent color) and the unselected state (showing full transparency).

[0118] Then set the binding entry of the HTML container. This entry defines where the RN page of the e-commerce APP will be displayed in the H5 page after being recompiled through the RNW plugin. Select the element with the name of the J_app attribute through the web selector document.getElementById (the ID selector of the WEB browser), and then pass it as a parameter into the runApplication method of AppRegistry.

[0119] Compile the RN code project through the RNW plugin to output the JS and CSS files of the static resources. All components used by RN are in this code project, so the output static resources have the ability to render all RN components in H5. Finally, package and publish the static resources to the CDN.

[0120] After the user completes the design operation on the e-commerce store page, the RN rendering engine will call the component DidUpdate lifecycle method, and take out the head element in the update Call Back queue in the method. Since the design callbacks often involve the update of some UI on the design platform, this can avoid the problem of chaotic callback call order caused by the user's frequent designs in a short period of time, and ensure the normal order of incoming requests and callbacks. When a design operation request comes in, the request of the previous design operation may not have been completed yet. If the callback is stored as a global variable, the callback executed after the previous design operation may override the callback of this design operation.

[0121] Refer to Figure 9. Figure 9 is a schematic diagram of the design process of an e-commerce store interface provided by an application embodiment of the present invention.The design platform in Figure 9 includes a component panel and a preview area. The component panel provides component templates for users to design the e-commerce store interface, and the preview area is used to display the e-commerce store interface designed by users. The preview area is an iframe page structure. When it is necessary to load the e-commerce store interface in the e-commerce APP in the preview area of the design platform, static resources are obtained from the CDN to generate an H5 page, and the H5 page is loaded and displayed in the iframe page framework of the preview area of the design platform.

[0122] Referring to Figure 10, Figure 10 is a schematic diagram of the design process of an e-commerce store interface provided by an application embodiment of the present invention.

[0123] First, obtain the RN page in the e-commerce APP. The RN page is the e-commerce store interface. Process the RN page based on the RNW plugin. The RNW plugin is used to convert the code corresponding to the RN component into the code corresponding to the HTML component, store the static data in the code corresponding to the HTML component in the CDN, and at the same time create an H5 page through the WEB server. The H5 page references the static resources in the CDN, and the H5 page is displayed in the preview area of the design platform. Based on the above operations, the e-commerce store interface in the APP can be displayed in the design platform.

[0124] Then, the user can log in to the design platform through a browser, design the e-commerce store interface through the design platform. The design platform sends the operation data corresponding to the user's design operation to the H5 page in the preview area through the communication module. The H5 page updates the component data according to the operation data and then re-renders to implement the response to the user's design operation.

[0125] For the application embodiment of the present invention, only one set of RN components needs to be developed to implement the display of the e-commerce APP's electronic store interface on the design platform. When the user designs the electronic store interface on the design platform, there is no need for the design platform to newly develop H5 components. Thus, the development of H5 components can be avoided, the development workload can be reduced, and the development efficiency can be improved.

[0126] It should be understood that the magnitudes of the sequence numbers of the steps in the above embodiments do not mean the order of execution. The order of execution of each process should be determined according to its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present invention.

[0127] It should be understood that when used in this specification and the appended claims, the terms "comprising" and "including" indicate the presence of the described features, wholes, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components, and / or their combinations.

[0128] It should be noted that the technical solutions described in the embodiments of the present invention can be arbitrarily combined without conflict.

[0129] In addition, in the embodiments of the present invention, "first", "second", etc. are used to distinguish similar objects and do not necessarily need to describe a specific order or sequence.

[0130] Referring to Figure 11, Figure 11 is a schematic diagram of a page processing device provided by an embodiment of the present invention. As shown in Figure 11, the device includes: an acquisition module, a conversion module, and a rendering module.

[0131] an acquisition module, configured to acquire first page data of a first page; the first page is represented as a page in an application; the first page data represents a code corresponding to an RN component constituting the first page;

[0132] a conversion module, configured to convert the first page data into second page data based on a setting plug-in; the setting plug-in is configured to convert a code corresponding to an RN component into a code corresponding to a hypertext markup language HTML component;

[0133] A rendering module, used to render a second page corresponding to the second page data through a browser. The device further comprises:

[0135] a third page data acquisition module, used to acquire third page data; the third page data represents operation data of operating the HTML components constituting the second page in the browser;

[0136] An update module, used to update the page content of the second page based on the third page data. The rendering module is specifically used for:

[0138] Create a DIV container that is consistent with the size of the first page;

[0139] Create an iframe page frame in the DIV container;

[0140] Based on the iframe page framework and the second page data, the second page is rendered. The update module is specifically used for:

[0142] modifying the second page data corresponding to the second page based on the third page data;

[0143] The browser renders the second page corresponding to the modified second page data.

[0144] The rendering module is also used to obtain the second page data from the content distribution network CDN.

[0145] The operation on the HTML component constituting the second page includes any one of the following: Initialize HTML components; Select HTML component;

[0148] Add HTML component; Delete HTML components;

[0150] Adjust the order of HTML components;

[0151] Update HTML components.

[0152] The third page data acquisition module is used to obtain the third page data from the setting server.

[0153] In actual application, the acquisition module, conversion module and rendering module can be implemented by a processor in an electronic device, such as a central processing unit (CPU), a digital signal processor (DSP), a microcontroller unit (MCU) or a programmable gate array (FPGA).

[0154] It should be noted that: when the page processing device provided in the above embodiment performs page processing, only the division of the above modules is used as an example for explanation. In actual applications, the above processing can be assigned to different modules as needed, that is, the internal structure of the device is divided into different modules to complete all or part of the processing described above. In addition, the page processing device provided in the above embodiment and the page processing method embodiment belong to the same concept, and the specific implementation process is detailed in the method embodiment, which will not be repeated here.

[0155] Based on the hardware implementation of the above-mentioned program modules, and in order to implement the method of the embodiment of the present application, the embodiment of the present application also provides an electronic device.Figure 12 is a schematic diagram of the hardware composition structure of the electronic device according to the embodiment of the present application. As shown in Figure 12, the electronic device includes:

[0156] A communication interface capable of interacting with other devices such as network devices;

[0157] A processor connected to the communication interface to enable information interaction with other devices, and when used to run a computer program, execute the method provided by one or more technical solutions on the electronic device side. And the computer program is stored on the memory.

[0158] Of course, in actual application, each component in the electronic device is coupled together through a bus system. It can be understood that the bus system is used to realize the connection and communication between these components. In addition to the data bus, the bus system also includes a power bus, a control bus, and a status signal bus. However, for the sake of clear illustration, in Figure 12, various buses are all labeled as the bus system.

[0159] The memory in the embodiment of the present application is used to store various types of data to support the operation of the electronic device. Examples of these data include: any computer program for operating on the electronic device.

[0160] It can be understood that the memory can be a volatile memory or a non-volatile memory, or can include both volatile and non-volatile memories.Among them, the non-volatile memory can be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), a magnetic random access memory (FRAM), a flash memory, a magnetic surface memory, an optical disc, or a compact disc read-only memory (CD-ROM); the magnetic surface memory can be a disk memory or a tape memory. The volatile memory can be a random access memory (RAM), which is used as an external cache. By way of example but not limitation, many forms of RAM are available, such as static random access memory (SRAM), synchronous static random access memory (SSRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDRSDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM), direct memory bus random access memory (DRRAM). The memory 130 described in the embodiments of the present application is intended to include but is not limited to these and any other suitable types of memory.

[0161] The method disclosed in the above-mentioned embodiment of the present application can be applied to a processor or implemented by a processor. The processor may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above-mentioned method can be completed by an integrated logic circuit of hardware in the processor or an instruction in the form of software. The above-mentioned processor can be a general-purpose processor, a DSP, or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components, etc. The processor can implement or execute the disclosed methods, steps and logic block diagrams in the embodiments of the present application. The general-purpose processor can be a microprocessor or any conventional processor, etc. In combination with the steps of the method disclosed in the embodiment of the present application, it can be directly embodied as a hardware decoding processor to execute, or it can be executed by a combination of hardware and software modules in the decoding processor. The software module can be located in a storage medium, which is located in a memory, and the processor reads the program in the memory and completes the steps of the above-mentioned method in combination with its hardware.

[0162] Optionally, when the processor executes the program, it implements the corresponding processes implemented by the electronic device in the various methods of the embodiments of the present application. For the sake of brevity, they are not repeated here.

[0163] In an exemplary embodiment, the present application embodiment further provides a storage medium, namely a computer storage medium, specifically a computer readable storage medium, for example, including a first memory storing a computer program, and the above-mentioned computer program can be executed by a processor of an electronic device to complete the steps described in the aforementioned method. The computer readable storage medium can be a memory such as FRAM, ROM, PROM, EPROM, EEPROM, Flash Memory, magnetic surface storage, optical disk, or CD-ROM. In several embodiments provided in the present application, it should be understood that disclosed device, electronic equipment and method can be realized by other modes.The equipment embodiment described above is only schematic , for example, the division of the unit is only a kind of logical function division, and other division modes can be arranged during actual implementation, such as: multiple units or components can be combined, or can be integrated into another system, or some features can be ignored, or do not execute.In addition, the coupling, direct coupling or communication connection of each component shown or discussed can be through some interfaces, and the indirect coupling or communication connection of equipment or unit can be electrical, mechanical or other forms.

[0165] The units described above as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units; some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0166] In addition, all functional units in the embodiments of the present application can be integrated into one processing unit, or each unit can be a separate unit, or two or more units can be integrated into one unit; the above-mentioned integrated units can be implemented in the form of hardware or in the form of hardware plus software functional units.

[0167] A person of ordinary skill in the art can understand that all or part of the steps of implementing the above method embodiment can be completed by hardware related to program instructions, and the aforementioned program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps of the above method embodiment; and the aforementioned storage medium includes: various media that can store program codes, such as mobile storage devices, ROM, RAM, magnetic disks or optical disks. Or, if the above- mentioned integrated unit of the present application is realized in the form of software function module and is sold or used as an independent product, it can also be stored in a computer readable storage medium. Based on such understanding, the technical scheme of the embodiment of the present application is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including some instructions to make a computer device (can be a personal computer, server or network equipment, etc.) perform all or part of the method described in each embodiment of the present application. And the aforementioned storage medium includes: various media that can store program code such as mobile storage device, ROM, RAM, magnetic disk or optical disk.

[0169] It should be noted that the technical solutions recorded in the embodiments of the present application can be combined arbitrarily without conflict.

[0170] In addition, in the examples of the present application, "first", "second", etc. are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence.

[0171] The above is only a specific implementation method of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be covered by the protection scope of the present application.Therefore, the protection scope of the present application should be based on the protection scope of the claims.< / iframe>

Claims

1. A page processing method, characterized in that: The method comprises: Acquire first page data of a first page; the first page is represented as a page in an application; the first page data represents a code corresponding to an RN component constituting the first page; Converting the first page data into the second page data based on a setting plug-in; the setting plug-in is used to convert the code corresponding to the RN component into the code corresponding to the Hypertext Markup Language HTML component; Rendering, by a browser, a second page corresponding to the second page data, wherein the second page is rendered based on an iframe page frame and the second page data; Wherein, the method further comprises: Acquire third page data; the third page data represents operation data of the user operating the HTML components constituting the second page in the browser; modifying the second page data corresponding to the second page based on the third page data; The browser renders the second page corresponding to the modified second page data.

2. The method according to claim 1, characterized in that: The method further comprises: Create a DIV container that matches the size of the first page; Create an iframe page frame in the DIV container.

3. The method according to claim 1, characterized in that When rendering the second page corresponding to the second page data through the browser, the method further includes: The second page data is obtained from a content delivery network CDN.

4. The method according to claim 1, characterized in that: The operation on the HTML component constituting the second page includes any one of the following: Initialize HTML components; Select the HTML component; Added HTML component; Remove HTML components; Adjust the order of HTML components; Updates the HTML component.

5. The method according to claim 1, characterized in that The obtaining of the third page data includes: The third page data is obtained from the setting server.

6. A page processing device, characterized in that: include: An acquisition module, used for acquiring first page data of a first page; The first page is represented as a page in an application; the first page data represents the code corresponding to the RN component constituting the first page; A conversion module, used to convert the first page data into second page data based on a setting plug-in; the setting plug-in is used to convert the code corresponding to the RN component into the code corresponding to the hypertext markup language HTML component; A rendering module, used for rendering a second page corresponding to the second page data through a browser, where the second page is rendered based on an iframe page frame and the second page data; The processing device also includes: A third page data acquisition module is used to acquire third page data; the third page data represents the operation data of the user operating the HTML components constituting the second page in the browser; An updating module is used to modify the second page data corresponding to the second page based on the third page data, and render the second page corresponding to the modified second page data through the browser.

7. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the page processing method according to any one of claims 1 to 6 is implemented.

8. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, wherein the computer program includes program instructions, and when the program instructions are executed by a processor, the processor executes the page processing method according to any one of claims 1 to 6.

Images