CN112905179A

CN112905179A - Mobile terminal H5 page generation method and device, electronic equipment and storage medium

Info

Publication number: CN112905179A
Application number: CN202110327304.9A
Authority: CN
Inventors: 杨颖凡; 傅强; 黄日升
Original assignee: China Construction Bank Corp
Current assignee: China Construction Bank Corp
Priority date: 2021-03-26
Filing date: 2021-03-26
Publication date: 2021-06-04

Abstract

The embodiment of the invention discloses a mobile terminal H5 page generation method, a device, electronic equipment and a storage medium. The mobile terminal H5 page generation method comprises the following steps: acquiring a response request message of a mobile terminal H5 page, and separating the response request message into a logic request message and a rendering request message; sending the logic request message to a native terminal for execution; and sending the rendering request message to a browser end for execution, wherein the native end and the browser end perform data interaction through JsBridge communication. The invention relates to the technical field of mobile interconnection, and aims to solve the problems of white screen, unsmooth operation, unsmooth experience and the like when a mobile terminal H5 page is loaded and generated.

Description

Mobile terminal H5 page generation method and device, electronic equipment and storage medium

Technical Field

The embodiment of the invention relates to the technical field of mobile interconnection, in particular to a mobile terminal H5 page generation method and device, electronic equipment and a storage medium.

Background

In the development of mobile clients, the loading of H5 pages is quite common, although the problems that the clients frequently issue versions and cannot be dynamically updated are solved; however, due to the performance bottleneck of the Webview rendering H5, the H5 page is inherently difficult to achieve the original and smooth interaction effect, and the defects of page jamming, white screen loading and poor interaction performance are common defects of the existing H5 loading technology.

Disclosure of Invention

The embodiment of the invention provides a method and a device for generating a mobile terminal H5 page, electronic equipment and a storage medium, and aims to solve the problems of white screen, unsmooth operation, unsmooth experience and the like during loading and generating of an H5 page.

In a first aspect, an embodiment of the present invention provides a method for generating a mobile terminal H5 page, including:

acquiring a response request message of a mobile terminal H5 page, and separating the response request message into a logic request message and a rendering request message;

sending the logic request message to a native terminal for execution;

and sending the rendering request message to a browser end for execution, wherein the native end and the browser end perform data interaction through JsBridge communication.

In a second aspect, an embodiment of the present invention further provides an apparatus for generating a mobile terminal H5 page, including:

the message separation module is used for acquiring a response request message of a mobile terminal H5 page and separating the response request message into a logic request message and a rendering request message;

the logic message execution module is used for sending the logic request message to a native terminal for execution;

and the rendering message execution module is used for sending the rendering request message to a browser end for execution, wherein the native end and the browser end perform data interaction through JsBridge communication.

In a third aspect, an embodiment of the present invention further provides an electronic device, including:

one or more processors;

a storage device for storing one or more programs,

when the one or more programs are executed by the one or more processors, the one or more processors implement the mobile terminal H5 page generation method according to any embodiment of the present invention.

In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the mobile terminal H5 page generating method according to any embodiment of the present invention.

The embodiment of the invention is based on the fact that the logic layer processing and the rendering layer processing of the mobile terminal H5 page are split into two-thread operation, the logic request message is generated when the native terminal executes the H5 page, and the rendering request message is generated when the browser terminal executes the H5 page. The embodiment of the invention solves the problems of white screen, unsmooth operation, unsmooth experience and the like in the loading and generating process of the H5 page.

Drawings

Fig. 1 is a flowchart of a mobile terminal H5 page generation method according to a first embodiment of the present invention;

FIG. 2 is a schematic representation of a modification of the responsive data driver of Vue 3;

FIG. 3 is a schematic illustration of response modification for responsive data driven events;

FIG. 4 is a mechanism for update loading of the H5 resource package;

FIG. 5 is a schematic diagram of a raw end JS engine communicating with a browser end WebView through JsBridge bridge;

FIG. 6 is a schematic diagram of the JsBridge communication logic;

FIG. 7 is a development flow diagram for the H5 page;

fig. 8 is a schematic structural diagram of a mobile terminal H5 page generating apparatus according to a second embodiment of the present invention;

fig. 9 is a schematic structural diagram of an electronic device in a third embodiment of the present invention.

Detailed Description

The present invention will be described in further detail with reference to the accompanying drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the invention and are not limiting of the invention. It should be further noted that, for the convenience of description, only some of the structures related to the present invention are shown in the drawings, not all of the structures.

Example one

Fig. 1 is a flowchart of a method for generating a mobile terminal H5 page in an embodiment of the present invention, which is applicable to a case where an H5 page is developed on a mobile terminal. The method can be executed by a mobile terminal H5 page generating apparatus, which can be implemented in software and/or hardware and can be configured in an electronic device, for example, the electronic device can be a device with communication and computing capabilities, such as a background server. As shown in fig. 1, the method specifically includes:

step 101, acquiring a response request message of the mobile terminal H5 page, and separating the response request message into a logic request message and a rendering request message.

H5 is an abbreviation of HTM5, the latest revised version of HTML, which is a hypertext markup language. The existing H5 page is generated by calling the browser kernel of the system first, which is equivalent to operating in the web page, and the generated page has slightly lower stability and lower speed than the native end page. The method has the advantages of cross-platform capability, easy development, high efficiency and convenient debugging.

Particularly, nowadays, JS applications in H5 pages are more and more extensive, and interaction is more and more complicated, so that H5 is applied to the development of applications at the mobile terminal, and more, very much JS script logic exists. However, the JS operation is single-threaded, and the garbage collection mechanism is not well processed, so that in the prior art, when a common H5 page is opened, the JS script of the JS operation is executed in a kernel browser of Webview, and is analyzed and executed by a JS engine of the browser. The browser has two important threads in processing and displaying the H5 web page: 1. GUI (Graphical User Interface) rendering thread: the method is mainly responsible for analyzing the style files (html/css), constructing a Dom (Document Object Model) tree, calculating a layout rendering interface and the like. 2. And (3) JS engine thread: and processing JS script logic, such as event processing, network request, timer triggering and the like.

However, since the GUI rendering thread of the browser and the JS engine thread of the browser themselves conflict and cannot be executed simultaneously, the JS engine may block page rendering, and therefore, after a long time of H5 page interaction, a phenomenon of screen jamming or even screen blank may occur.

In order to solve the problem that the H5 page is less stable than the native end page when being generated, in the embodiment of the present invention, the response request message generated by the H5 page is divided into two threads to be processed simultaneously, that is, the logical layer and the rendering layer of the H5 page are separated. Specifically, the response request message of the H5 page is divided into a logical request message and a rendering request message. The logic request message is used for processing data response type messages which are irrelevant to rendering, and the rendering request message is used for processing messages relevant to page rendering.

And step 102, sending the logic request message to a native terminal for execution.

The logic request message is JS script logic, the JS script logic is placed in an independent JS engine in the mobile terminal application native terminal where the H5 page is located to execute, and a browser kernel in Webview does not use the JS script logic to execute.

And 103, sending the rendering request message to a browser end for execution, wherein the native end and the browser end perform data interaction through JsBridge communication.

The rendering request message is used for GUI rendering, and a browser kernel in Webview is only used for constructing a Dom tree according to the rendering request message and calculating a layout rendering interface. Thereby separating the logical layer from the rendering layer at the time of H5 page generation by two threads of execution.

Illustratively, the iOS end adopts a JavaScript core engine which is provided behind the iOS7 and runs JS logic, and adopts a WKWebView rendering interface which is also provided, namely, a logic request message is sent to the JavaScript core engine, and a rendering request message is sent to the WKWebView. And the android terminal adopts a V8 engine of Google own to run JS logic, adopts a WebView rendering interface of the android own, namely, the logic request message is sent to the V8 engine, and the rendering request message is sent to the WebView. The JavaScriptCore engine is an independent JavaScript running engine and can efficiently execute the JS script logic code. WKWebView is a built-in container for loading H5, calling the browser kernel to load H5.

Meanwhile, JsBridge communication adapting to three ends is created, so that double-thread communication between a logic layer and a rendering layer is facilitated, namely data interaction between a native end and a browser end is realized. The embodiment of the invention efficiently and independently operates the logic request messages with larger consumption in operation, such as network requests, data driving and event response, in the JS engine of the native terminal, and completely does not block Webview rendering pages. JsBridge is a bridge for communication between a native end and a browser end, and encapsulates a native interface collection which calls methods and communication with H5 through a Webview exposure method.

In one possible embodiment, the mobile end H5 page was developed based on Vue 3;

correspondingly, the method further comprises the following steps:

the responsive driving service and the page rendering service in Vue3 are separated, Vue3 of the responsive driving service is run on the native end, the rendering result is sent to the browser end, and the browser end executes Vue3 of the page rendering service.

Vue3 is a front-end response type open source framework, in the embodiment of the present invention, Vue3 technology is applied to native cross-platform development, and the syntax of Vue3 is used to rapidly implement development of a mobile-end high-performance H5 page. Meanwhile, in order to solve the problem of jamming of the H5 page generation, the logic layer and the rendering layer are separated when the H5 page is generated, so that the responsive driver and the page rendering of Vue3 need to be split to match the dual-thread operation of the H5 page. The responsive driving is the responsive data driving, and the change of the page data directly and automatically causes the change of the interface.

The response type driving service and the page rendering service in Vue3 are split, Vue3 is operated at a Native end, namely a Native end, rendering results are transmitted to Webview, and the purpose of separating a logic layer from a rendering layer is achieved.

In one possible embodiment, splitting the responsive driven traffic and the page rendering traffic in Vue3 includes:

calling Vue3 the createVNode method to create a VNode instance;

acquiring Vue3 a render function and an instance proxy object, and generating a response instance with the render function;

converting the child object of the VNode instance into a Dom description string;

and acquiring a Dom description character string through JsBridge communication, and generating an actual rendering Dom according to the Dom description character string so as to render the H5 page according to the actual rendering Dom.

To split the responsive driven traffic and page rendering traffic in Vue3, the core responsive data drive of reform Vue3 needs to be rewritten. Vue3, the schematic diagram of the modification of the response data driver is shown in fig. 2, which specifically includes: the createApp method is not called to initialize Vue3 the application instance; creating VNode instance vNodeInstance by adopting a creatVNode method; acquiring a render function and an instance proxy object, and generating a response type instance with the render function; converting a child object of the vNodeInstance into a Dom description character string jsonTree which can be communicated between a logic layer and a rendering layer through patchJson; acquiring jsonTree through JsBridge communication, and generating an actual rendering Dom and a rendering page through a createDomTree method.

generating an abstract syntax tree according to Vue single file source codes of a mobile terminal H5 page;

extracting a proxy method according to the abstract syntax tree;

and merging the proxy method into JsBridge communication to realize data interaction between the split response type driving service and the page rendering service through the JsBridge communication.

The modification of Vue3 to the responsive data driver results in the change of instance creation and the separation of the responsive data driver from the page rendering layer, which makes the trigger and response of the rendering layer to the page data change event invalid. Therefore, in order to ensure that the rendering layer can still receive the event processing message when the H5 page performs dual-thread operation on the rendering layer and the logic layer, response modification needs to be performed on the responsive data-driven event, and a schematic diagram of the modification is shown in fig. 3, specifically: acquiring Vue single file source codes of a mobile terminal H5 page, namely a proxy method in an App.vue file, by using an AST abstract syntax tree; and reinject the method into JsBridge. The proxy method is Vue3, which is used to monitor the page data change.

In one possible embodiment, after incorporating the proxy method into the JsBridge communication, the method further comprises:

the browser side acquires data change information through a proxy method in JsBridge communication;

responsively driving the virtual Dom tree to change according to the data change information;

and determining the rendered Dom nodes according to the virtual Dom tree change information based on a Diff algorithm.

After the response type data area event is subjected to response transformation, the data change response type drives the virtual Dom tree to change, and the Diff algorithm can accurately judge that only the changed Dom nodes are rendered at the change points, so that frequent operation on the Dom is avoided, and the rendering performance is effectively improved. Vue3, the Diff algorithm is divided into static tree and dynamic tree by marking the nodes with patchFlag, the Diff algorithm only calculates the dynamic tree, the static tree itself will not change, and the repeated calculation is avoided by static lifting. The virtual Dom is a description language for converting real Dom into Javascript codes and is a Dom node; the real Dom is that the browser draws an interface according to codes, and frequent modification can cause redrawing of the interface and unsmooth interface.

In one possible embodiment, before splitting the response-driven service and the page-rendering service in Vue3, the method further includes:

generating an abstract syntax tree according to Vue single file source codes of H5 pages;

and acquiring a template object, a script object and a css object according to the abstract syntax tree, so as to split the responsive driving service and the page rendering service in Vue3 based on the template object, the script object and the css object.

Before splitting the response driven service and the page rendering service in Vue3, the object related to the service in Vue single file needs to be extracted. Specifically, the AST abstract syntax tree is used for converting Vue single-file source codes into the abstract syntax tree so as to obtain a template object, a script object and a css object of the Vue file, and a subsequent logic layer is conveniently separated from a rendering layer. The template object is a page template object, the script object is a page logic object, and the css object is a page style object, which are separated from the abstract syntax tree, so that the template object, the script object and the css object can be directly used when the rendering layer and the logic layer of the H5 page are separated subsequently.

Illustratively, a rendering function is generated; extracting AST of the script for analyzing service logic; and compiling and extracting the css part, and generating a css style file by using a style compiling module for loading of a subsequent development server.

In one possible embodiment, the method further comprises:

the resource package of the mobile terminal H5 page is downloaded locally in advance; the resource package at least comprises a logic file and a rendering file, the logic file is placed at a primary end to be executed, and the rendering file is placed at a browser end to be executed.

In the invention, the resource package of the H5 page is downloaded to the local sandbox of the application of the mobile terminal in advance, so that offline is realized, and the page loading and rendering efficiency is effectively improved; and meanwhile, the resources are localized, the local JS file of H5 is placed at a Native end for execution, and the Html rendering effect is placed at a Webview browser end for execution. The method is also the implementation basis for splitting a logic layer and a rendering layer and carrying out H5 double-thread operation.

Optionally, as shown in fig. 4, a mechanism for performing update loading on the H5 resource package is specifically: before opening the application of the mobile terminal where the H5 page is located, judging whether the local mobile terminal has a corresponding version number of the H5 page, if not, directly downloading the latest version on line and decompressing and storing the latest version in the local mobile terminal; if the version number exists, initiating a network request to request the latest version number on the line, comparing the current version number with the latest version number on the line, and if the version number is latest, directly loading the local resource package file to open an H5 page; if the version is not the latest version, downloading the resource package of the latest version, decompressing and replacing the local old version, and then loading and opening.

In one possible embodiment, the method further comprises:

generating a target native module for a target function in a mobile terminal H5 page based on data interaction between a native terminal and a browser terminal; wherein the target function comprises at least one of: network requests, local storage, native routing, native navigation bar, native bottom navigation bar, and drop-down refresh.

In the embodiment of the invention, the rendering layer and the logic layer of the H5 page are operated through double threads, the JS is operated on the JS engine at the native end, and the data interactive communication between the native end and the browser end is realized, so that the original H5 and native interactive communication and the original H5 calling native ability are easier. Therefore, in order to improve the execution efficiency and the expansion capability of the H5 page, in the embodiment of the present invention, a native module or component is implemented by using the network request, the local storage, the native routing, the native navigation bar, the native bottom navigation bar, and the pull-down refresh function, so as to further improve the generation efficiency of the H5 page.

In one possible embodiment, the method further comprises:

the native terminal generates a data response according to the logic request message and generates a virtual Dom node according to the data response;

generating a Dom description character string according to the virtual Dom node; wherein, the Dom description character string is a json character string;

and the browser side acquires the Dom description character string through JsBridge communication.

In the embodiment of the invention, the JS engine at the native end and the WebView at the browser end run in two threads, so that direct communication can not be realized as if the JS engine and the WebView are both in the browser kernel. However, the native JS engine and Webview can communicate with each other based on the JsBridge communication transfer string, which is why the responsive data area is modified Vue3 in the embodiment of the present invention. The schematic diagram of the primary JS engine and the browser WebView communicating through the JsBridge bridge is shown in fig. 5. Specifically, a virtual Dom generated by data response is converted into a json description character string of the Dom, and the json description character string is transmitted to Webview by a JS engine, so that the purposes of triggering rendering and responding to an event can be achieved while a separate thread runs.

In one possible embodiment, the method further comprises:

and (3) running a Js logic of Vue3 in the JavaScriptcore of the native end, calling a method in the native end through JsBridge communication, and triggering the browser end to call the Js method through the native end so as to realize data interaction between the native end and the browser end through the JsBridge communication.

Fig. 6 shows a schematic diagram of the communication logic of JsBridge, specifically: the method is characterized in that Js logic of Vue3 running in JavaScript core of a Native end, namely a JS engine of a Native end, calls a Native method through JsBridge, and triggers Webview to call the Js method through Native. Exemplary, the implementation process in iOS is as follows: 1. calling a postPatch method at the JavaScript core to realize the communication between the JavaScript core and a Native; and the Webview and H5 communication is realized by calling H5 method through the evaluateJavaScript method of the Webview in Native. 2. In contrast, in H5, by calling the Native interface defined in Webview, Native calls the JS method defined in the Native JS engine through the evaluateSCrit method of JsContext, thereby realizing data interaction between the Native end and the browser end through JsBridge communication.

In one possible embodiment, the logical request message includes at least one of: a network request message, an interworking message, and a data response message.

Since the logic request message is executed by the native side, the message which consumes a large amount when the H5 page runs is executed by the native side, and the pressure of the browser side on page rendering is relieved. Messages that are more runtime-consuming include, but are not limited to, network request messages, inter-operation messages, and data response messages.

In one possible embodiment, the method further comprises performing resource pool optimization at the browser side.

Specifically, resource pool optimization is performed on the Webview browser side, the initialization time is effectively shortened, and H5 page second is achieved. Illustratively, a preset number of H5 pages are opened in advance in Webview, waiting for response in a resource pool, and if a response message of the page is received, the page is directly called from the resource pool without being opened from the beginning; optionally, when the number of H5 pages preloaded in the resource pool is less than the preset number, performing a resource pool optimization operation, that is, reloading the H5 pages to be placed in the resource pool.

Optionally, the method further includes integrating the H5 page Development solution into an SDK (Software Development Kit). Specifically, the code is integrated into an SDK mode development and iteration which is easy for multi-terminal integration. Wherein the iOS is packaged in a framework static library mode, and the android is packaged in an aar mode. By integrating the SDK, the method and the device can quickly enable the mobile terminal application to have quick iteration when developing the H5 page, have smooth experience, are comparable to the original cross-platform dynamic application development experience, and improve the generation quality of the developed H5 page. The SDK packages all relevant codes of the functional module into a code packet easy to integrate, can conveniently own and call the relevant functions of the module, and is independent from the main application service.

Exemplarily, the LoftAppSDK is an integrated SDK name, and the iOS integrated SDK method includes: 1. adding LoftAppSDK.frame into engineering; 2. quote < LoftAppSDK/LAWebViewHandler > in AppDelegate; initializing a Webview resource pool by a [ [ LAWebViewHandler alloc ] init ] method; 3. building a LAWebViewController; introducing a # import < LoftAppSDK/LAViewController.h > header file LAWebViewController inherits LAViewController; 4. LAWebViewController has inherited and has SDK related functions, and can open and download corresponding H5 by using self load H5AppId @ 'AppId'.

The Android integrated SDK method comprises the following steps: 1. copying a loftappS DK.aar file to an android project, and placing the file in an app directory to newly build a libs folder; 2. newly adding a dependent directory configuration in a build.gradle file of the app; 3. introducing ceiling (name: 'loftapppSDK', ext: 'aar') into the dependencies; 4. creating LAWebViewActivity and layout file, inheriting com.ccb.loftappdk.loftapp.LAWebViewActivity; 5. the open H5AppId is set using Intent and jumps.

Optionally, the method further includes loading a Module with a browser ES Module in H5 page development.

Specifically, the method comprises the following steps: the ES Module of the ES6 specification is supported in modern browsers (such as Chrome, Safari), so that an Html file running in a browser can be directly imported and executed by an import file marked by type ═ Module ". Meanwhile, the browser runs "http:// localhost:3000/index. html" to open the development preview page by starting the web server at Koa. In the Koa server, files at the end of vue,. js and. css are intercepted by a custom middleware (middleware), file contents are obtained, corresponding analysis processing is carried out, and the file contents are returned to the browser. Wherein Koa is a web development server based on node. js, and can load html, js and css files to run on a browser. The development flow chart of the H5 page is shown in fig. 7.

In order to solve the problems of white screen, unsmooth operation, unsmooth experience and the like when the browser-side Webview loads H5, a full-flow multi-terminal H5 development mode optimization solution is provided in various aspects by realizing an offline H5 development framework, an H5 development tool and a Diff algorithm for rewriting Vue3 responsive data drive and virtual Dom, and by realizing the updating and loading of an offline H5 resource package, splitting a logic layer and rendering layer and double-thread operation H5 at an iOS end and an android end; and the scheme is integrated into an iOS end integrated SDK, an android end integrated SDK and an H5 development kit, so that the function is conveniently and rapidly integrated and applied. And further, in the development of the native client, a set of H5 codes has multiple terminals, cross-platform and high-performance operation, namely the dynamic updating capability of H5 is kept, the process experience which is comparable to the native process is also achieved, and the iterative efficiency of the client development and the user operation experience are greatly improved.

In the embodiment of the invention, a logic layer of Vue3 is realized on a client side and runs on a native independent JS engine by using a front-end grammar compatible with Vue3, a rendering layer runs in Webview, a Vue3 technology is applied to native cross-platform development, a development mode faces the future, and the front end adopts grammar development completely compatible with Vue3 without extra learning cost. The resource package is downloaded and preset in advance, and the basic package and the service package are split, so that the problem of white screen caused by loading is effectively solved; the basic packet is used for realizing a general function, and the service packet is used for realizing a page exclusive service function. And the cross-platform multiplexing of the iOS, android and Web three ends can be realized, one set of codes is adopted, the multi-end operation is realized, the development cost is reduced, and the development efficiency is high. The method comprises the steps that a logic layer and a rendering layer are separated during page generation, processing logics such as network requests, interactive operations and data responses are executed in a primary custom JS engine, and Webview is only responsible for page rendering, so that the problem of blocking caused by JS single threads is effectively solved; the Vue3 framework is rewritten to enable it to run on the standalone JS engine, separating the data response from the rendering logic. The H5 development suite is provided, development and preview are convenient, and the resource package can be packed into a resource package of the mobile terminal application by one key and can be packed into a web project. The integration of whole code is SDK, makes things convenient for iOS and tall and erect quick integration of customer end of ann, independent iteration upgrading. And optimizing a resource pool of the Webview, effectively shortening the initialization time and realizing H5 page second opening. And a rem adaptive layout is adopted to support high-definition equipment. The front end supports TypeScript type inference. Native components are supported.

Example two

Fig. 8 is a schematic structural diagram of a mobile terminal H5 page generating device in the second embodiment of the present invention, which is applicable to a case where an H5 page is developed on a mobile terminal. As shown in fig. 8, the apparatus includes:

a message separation module 810, configured to obtain a response request message of a mobile H5 page, and separate the response request message into a logic request message and a rendering request message;

a logic message execution module 820, configured to send the logic request message to a native end for execution;

and a rendering message execution module 830, configured to send the rendering request message to a browser end for execution, where the native end and the browser end perform data interaction through JsBridge communication.

Optionally, the mobile terminal H5 page is developed based on Vue 3;

correspondingly, the device further comprises an Vue3 rewrite module:

Optionally, the Vue3 rewrite module, to be specifically configured to:

calling Vue3 the createVNode method to create a VNode instance;

and acquiring the Dom description character string through JsBridge communication, and generating an actual rendering Dom according to the Dom description character string so as to render the H5 page according to the actual rendering Dom.

Optionally, the Vue3 rewrite module, to be specifically configured to:

extracting a proxy method according to the abstract syntax tree;

and the proxy method is combined into JsBridge communication to realize data interaction between the split response type driving service and the page rendering service through the JsBridge communication.

Optionally, after the proxy method is merged into the JsBridge communication in the Vue3 rewrite module, the module further includes a node rendering module:

Optionally, before the Vue3 rewrite module splits the responsive driving service and the page rendering service in Vue3, the apparatus further includes a Vue single file source code parsing module, which is specifically configured to:

Optionally, the apparatus further includes a resource package setting module, configured to:

the resource package of the mobile terminal H5 page is downloaded locally in advance; the resource package at least comprises a logic file and a rendering file, the logic file is placed at a native end to be executed, and the rendering file is placed at a browser end to be executed.

Optionally, the apparatus further comprises a target function localization module, configured to:

generating a target native module for a target function in the mobile terminal H5 page based on the data interaction between the native terminal and the browser terminal; wherein the target function comprises at least one of: network requests, local storage, native routing, native navigation bar, native bottom navigation bar, and drop-down refresh.

Optionally, the apparatus further includes a rendering data transmission module, configured to:

generating a Dom description character string according to the virtual Dom node; wherein the Dom description character string is a json character string;

and the browser end acquires the Dom description character string through JsBridge communication.

Optionally, the apparatus further includes a JsBridge communication implementation module configured to:

and (3) running a Js logic of Vue3 in JavaScript core of the native end, calling a method in the native end through JsBridge communication, and triggering the browser end to call the Js method through the native end so as to realize data interaction between the native end and the browser end through JsBridge communication.

Optionally, the logic request message includes at least one of the following: a network request message, an interworking message, and a data response message.

Optionally, the apparatus further includes a resource pool optimization module, configured to perform resource pool optimization at the browser end.

The mobile terminal H5 page generation apparatus provided in the embodiment of the present invention can execute the mobile terminal H5 page generation method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects for executing the mobile terminal H5 page generation method.

EXAMPLE III

Fig. 9 is a schematic structural diagram of an electronic device according to a third embodiment of the present invention. FIG. 9 illustrates a block diagram of an exemplary electronic device 12 suitable for use in implementing embodiments of the present invention. The electronic device 12 shown in fig. 9 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiment of the present invention.

As shown in fig. 9, electronic device 12 is embodied in the form of a general purpose computing device. The components of electronic device 12 may include, but are not limited to: one or more processors or processing units 16, a system memory device 28, and a bus 18 that couples various system components including the system memory device 28 and the processing unit 16.

Bus 18 represents one or more of any of several types of bus structures, including a memory device bus or memory device controller, a peripheral bus, an accelerated graphics port, and a processor or local bus using any of a variety of bus architectures. By way of example, such architectures include, but are not limited to, Industry Standard Architecture (ISA) bus, micro-channel architecture (MAC) bus, enhanced ISA bus, Video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect (PCI) bus.

Electronic device 12 typically includes a variety of computer system readable media. Such media may be any available media that is accessible by electronic device 12 and includes both volatile and nonvolatile media, removable and non-removable media.

The system storage 28 may include computer system readable media in the form of volatile storage, such as Random Access Memory (RAM)30 and/or cache storage 32. The electronic device 12 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, storage system 34 may be used to read from and write to non-removable, nonvolatile magnetic media (not shown in FIG. 9, and commonly referred to as a "hard drive"). Although not shown in FIG. 9, a magnetic disk drive for reading from and writing to a removable, nonvolatile magnetic disk (e.g., a "floppy disk") and an optical disk drive for reading from or writing to a removable, nonvolatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 18 by one or more data media interfaces. Storage 28 may include at least one program product having a set (e.g., at least one) of program modules that are configured to carry out the functions of embodiments of the invention.

A program/utility 40 having a set (at least one) of program modules 42 may be stored, for example, in storage 28, such program modules 42 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each of which examples or some combination thereof may comprise an implementation of a network environment. Program modules 42 generally carry out the functions and/or methodologies of the described embodiments of the invention.

Electronic device 12 may also communicate with one or more external devices 14 (e.g., keyboard, pointing device, display 24, etc.), with one or more devices that enable a user to interact with device 12, and/or with any devices (e.g., network card, modem, etc.) that enable device 12 to communicate with one or more other computing devices. Such communication may be through an input/output (I/O) interface 22. Also, the electronic device 12 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the Internet) via the network adapter 20. As shown in FIG. 9, the network adapter 20 communicates with the other modules of the electronic device 12 via the bus 18. It should be appreciated that although not shown in FIG. 9, other hardware and/or software modules may be used in conjunction with electronic device 12, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, among others.

The processing unit 16 executes various functional applications and data processing by running programs stored in the system storage device 28, for example, implementing a mobile terminal H5 page generation method provided by the embodiment of the present invention, including:

sending the logic request message to a native terminal for execution;

Example four

The fourth embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the method for generating a mobile terminal H5 page, where the method includes:

sending the logic request message to a native terminal for execution;

Computer storage media for embodiments of the invention may employ any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

A computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.

Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

Computer program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + +, or the like, as well as conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).

It is to be noted that the foregoing is only illustrative of the preferred embodiments of the present invention and the technical principles employed. It will be understood by those skilled in the art that the present invention is not limited to the particular embodiments described herein, but is capable of various obvious changes, rearrangements and substitutions as will now become apparent to those skilled in the art without departing from the scope of the invention. Therefore, although the present invention has been described in greater detail by the above embodiments, the present invention is not limited to the above embodiments, and may include other equivalent embodiments without departing from the spirit of the present invention, and the scope of the present invention is determined by the scope of the appended claims.

Claims

1. A mobile terminal H5 page generation method is characterized by comprising the following steps:

sending the logic request message to a native terminal for execution;

2. The method of claim 1, wherein the mobile end H5 page is developed based on Vue 3;

correspondingly, the method further comprises the following steps:

3. The method of claim 2, wherein splitting the response driven traffic and the page rendering traffic in Vue3 comprises:

calling Vue3 the createVNode method to create a VNode instance;

4. The method of claim 2, wherein splitting the response driven traffic and the page rendering traffic in Vue3 comprises:

extracting a proxy method according to the abstract syntax tree;

5. The method of claim 4, wherein after incorporating the proxy method into a JsBridge communication, the method further comprises:

6. The method of claim 2, further comprising, prior to splitting the responsive driven traffic and the page rendering traffic in Vue 3:

7. The method of claim 1, further comprising:

8. The method of claim 1, further comprising:

9. The method of claim 1, further comprising:

10. The method of claim 1, further comprising:

11. The method of claim 1, wherein the logical request message comprises at least one of: a network request message, an interworking message, and a data response message.

12. The method of claim 1, further comprising performing resource pool optimization at a browser side.

13. A mobile terminal H5 page generating device is characterized by comprising:

14. An electronic device, comprising:

one or more processors;

a storage device for storing one or more programs,

when executed by the one or more processors, cause the one or more processors to implement the mobile terminal H5 page generation method according to any one of claims 1-12.

15. A computer-readable storage medium, on which a computer program is stored, wherein the program, when executed by a processor, implements the mobile terminal H5 page generating method according to any one of claims 1-12.