Mini program cross-terminal application method, related device, and computer storage medium

Abstract

The present application provides a method for cross-terminal application of a small program, a related device, and a computer storage medium, the method may include: obtaining multiple pages contained in a target small program; determining the page node information, node display information, and logic management information of each page; converting the code corresponding to the page node information, node display information, and logic management information of each page into an identifiable code; generating the page node information, node display information, and logic management information corresponding to the second application based on the identifiable code; based on the page node information, node display information, and logic management information of the second application, generating the pages corresponding to the multiple pages contained in the target small program in the second application. The embodiment of the present application can realize one code for multiple terminals, that is, different platforms use a set of codes to realize the relevant functions of the target small program.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a mini-program cross-terminal application method, related devices, and computer storage media. Background Art

[0002] The concept of "use it and go" has triggered a wave of mini programs. The excellent user experience, convenient dissemination methods, and rich component application programming interfaces (APIs) have brought about improved development efficiency, attracting a large number of mini program fans. However, the design of mini programs does not fully follow the specifications of application pages such as browsers or other applications, resulting in the inability to freely convert between the mini program ecosystem and the traditional web development ecosystem. Summary of the invention

[0003] The present application provides a mini-program cross-terminal application method, related devices, and computer storage media.

[0004] In a first aspect, the present application provides a mini-program cross-terminal application method, the method comprising:

[0005] Acquire multiple pages included in a target applet; the target applet is installed in a first application program;

[0006] Determine the page node information, node display information, and logic management information of each page;

[0007] Convert the codes corresponding to the page node information, node display information, and logic management information of each page into identifiable codes;

[0008] generating page node information, node display information, and logic management information corresponding to a second application based on the identifiable code; the first application is different from the second application;

[0009] Based on the page node information, node display information, and logic management information of the second application, the corresponding pages of the multiple pages included in the target mini-program in the second application are generated.

[0010] In a second aspect, the present application provides a mini-program cross-terminal application device, the device comprising:

[0011] An acquisition module, used to acquire multiple pages included in a target applet; the target applet is installed in a first application;

[0012] A determination module, used to determine page node information, node display information, and logic management information of each page;

[0013] A conversion module, used to convert the codes corresponding to the page node information, node display information, and logic management information of each page into identifiable codes;

[0014] A first generating module, configured to generate page node information, node display information, and logic management information corresponding to a second application based on the identifiable code; the first application is different from the second application;

[0015] The second generation module is used to generate corresponding pages of the multiple pages included in the target mini-program in the second application based on the page node information, node display information, and logic management information of the second application.

[0016] In a third aspect, one or more embodiments of the specification provide a computer storage medium, wherein the computer storage medium stores a plurality of instructions, wherein the instructions are suitable for being loaded by a processor and executing the above-mentioned method steps.

[0017] In a fourth aspect, the present application provides an electronic device, which may include: a processor and a memory;

[0018] The memory stores a computer program, and the computer program is suitable for being loaded by the processor and executing the above method steps.

[0019] The beneficial effects brought about by the technical solutions provided by some embodiments of the present application include at least:

[0020] The embodiment of the present application obtains multiple pages contained in the target applet; determines the page node information, node display information, and logic management information of each page; converts the code corresponding to the page node information, node display information, and logic management information of each page into an identifiable code; generates page node information, node display information, and logic management information corresponding to the second application based on the identifiable code; based on the page node information, node display information, and logic management information of the second application, generates the pages corresponding to the multiple pages contained in the target applet in the second application. Thus, the embodiment of the present application can convert various information in the target applet page into page information that can be directly generated by the applet in the browser or other app platform through the identifiable code, so that one code can be realized for multiple terminals, that is, different platforms use a set of codes to realize the relevant functions of the target applet. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] In order to more clearly illustrate the technical solutions in the present application, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0022] Figure 1a A schematic diagram of a small program page provided for this application;

[0023] Figure 1b A schematic diagram of a web page of a browser provided for this application;

[0024] Figure 2 A flowchart of a mini-program cross-terminal application method provided for this application;

[0025] Figure 3 A flowchart of another mini-program cross-terminal application method provided for this application;

[0026] Figure 4 A schematic diagram of the compilation process of the first identifiable code provided by the present application;

[0027] Figure 5 A schematic diagram of the compilation process of the second identifiable code provided by the present application;

[0028] Figure 6 A diagram showing the life cycle correspondence between the mini program and the React code

[0029] Figure 7 An application scenario diagram of a mini-program cross-terminal application method provided in this application;

[0030] Figure 8 A flowchart of another mini-program cross-terminal application method provided by this application;

[0031] Fig. 9 A schematic diagram of the process of generating a web page for a mini-program cross-terminal application method provided in this application;

[0032] Fig.10 A schematic diagram of the structure of a mini-program cross-terminal application device provided in an embodiment of the present application;

[0033] Fig.11 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0034] When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. Instead, they are only examples of devices and methods consistent with some aspects of the present application as detailed in the attached claims.

[0035] In the description of the present application, it should be understood that the terms "first", "second", etc. are used for descriptive purposes only and should not be understood as indicating or implying relative importance. For those of ordinary skill in the art, the specific meanings of the above terms in the present application can be understood according to the specific circumstances. In addition, in the description of the present application, unless otherwise specified, "multiple" refers to two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the objects associated before and after are in an "or" relationship.

[0036] See also Figure 1a and Figure 1b . Figure 1a It shows a small program in an application (Application, APP) for business scenarios such as ordering takeout. Figure 1b The web page generated when the applet for the business scenario of ordering takeout is placed on the browser is shown. It can be observed that Figure 1a The transaction scenario functions (e.g., search, comprehensive sorting) and transaction scenario categories (takeaway, fruit and vegetable, beverage, etc.) of the small and medium-sized programs are converted to Figure 1b It is understandable that due to different display sizes, Figure 1b The web page will display more transaction scenario functions (for example, flavor, minimum delivery price, etc.) and transaction scenario categories (for example, popular restaurants, whether they are open, etc.).

[0037] It is understandable that since the design specifications of mini programs do not follow the Web specifications, there are differences in the codes used between them. In addition, when other apps need to call mini programs for transaction scenarios such as booking takeout through local pages, the codes used on the container side between them also need to be converted. Therefore, it is necessary to write multiple sets of corresponding codes for different container sides to support, which will lead to problems such as low R&D efficiency and exponentially increased maintenance costs.

[0038] In order to smooth out the development technology differences between mini programs and web pages, a cross-end solution for mini programs on different platforms has emerged. Specifically, this application can be converted into applications for various platforms by writing a set of common codes, such as mini programs, Web H5, React Native (RN for short), etc. Among them, mini program applications are applications developed based on the development framework, components, and APIs provided by the container side, which are limited to being placed in designated containers. Web H5 applications are web applications developed based on Html5 and can be placed in any browser. RN is a cross-platform mobile application development framework open sourced by Facebook in April 2015. It uses Javascript and supports two major platforms, iOS and Android.

[0039] Next, combine Figure 1a The page diagram of the mini program provided and Figure 1b The web page diagram of the browser provided is used to introduce the cross-terminal application method of the mini-program provided in this application.

[0040] In this application, Figure 2 As shown in FIG, a flowchart of a method for applying a mini program across terminals is provided. Figure 2 As shown, the mini program cross-terminal application method may include the following steps:

[0041] Step 201, obtaining multiple pages included in the target applet.

[0042] Among them, the target applet in the embodiment of the present application is installed in the first application.

[0043] It is understandable that a mini program is an application that can be used without downloading and installing.

[0044] Specifically, in the embodiment of the present application, the target applet is used to represent other applications that can be used in the first application, for example, an applet that uses the ordering function in an instant messaging application.

[0045] Furthermore, users can also access multiple different pages through the target applet to meet their needs. For example, Figure 1a or click Figure 1a The merchant (McDelivery) shown on the page goes to the specific page of the merchant to place an order.

[0046] Step 202, determining the page node information, node display information, and logic management information of each page.

[0047] Among them, the page node information in the embodiment of the present application is used to represent the information that the user can directly observe, such as text and pictures in the page. The node display information is used to represent the size, color and other information of the text and pictures in the page. The logical management information is used to represent the initialization, rendering, update, destruction and other information of the page.

[0048] For example, Figure 1a The "vegetables and fruits" and their logo are the page node information, the size and color of the "vegetables and fruits" text are the node display information, and the operations that can be performed on the nodes in the page, such as clicking, sliding or scrolling, are the logical management information.

[0049] Step 203: convert the codes corresponding to the page node information, node display information, and logic management information of each page into identifiable codes.

[0050] It is understandable that the embodiment of the present application requires a packaging tool to combine each module of the front-end application into one or more software package bundles, but the packaging tool may only recognize a certain language, so the compiled language needs to be converted. For example, webpack is a static module packaging tool for javascript applications, and loader is the core module of webpack. Webpack can only understand JavaScript and json files, and other files need to be converted by corresponding loaders. Specifically, loader plays the role of a translator, converting other types of files into file content (JavaScript) that webpack can recognize.

[0051] For example, the tag language currently used for framework design in Alipay Mini Program is AXML, which can describe the page structure of the Mini Program. Therefore, if the design language used by other APPs is not AXML, they cannot be recognized. Therefore, it is necessary to use the loader to convert the code in Alipay Mini Programs and other Mini Programs into code that can be directly recognized by the bank APP.

[0052] Possibly, the identifiable code in the embodiments of the present application may be React or Vue code. Among them, React code is a JavaScript library that can be used to build a user interface. Specifically, various types of parameters can be passed in React, such as declarative code, and then a page can be rendered, or it can be a static HTML DOM element, or dynamic variables can be passed, or even interactive application components. Vue is also a progressive JavaScript framework for building user interfaces.

[0053] Step 204 : Generate page node information, node display information, and logic management information corresponding to the second application based on the identifiable code.

[0054] Among them, the first application and the second application in the embodiment of the present application are different.

[0055] Specifically, the second application in the embodiment of the present application can be a browser or other application of other electronic devices, or a browser or other application of the same electronic device. For example, the second application can be a merchant's ordering program, such as an automatic ordering machine in a restaurant, or a user's tablet computer or other device, or other APPs on the user's mobile phone, such as a shopping APP.

[0056] Step 205 , based on the page node information, node display information, and logic management information of the second application, generate corresponding pages in the second application for the multiple pages included in the target mini-program.

[0057] It is understandable that due to reasons such as the size of different electronic devices, the page node information and node display information of the page in the first application in the embodiment of the present application corresponding to the page node information and node display information of the page in the second application may be the same or different.

[0058] In a specific example, users need to participate in a takeaway ordering promotion from the APP of Bank Z. If they participate in the discount activity directly from the bank's APP, the bank's APP must be able to display pages for takeaway and other transaction scenarios on its client. Therefore, the loader module in the wepack packaging tool is needed to convert the code in the Alipay applet into code that can be directly recognized by the bank's APP. Furthermore, after determining the page node information, node display information, and logical management information of the page based on the recognizable code, the corresponding pages in the bank's APP can be generated for the multiple pages contained in the Alipay ordering applet.

[0059] The embodiment of the present application obtains multiple pages contained in the target applet; determines the page node information, node display information, and logic management information of each page; converts the code corresponding to the page node information, node display information, and logic management information of each page into an identifiable code; generates page node information, node display information, and logic management information corresponding to the second application based on the identifiable code; based on the page node information, node display information, and logic management information of the second application, generates the pages corresponding to the multiple pages contained in the target applet in the second application. Thus, the embodiment of the present application can convert various information in the target applet page into page information that can be directly generated by the applet in the browser or other app platform through the identifiable code, so that one code can be realized for multiple terminals, that is, different platforms use a set of codes to realize the relevant functions of the target applet.

[0060] The identifiable code in the present application may include a first identifiable code, a second identifiable code, and a third identifiable code. Figure 3 As shown in FIG, a flowchart of a method for applying a mini program across terminals is provided. Figure 3 As shown, the mini program cross-terminal application method may include the following steps:

[0061] Step 301, obtaining multiple pages contained in the target applet.

[0062] Specifically, step 301 is consistent with step 201 and will not be repeated here.

[0063] Step 302, determining the page node information, node display information, and logic management information of each page.

[0064] Specifically, step 302 is consistent with step 202 and will not be described again here.

[0065] Step 303: convert the page node information of each page into a first identifiable code, convert the node display information of each page into a second identifiable code; and convert the logic management information of each page into a third identifiable code.

[0066] Specifically, the first identifiable code in the embodiment of the present application is used to convert the code of the page node information of the page in the mini program into a code that can be recognized by the web page or other APP.

[0067] Further, the embodiment of the present application can generate a document tree based on the page node information of each page. Generate a first syntax tree based on the node type and node attributes of each node in the document tree. Generate a first identifiable code based on the first syntax tree. Among them, the document tree may include multiple levels. Each level may include at least one node, and each node may include a node type and a node attribute. The first syntax tree is used to convert the syntax used by the applet into the syntax used by the second application.

[0068] For example, the node type may be: loop node ForElementNode (a: for node), conditional node IfElementNode (a: if node), etc. The node attribute may be: AttributeNode (normal attribute), EventAttributeNode (event attribute), etc.

[0069] Possibly, the applet in the first application in the embodiment of the present application may compile the page node information using an axml file.

[0070] Specifically, see Figure 4 , Figure 4 The compilation process of axml file to React code is shown. Specifically, the embodiment of the present application mainly compiles the axml syntax in the applet into the render function in jsx. First, the embodiment of the present application can convert the axml file into an xml document tree through sax (xml parser). Then convert the xml document tree into the ast syntax tree of the applet. Finally, use the babel generate conversion tool to convert the applet ast syntax tree into the React rendering function.

[0071] It can be understood that the XML document tree first edits the node information such as text and pictures in the page into a tree structure. Then, based on the type and attribute of each node in the tree structure, an ast syntax tree is generated, which can realize the interchange of the syntax of the axml file and the syntax of the jsx code.

[0072] Furthermore, a second syntax tree is determined based on the node display information of each page, and a second identifiable code is generated based on the second syntax tree, wherein the second syntax tree is used to convert pixels in the node display information into pixels in the page node of the second application.

[0073] Possibly, the applet in the first application program in the embodiment of the present application may use an acss file to compile the node display information.

[0074] Specifically, see Figure 5 , Figure 5The compilation process of the acss file shown in FIG. 1 uses postcss to complete the compilation from acss to CSS, that is, the pixels in the acss file are converted into pixels in the CSS file through the ast syntax tree. In addition, in order to distinguish the tag names between different applications, the tag styles are also renamed.

[0075] For example, the embodiment of the present application can use the postcss-rpxtorem plug-in to compile the mini program pixel unit rpx into rem (the font size of the root node in the ast syntax tree defaults to 16px). If the width of the node element in the page of the mini program is a, the calculated rem value is a / 16. Furthermore, assuming that the corresponding label of the node in the mini program is view, the corresponding label can be set in the React code as Tiga-view.

[0076] Furthermore, the logic management information in the embodiment of the present application may include: page life cycle and page operation information. The page life cycle is used to indicate the preset time for the initialization, rendering, data update, re-rendering, destruction, etc. of the page. The page operation information is used to indicate the operation input by the user (for example, clicking a node, etc.) or the operation preset by the backend (for example, startup advertisement, etc.).

[0077] Specifically, the embodiment of the present application can determine multiple component modules based on the page life cycle. Determine the correspondence between the page operation information and the multiple components in each component module. Generate a third identifiable code based on the multiple component modules and the correspondence. Among them, the page life cycle in the mini program and the life cycle of each component module are aligned with each other; each component module can include multiple pre-set components.

[0078] It is understandable that in the embodiment of the present application, each page in the mini program can be regarded as a component module (large component), and the components in the mini program page can be regarded as components in the component module (small components). Specifically, each small component can implement a function, for example, a search function in a page.

[0079] See also Figure 6 , Figure 6The diagram shows the life cycle correspondence between the mini program and the React code. From the diagram, we can see that the initialization (Onlinit and Constructor) phase, rendering completion (didMount and componentDidMount) phase, update completion (didUpdate and componentDidUpdate) phase, and page uninstallation and destruction (didUnmount and componentWillUnmount) phase between the mini program and the React code correspond to each other, that is, the execution time is the same. Therefore, each updated page in the mini program can be regarded as a component module.

[0080] It is understandable that although the life cycles of the mini program and React are named differently, the basic triggering timing can be mapped one to one. The embodiment of the present application pre-maps the life cycle in the mini program Component, and the mapping relationship is shown in the figure above. When the compiled React code is running, the mini program Component life cycle function will be called in the react life cycle. For example, when React executes to the constructor function, it calls the onInit function to smooth out the differences in the life cycle.

[0081] Furthermore, the operation information in the embodiments of the present application may include: event information and data-driven information. Among them, event information is used to represent the user's click, slide, scroll and other operation information. Data-driven information is used to represent information such as back-end settings (for example, an advertisement that automatically ends in 5S displayed on the front end) or data entered by the user.

[0082] Specifically, the embodiments of the present application can determine the functions implemented by each component in each component module by determining the correspondence between event information and data-driven information and multiple components in the component module.

[0083] Possibly, the mini-program in the first application in the embodiment of the present application can use a js file to compile the logic management information.

[0084] Specifically, the embodiment of the present application compiles the js file that carries the mini-program page Page or component Component into a module Js Component function exported in the form of es6 module, so as to export the page Page or component Component in the form of components (large components + small components), which can then be referenced by the js files of other APPs or web pages.

[0085] Furthermore, the third identifiable code in the embodiment of the present application may include an application programming interface code.

[0086] Specifically, the embodiments of the present application can implement the functions of each component corresponding to the event information by calling the application programming interface code corresponding to the event information; and implement the functions of each component corresponding to the data-driven information based on the preset drive settings corresponding to the data-driven information.

[0087] It is understandable that the embodiments of the present application can implement corresponding functions by calling predefined functions in the application programming interface API or HTTP interface. Data-driven information refers to data changes pre-set by the backend, such as pop-up ads, automatic page jumps, etc.

[0088] Step 304, generating page node information corresponding to the second application based on the first identifiable code; generating node display information corresponding to the second application based on the second identifiable code; generating logic management information corresponding to the second application based on the third identifiable code.

[0089] It is understandable that before the embodiment of the present application generates the page node information corresponding to the second application based on the first identifiable code, it is also necessary to register (registerEvent) and bind (bindEvents) the event corresponding to the node in the event database. For example, the event onTap is converted into $rm.registerEvent([{name:'tap'}], tiga_node_id). Among them, tiga_node_id is the id of the current node, and all node ids in the event database are unique. In this way, the tap event is registered for the current node through registerEvent at runtime. Because of the uniqueness of tiga_node_id, an event list can be saved for each different node, and then the event is bound to the node through addEventListener in bindEvents. The bindEvents method is called in each component componentDidMount and componentDidUpdate to ensure that the event is bound to the node in real time.

[0090] Step 305 , based on the page node information, node display information, and logic management information of the second application, generate corresponding pages in the second application for the multiple pages included in the target applet.

[0091] Furthermore, the embodiments of the present application can trigger the page rendering function of the second application based on any one or more of the page life cycle, event information, and data-driven information, obtain the page to be generated, and based on the page node information and node display information of the page to be generated, generate the corresponding page information of the multiple pages contained in the mini-program in the second application.

[0092] See also Figure 7 After the mini-program code in the embodiment of the present application is compiled, the axml, acss, js and other files are compiled into modular React code. Among them, axml is converted into jsx code, js is converted into Js Component function, and acss is converted into css. When Tiga is running, it mainly solves the differences that cannot be smoothed out during the compilation phase, such as event management (such as registration, distribution), life cycle alignment, data-driven, etc. Figure 7 It can be observed that React BaseComponent can manage the events and life cycle of the entire runtime Component. During the life cycle, an instance of Js Component will be dynamically generated according to the input parameters of the mini-program Component (i.e. the pre-set parameters). Then the data drive is output in JSComponent. After React Base Component detects the data change, it triggers rendering through forceUpdate. At the same time, the axml file will be compiled into a React rendering function during compilation. This function only accepts one data, which can be used to drive the rendering of HTML.

[0093] Each instance of a mini-app component (JS Component) corresponds to a React BaseComponent. Data-driven (setData) is triggered in the JS Component. Tiga maintains a data object in the React BaseComponent. After each setData, the React Base Component will update the data object and call the forceUpdate method to force the re-rendering of the component in the React code.

[0094] Therefore, the embodiment of the present application can realize the corresponding conversion of different nodes in the page by converting different codes in the identifiable code respectively. And further set the life cycle, event management, and data drive of the page so that the mini-programs and web pages in other APPs can also realize the corresponding functions. This avoids the problem of needing multiple sets of code support when the same transaction is placed on different container ends such as web pages and mini-programs, effectively improving R&D efficiency and saving maintenance costs.

[0095] The identifiable code in this application may also include: a page routing code. Figure 8 As shown in FIG, a flowchart of a method for applying a mini program across terminals is provided. Figure 8 As shown, the mini program cross-terminal application method may include the following steps:

[0096] Step 801, obtaining multiple pages contained in the target applet.

[0097] Specifically, step 801 is consistent with step 301 and will not be repeated here.

[0098] Step 802, determining the page node information, node display information, and logic management information of each page.

[0099] Specifically, step 802 is consistent with step 302 and will not be repeated here.

[0100] Step 803, converting the page node information of each page into a first identifiable code, converting the node display information of each page into a second identifiable code; and converting the logic management information of each page into a third identifiable code.

[0101] Specifically, step 803 is consistent with step 303 and will not be repeated here.

[0102] Step 804, generating page node information corresponding to the second application based on the first identifiable code; generating node display information corresponding to the second application based on the second identifiable code; generating logic management information corresponding to the second application based on the third identifiable code.

[0103] Specifically, step 804 is consistent with step 304 and will not be described again here.

[0104] Step 805 , based on the page node information, node display information, and logic management information of the second application, generate the corresponding pages of the multiple pages included in the target applet in the second application.

[0105] Specifically, step 805 is consistent with step 305 and will not be repeated here.

[0106] Step 806: managing the execution order of the page information of the second application based on the page routing code.

[0107] The page routing code in the embodiment of the present application is used to support page keeping alive. For example, after a user opens web page A in a browser, he opens web page B. Web page A remains open and will not be automatically destroyed. Fig. 9 , Fig. 9The figure shows the generation process of a web page: after the mini program code is compiled by the compiler (Tiga-Compiler), axml, acss, js and other files are compiled into modular React code. Among them, axml is converted into jsx code, js is converted into Js Component function, and acss is converted into css. The compiled React code also includes four modules, namely Tiga-runtime (life cycle), Tiga-Api (application interface), Tiga-Components (components), and Tiga-Router (page routing). Tiga-Runtime provides the runtime function of the mini program in HTML5 and provides a complete life cycle implementation, event registration and distribution, data processing, etc. Tiga-Api is based on the web ecology and provides a series of functions that can be realized by Api in Alipay mini program. Tiga-Components refers to components natively provided by Alipay mini program, such as view view, button button, scroll view scroll-view, etc. It can be understood that the essence of Tiga is to convert the page Page and component Component of the mini program into React Component, and Tiga-Router is responsible for page routing management, thereby realizing a complete React single-page application.

[0108] Thus, the embodiment of the present application can convert a single page of the applet to a single page in the browser. Combined with the page routing code, the page stack data of the entire application is maintained, thereby realizing the creation, hiding, display, and destruction of management pages. In addition, the embodiment of the present application can further achieve the effect of keeping the page alive by saving the rendering state of the component, thereby providing a complete applet development and usage experience in the browser.

[0109] The above is a description of a specific embodiment of the specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0110] Fig.10 Schematic diagram of the structure of the mini program cross-terminal application device provided by this application. The device is used in a server and executes the mini program cross-terminal application method of any of the above embodiments of this specification. Fig.10 As shown, the mini program cross-terminal application device may include:

[0111] The acquisition module 11 is used to acquire multiple pages included in the target applet; the target applet is installed in the first application program;

[0112] A determination module 12, used to determine page node information, node display information, and logic management information of each page;

[0113] The conversion module 13 is used to convert the codes corresponding to the page node information, node display information, and logic management information of each page into identifiable codes;

[0114] A first generating module 14, configured to generate page node information, node display information, and logic management information corresponding to a second application based on the identifiable code; the first application is different from the second application;

[0115] The second generating module 15 is used to generate corresponding pages of the plurality of pages included in the target mini-program in the second application based on the page node information, node display information, and logic management information of the second application.

[0116] The embodiment of the present application obtains multiple pages contained in the target applet; determines the page node information, node display information, and logic management information of each page; converts the code corresponding to the page node information, node display information, and logic management information of each page into an identifiable code; generates page node information, node display information, and logic management information corresponding to the second application based on the identifiable code; based on the page node information, node display information, and logic management information of the second application, generates the pages corresponding to the multiple pages contained in the target applet in the second application. Thus, the embodiment of the present application can convert various information in the target applet page into page information that can be directly generated by the applet in the browser or other app platform through the identifiable code, so that one code can be realized for multiple terminals, that is, different platforms use a set of codes to realize the relevant functions of the target applet.

[0117] In some embodiments, the identifiable code includes a first identifiable code, a second identifiable code, and a third identifiable code;

[0118] The conversion module 13 includes:

[0119] A first conversion unit, configured to convert the page node information of each page into the first identifiable code;

[0120] A second conversion unit, configured to convert the node display information of each page into the second identifiable code;

[0121] A third conversion unit, configured to convert the logic management information of each page into the third identifiable code;

[0122] The first generating module 14 includes:

[0123] A first generating unit, configured to generate page node information corresponding to the second application based on the first identifiable code;

[0124] A second generating unit, configured to generate node display information corresponding to the second application based on the second identifiable code;

[0125] The third generating unit is used to generate logic management information corresponding to the second application based on the third identifiable code.

[0126] In some embodiments, the first conversion unit includes:

[0127] A document tree generation subunit, configured to generate a document tree based on the page node information of each page; wherein the document tree includes a plurality of levels; wherein each level includes at least one node, and each node includes a node type and a node attribute;

[0128] A first syntax tree generating unit, configured to generate a first syntax tree based on a node type and a node attribute of each node in the document tree; wherein the first syntax tree is used to convert a syntax used by the applet into a syntax used by the second application program;

[0129] The first identifiable code generating subunit is configured to generate the first identifiable code based on the first syntax tree.

[0130] In some embodiments, the second conversion unit includes:

[0131] A second syntax tree determination subunit, configured to determine a second syntax tree based on the node display information of each page; wherein the second syntax tree is used to convert pixels in the node display information into pixels in the page node of the second application;

[0132] The second identifiable code generating subunit is configured to generate the second identifiable code based on the second syntax tree.

[0133] In some implementations, the logic management information includes: page life cycle and page operation information;

[0134] The third conversion unit comprises:

[0135] A plurality of component module determination subunits, used to determine a plurality of component modules based on the page life cycle; wherein the page life cycle in the mini program and the life cycle of each component module are aligned with each other; each component module includes a plurality of pre-set components;

[0136] A corresponding relationship determination subunit, used to determine the corresponding relationship between the page operation information and the multiple components in each component module;

[0137] The third identifiable code generating subunit is configured to generate the third identifiable code based on the multiple component modules and the corresponding relationship.

[0138] In some implementations, the page operation information includes: event information and data-driven information;

[0139] The corresponding relationship determination subunit is specifically used to: determine the corresponding relationship between the event information and the data driving information and the multiple components in the component module;

[0140] After the correspondence determination subunit, the device further comprises: a component function realization subunit, which is used to determine the functions realized by each component in each component module.

[0141] In some embodiments, the third identifiable code comprises an application programming interface code;

[0142] The component function implementation subunit is specifically used for:

[0143] The application programming interface code corresponding to the event information is called to implement the functions of each component corresponding to the event information; and the functions of each component corresponding to the data driving information are implemented based on the preset driving settings corresponding to the data driving information.

[0144] In some implementations, the second generating module 15 includes:

[0145] an obtaining unit, configured to trigger a page rendering function of the second application program based on any one or more of the page life cycle, the event information, and the data-driven information, and obtain a page to be generated;

[0146] The page information generating unit is used to generate the corresponding page information of the multiple pages included in the mini program in the second application program based on the page node information of the page to be generated and the node display information.

[0147] In some implementations, the identifiable code further includes: a page routing code;

[0148] After the second generating module 15, the device further includes:

[0149] A management module is used to manage the execution order of the page information of the second application based on the page routing code.

[0150] It should be noted that the mini-program cross-terminal application device provided in the above embodiment only uses the division of the above-mentioned functional modules as an example when executing the mini-program cross-terminal application method. In actual applications, the above-mentioned functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. In addition, the mini-program cross-terminal application device provided in the above embodiment and the mini-program cross-terminal application method embodiment belong to the same concept, and the implementation process thereof is detailed in the method embodiment, which will not be repeated here.

[0151] The above serial numbers of this application are for description only and do not represent the advantages or disadvantages of the embodiments.

[0152] See also Fig.11 , which is a schematic diagram of the structure of an electronic device provided in this application. Fig.11 As shown, the electronic device 110 may include: at least one processor 111 , at least one network interface 114 , a user interface 113 , a memory 115 , and at least one communication bus 112 .

[0153] The communication bus 112 is used to realize the connection and communication between these components.

[0154] The user interface 113 may include a display screen (Display) and a camera (Camera). The optional user interface 113 may also include a standard wired interface and a wireless interface.

[0155] The network interface 114 may optionally include a standard wired interface or a wireless interface (such as a WI-FI interface).

[0156] Among them, the processor 111 may include one or more processing cores. The processor 111 uses various interfaces and lines to connect various parts of the entire electronic device 110, and executes various functions and processes data of the electronic device 110 by running or executing instructions, programs, code sets or instruction sets stored in the memory 115, and calling data stored in the memory 115. Optionally, the processor 111 can be implemented in at least one hardware form of digital signal processing (Digital Signal Processing, DSP), field programmable gate array (Field-Programmable Gate Array, FPGA), and programmable logic array (Programmable Logic Array, PLA). The processor 111 can integrate one or a combination of a central processing unit (Central Processing Unit, CPU), a graphics processing unit (Graphics Processing Unit, GPU) and a modem. Among them, the CPU mainly processes the operating system, user interface and application programs; the GPU is responsible for rendering and drawing the content to be displayed on the display screen; the modem is used to process wireless communications. It can be understood that the above-mentioned modem may not be integrated into the processor 111, and it can be implemented separately through a chip.

[0157] Among them, the memory 115 may include a random access memory (Random Access Memory, RAM) and may also include a read-only memory (Read-Only Memory). Optionally, the memory 115 includes a non-transitory computer-readable storage medium. The memory 115 can be used to store instructions, programs, codes, code sets or instruction sets. The memory 115 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as a touch function, a sound playback function, an image playback function, etc.), instructions for implementing the above-mentioned various method embodiments, etc.; the data storage area may store data involved in the above-mentioned various method embodiments, etc. The memory 115 may also be optionally at least one storage device located away from the aforementioned processor 111. As Fig.11 As shown, the memory 115 as a computer storage medium may include an operating system, a network communication module, a user interface module, and a small program cross-terminal application program.

[0158] Acquire multiple pages included in a target applet; the target applet is installed in a first application program;

[0159] Determine the page node information, node display information, and logic management information of each page;

[0160] Convert the codes corresponding to the page node information, node display information, and logic management information of each page into identifiable codes;

[0161] generating page node information, node display information, and logic management information corresponding to a second application based on the identifiable code; the first application is different from the second application;

[0162] Based on the page node information, node display information, and logic management information of the second application, the corresponding pages of the multiple pages included in the target mini-program in the second application are generated.

[0163] In some embodiments, the identifiable code includes a first identifiable code, a second identifiable code, and a third identifiable code;

[0164] When the processor 111 converts the code corresponding to the page node information, node display information, and logic management information of each page into an identifiable code, the processor 111 specifically performs:

[0165] Converting the page node information of each page into the first identifiable code;

[0166] Convert the node display information of each page into the second identifiable code;

[0167] Converting the logic management information of each page into the third identifiable code;

[0168] When the processor 111 generates page node information, node display information, and logic management information corresponding to the second application based on the identifiable code, the processor 111 specifically performs:

[0169] generating page node information corresponding to the second application based on the first identifiable code;

[0170] generating node display information corresponding to the second application based on the second identifiable code;

[0171] Logical management information corresponding to the second application is generated based on the third identifiable code.

[0172] In some implementations, when the processor 111 converts the page node information in each page into the first identifiable code, the processor 111 specifically performs:

[0173] Generate a document tree based on the page node information of each page; wherein the document tree includes multiple levels; wherein each level includes at least one node, and each node includes a node type and a node attribute;

[0174] Generate a first syntax tree based on the node type and node attribute of each node in the document tree; wherein the first syntax tree is used to convert the syntax used by the applet into the syntax used by the second application program;

[0175] The first identifiable code is generated based on the first syntax tree.

[0176] In some implementations, when the processor 111 converts the node display information in each page into the second identifiable code, the processor 111 specifically performs:

[0177] Determine a second syntax tree based on the node display information of each page; wherein the second syntax tree is used to convert pixels in the node display information into pixels in the page node of the second application;

[0178] The second identifiable code is generated based on the second syntax tree.

[0179] In some implementations, the logic management information includes: page life cycle and page operation information;

[0180] When the processor 111 converts the logic management information of each page into the third identifiable code, the processor 111 specifically performs:

[0181] Determine multiple component modules based on the page life cycle; wherein the page life cycle in the mini program and the life cycle of each component module are aligned with each other; each component module includes multiple pre-set components;

[0182] Determine the corresponding relationship between the page operation information and the multiple components in each component module;

[0183] The third identifiable code is generated based on the plurality of component modules and the corresponding relationship.

[0184] In some implementations, the page operation information includes: event information and data-driven information;

[0185] When the processor 111 determines the correspondence between the page operation information and the multiple components in the component module, the processor 111 specifically performs:

[0186] Determine the correspondence between the event information and the data-driven information and the multiple components in the component module;

[0187] After determining the correspondence between the event information and the data driving information and the multiple components in the component module, the method further includes:

[0188] Determine the functions implemented by each component in each component module.

[0189] In some embodiments, the third identifiable code comprises an application programming interface code;

[0190] When executing the step of determining the functions implemented by each component in each component module, the processor 111 specifically performs:

[0191] Calling the application programming interface code corresponding to the event information to implement the functions of each component corresponding to the event information;

[0192] The functions implemented by each component corresponding to the data driving information are implemented based on the preset driving settings corresponding to the data driving information.

[0193] In some implementations, when the processor 111 executes the page node information, node display information, and logic management information based on the second application to generate corresponding page information of the multiple pages included in the mini-program in the second application, the processor 111 specifically performs:

[0194] Based on any one or more of the page life cycle, the event information, and the data-driven information, trigger a page rendering function of the second application to obtain a page to be generated;

[0195] Based on the page node information of the page to be generated and the node display information, the corresponding page information of the multiple pages included in the mini program in the second application is generated.

[0196] The identifiable code also includes: a page routing code;

[0197] After executing the step of generating the pages corresponding to the plurality of pages included in the target applet in the second application program, the processor 111 further executes:

[0198] The execution order of the page information of the second application is managed based on the page routing code.

[0199] The present application also provides a computer-readable storage medium, wherein instructions are stored in the computer-readable storage medium, and when the instructions are executed on a computer or a processor, the computer or the processor executes the above Figure 2-Figure 2 , Figure 3 ,as well as Figure 8One or more steps in the illustrated embodiment. If the various component modules of the above-mentioned mini-program cross-terminal application device are implemented in the form of software functional units and sold or used as independent products, they can be stored in the computer-readable storage medium.

[0200] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in this application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium or transmitted through the computer-readable storage medium. The computer instructions can be transmitted from a website site, computer, server or data center to another website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (Digital Subscriber Line, DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server, data center, etc. that contains one or more available media integrated. The available medium may be a magnetic medium (eg, a floppy disk, a hard disk, a magnetic tape), an optical medium (eg, a digital versatile disc (DVD)), or a semiconductor medium (eg, a solid state disk (SSD)).

[0201] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program, and the program 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-mentioned methods. The aforementioned storage medium includes: various media that can store program codes, such as system memory (Read Only Memory, ROM), random access memory (Random Access Memory, RAM), magnetic disk or optical disk. In the absence of conflict, the technical features in this embodiment and the implementation scheme can be combined arbitrarily.

[0202] The embodiments described above are merely preferred embodiments of the present application and are not intended to limit the scope of the present application. Without departing from the design spirit of the present application, various modifications and improvements made to the technical solutions of the present application by ordinary technicians in this field should fall within the protection scope determined by the claims of the present application.

Claims

1. A mini program cross-terminal application method, characterized in that: The method comprises: Acquire multiple pages included in a target applet; the target applet is installed in a first application program; Determine the page node information, node display information, and logic management information of each page; Convert the codes corresponding to the page node information, node display information, and logic management information of each page into identifiable codes; generating page node information, node display information, and logic management information corresponding to a second application based on the identifiable code; the first application is different from the second application; Generate corresponding pages of the plurality of pages included in the target mini-program in the second application based on the page node information, node display information, and logic management information of the second application; The execution order of the page information of the second application is managed based on the page routing code in the identifiable code; the page routing code is used to maintain the page stack data of the second application.

2. The method according to claim 1, characterized in that The identifiable codes include a first identifiable code, a second identifiable code, and a third identifiable code; The converting the codes corresponding to the page node information, the node display information, and the logic management information of each page into identifiable codes includes: Converting the page node information of each page into the first identifiable code; Convert the node display information of each page into the second identifiable code; Converting the logic management information of each page into the third identifiable code; The generating of page node information, node display information, and logic management information corresponding to the second application based on the identifiable code includes: generating page node information corresponding to the second application based on the first identifiable code; generating node display information corresponding to the second application based on the second identifiable code; Logical management information corresponding to the second application is generated based on the third identifiable code.

3. The method according to claim 2, characterized in that The converting the page node information in each page into the first identifiable code comprises: Generate a document tree based on the page node information of each page; wherein the document tree includes multiple levels; wherein each level includes at least one node, and each node includes a node type and a node attribute; Generate a first syntax tree based on the node type and node attribute of each node in the document tree; wherein the first syntax tree is used to convert the syntax used by the applet into the syntax used by the second application program; The first identifiable code is generated based on the first syntax tree.

4. The method according to claim 2, characterized in that: The converting the node display information in each page into the second identifiable code includes: Determine a second syntax tree based on the node display information of each page; wherein the second syntax tree is used to convert pixels in the node display information into pixels in the page node of the second application; The second identifiable code is generated based on the second syntax tree.

5. The method according to claim 2, characterized in that: The logic management information includes: page life cycle and page operation information; The converting the logic management information of each page into the third identifiable code comprises: Determine multiple component modules based on the page life cycle; wherein the page life cycle in the mini program and the life cycle of each component module are aligned with each other; each component module includes multiple pre-set components; Determine the corresponding relationship between the page operation information and the multiple components in each component module; The third identifiable code is generated based on the plurality of component modules and the corresponding relationship.

6. The method according to claim 5, characterized in that The page operation information includes: event information and data drive information; The determining of the correspondence between the page operation information and the multiple components in the component module includes: Determine the correspondence between the event information and the data-driven information and the plurality of components in the component module; After determining the correspondence between the event information and the data driving information and the multiple components in the component module, the method further includes: Determine the functions implemented by each component in each component module.

7. The method according to claim 6, characterized in that The third identifiable code includes an application programming interface code; Determining the functions implemented by each component in each component module includes: Calling the application programming interface code corresponding to the event information to implement the functions of each component corresponding to the event information; The functions implemented by each component corresponding to the data driving information are implemented based on the preset driving settings corresponding to the data driving information.

8. The method according to claim 6, characterized in that The generating, based on the page node information, node display information, and logic management information of the second application, corresponding page information of the plurality of pages included in the mini-program in the second application, includes: Based on any one or more of the page life cycle, the event information, and the data-driven information, trigger a page rendering function of the second application to obtain a page to be generated; Based on the page node information of the page to be generated and the node display information, the corresponding page information of the multiple pages included in the mini program in the second application is generated.

9. A mini program cross-terminal application device, characterized in that: The device comprises: An acquisition module, used to acquire multiple pages included in a target applet; the target applet is installed in a first application; A determination module, used to determine page node information, node display information, and logic management information of each page; A conversion module, used to convert the codes corresponding to the page node information, node display information, and logic management information of each page into identifiable codes; A first generating module, configured to generate page node information, node display information, and logic management information corresponding to a second application based on the identifiable code; the first application is different from the second application; A second generating module, configured to generate corresponding pages of the plurality of pages included in the target mini-program in the second application based on the page node information, node display information, and logic management information of the second application; A management module is used to manage the execution order of the page information of the second application based on the page routing code in the identifiable code; the page routing code is used to maintain the page stack data of the second application.

10. A computer storage medium, characterized in that: The computer storage medium stores a plurality of instructions, which are suitable for being loaded by a processor and executing the method steps according to any one of claims 1 to 8.

11. An electronic device, characterized in that: include: A processor and a memory; wherein the memory stores a computer program, and the computer program is suitable for being loaded by the processor and executing the method steps according to any one of claims 1 to 8.

Images