CN115904341A - Front-end optimization method and device for mobile-end hybrid development - Google Patents
Front-end optimization method and device for mobile-end hybrid development Download PDFInfo
- Publication number
- CN115904341A CN115904341A CN202211607056.4A CN202211607056A CN115904341A CN 115904341 A CN115904341 A CN 115904341A CN 202211607056 A CN202211607056 A CN 202211607056A CN 115904341 A CN115904341 A CN 115904341A
- Authority
- CN
- China
- Prior art keywords
- interaction
- engine layer
- message
- native
- development
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 66
- 238000011161 development Methods 0.000 title claims abstract description 57
- 238000005457 optimization Methods 0.000 title claims abstract description 34
- 230000003993 interaction Effects 0.000 claims abstract description 81
- 238000012545 processing Methods 0.000 claims abstract description 57
- 230000002452 interceptive effect Effects 0.000 claims abstract description 33
- 238000012544 monitoring process Methods 0.000 claims abstract description 22
- 238000004891 communication Methods 0.000 claims abstract description 12
- 238000002156 mixing Methods 0.000 claims abstract description 12
- 230000001133 acceleration Effects 0.000 claims abstract description 7
- 230000006870 function Effects 0.000 claims description 14
- 230000003068 static effect Effects 0.000 claims description 11
- 230000008569 process Effects 0.000 claims description 10
- 230000007246 mechanism Effects 0.000 claims description 8
- 230000004048 modification Effects 0.000 claims description 4
- 238000012986 modification Methods 0.000 claims description 4
- 230000001360 synchronised effect Effects 0.000 claims description 4
- 238000001914 filtration Methods 0.000 claims description 3
- 238000004806 packaging method and process Methods 0.000 claims description 3
- 230000009471 action Effects 0.000 description 17
- 238000005516 engineering process Methods 0.000 description 5
- 238000004590 computer program Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 239000000047 product Substances 0.000 description 3
- 238000012423 maintenance Methods 0.000 description 2
- 239000000243 solution Substances 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000002457 bidirectional effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 238000002347 injection Methods 0.000 description 1
- 239000007924 injection Substances 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000002244 precipitate Substances 0.000 description 1
Images
Landscapes
- Stored Programmes (AREA)
Abstract
The invention relates to the technical field of mobile terminal software development, in particular to a front-end optimization method and device for mobile terminal hybrid development. According to the mobile terminal hybrid development-oriented front-end optimization method provided by the invention, the mobile terminal realizes communication interaction between the native terminal and the H5 terminal through the mixing container interaction unification and speed-up component: the mixing container interaction unifying and speed-increasing component is provided with a message monitoring queue pool, and the message monitoring queue pool is used for transmitting and calling back interaction parameters and interaction processing data so as to realize unified interaction processing between the H5 terminal and the primary terminal; the message monitoring alignment pool comprises interactive data information, a message id and a callback method function. According to the invention, the hybrid development framework is adopted to develop the mobile terminal development APP, so that the H5 terminal and the native terminal realize unified interaction processing, the interaction mode efficiency is higher, the maintainability is better, the acceleration of webpage access is realized, the development efficiency is greatly improved, and the development cost is reduced.
Description
Technical Field
The invention relates to the technical field of mobile terminal software development, in particular to a front-end optimization method and device for mobile terminal hybrid development.
Background
With the rapid development of mobile internet and intelligent terminals, mobile terminals are becoming an indispensable part of people's lives. With this, various APPs (applications) applied to mobile terminals are also emerging.
With the updating of business requirements, the App performs fast iteration to adapt to business requirements in enterprise application development. The existing APP development technology includes the following ways: native App development, web App development, and Hybrid App (Hybrid App) development.
The hybrid type App development, the mixed development of crossing the platform promptly, for example support the mixed development of iOS and two big platforms of ann tall and erect simultaneously, experience sense is relatively better, can cross the platform moreover, maintains and need not modify a plurality of ends, and APP development cost is lower relatively, and the time cost is also few.
The existing hybrid App development technology adopts an interaction mode of H5 and Native, and H5 is used for realizing frequently-changing services. H5, HTML5, is a language description way to build Web content. HTML5 is the next generation standard for the internet, a language way to build and present internet content.
However, H5 cannot directly acquire original information of the App, and a JS function injection mode of WebView in the App needs to be used for calling the H5, so that information interaction in development of the hybrid App is achieved. Because the information transfer is one-way transfer and does not support data return, H5 and Native interaction need to be defined twice to complete the interaction, so the interaction mode is too complicated, and the efficiency is not high.
Meanwhile, in the existing hybrid App development technology, the H5 needs to respectively designate the interaction mode of each operating system platform, which also leads to the problems of slow update process and inconvenient maintenance.
Disclosure of Invention
The invention aims to provide a front-end optimization method and a front-end optimization device for mobile-end hybrid development, and solves the problems of low efficiency and poor maintainability of an H5 and Native interactive mode in a hybrid APP development technology in the prior art.
The invention aims to provide a front-end optimization method and a front-end optimization device for mobile-end hybrid development, which solve the problem that the loading speed of a webpage accessed in the hybrid APP development technology in the prior art is low.
In order to achieve the above object, the present invention provides a front-end optimization method facing mobile terminal hybrid development, in which a mobile terminal realizes communication interaction between a native terminal and an H5 terminal through a hybrid container interaction unification and speed-up component:
the mixing container interaction unifying and speed-increasing component is provided with a message monitoring queue pool, and transmits and recalls interaction parameters and interaction processing data through the message monitoring queue pool, so that the H5 end and the primary end realize unified interaction processing;
the message monitoring queue pool comprises interactive data information, message id and a callback method function.
In one embodiment, the mixing container interaction unification and acceleration component comprises an H5 engine layer and a native engine layer,
the H5 engine layer is in communication interaction with the view layer and the native engine layer respectively;
and the native engine layer is respectively communicated and interacted with the H5 engine layer and the operating system.
In one embodiment, the H5 engine layer comprises an H5 software development kit;
the view layer comprises a front-end frame, an H5 page and a static webpage;
providing an access interface for an H5 page through an H5 software development kit, and encapsulating an asynchronous processing mechanism of the H5 page into synchronous call through a Promise form;
and the H5 engine layer receives the messages sent by the native engine layer and processes the messages uniformly.
In one embodiment, the native engine layer includes application software development kits of different operating system types;
and providing an access interface for receiving messages in a uniform format for application software of different operating system types through an application software development kit.
In one embodiment, the native engine layer is internally provided with an interaction processing pool;
and performing interactive processing through the interactive processing pool, packaging a processing result into a uniform format message, and sending the uniform format message to the H5 engine layer.
In one embodiment, the native engine layer performs preset interactive processing through an interactive processing pool;
and the native engine layer carries out self-defined interactive processing through the interactive processing pool.
In one embodiment, the H5 page registers snooping on a native engine layer in a message snoop pool through an H5 engine layer;
and the H5 page acquires the H5 software development kit example through the H5 engine layer, calls a request interaction processing instruction of the H5 software development kit, and transmits and sends the interaction type and the interaction parameters to the native engine layer.
In one embodiment, a remise object is created through an H5 software development kit, and a callback message id is generated;
a callback method function and a callback message id of a Promise object are placed in a message monitoring queue pool, and interactive data are sent to a native engine layer in a bottom layer message sending mode;
the native engine layer receives and processes the interactive data, and sends a processing result and a return message id to the H5 software development kit;
and searching a callback method function of the corresponding Promise object in the message monitoring queue pool through the returned message id in the H5 page.
In an embodiment, the application software development kit sets a loading interceptor, and the acquisition of the static resource is realized by the loading interceptor, further comprising the following steps:
when a native engine layer accesses a website through Webview, the loading interceptor judges whether to acquire resources from a cache or write the resources into the cache or not through a cache strategy;
and if the resources can be acquired from the cache or written in, filtering the accessed website through a loading interceptor to acquire the static resources.
In an embodiment, the caching policy further includes a white list, a time, a caching resource size, and a website last modification flag.
In one embodiment, a three-level cache loading scheme is adopted to load resources, and simultaneously, the resources are written into a cache and displayed;
the three-level cache loading scheme comprises memory loading, disk loading and network loading.
In an embodiment, the operating system further includes iOS, android, RN, and Flutter.
In order to achieve the above object, the present invention provides a front-end optimization device for mobile-end hybrid development, comprising at least one memory and at least one processor;
the at least one memory to store a machine readable program;
the at least one processor is configured to invoke the machine readable program to perform the method as described in any one of the above.
To achieve the above object, the present invention provides a computer readable medium, characterized in that, the computer readable medium has stored thereon computer instructions, which, when executed by a processor, cause the processor to execute the method as described in any of the above.
According to the front-end optimization method and device for mobile-end hybrid development, a hybrid development framework is adopted for mobile-end development APP development, interaction parameters and interaction processing data are transmitted and recalled through a message monitoring queue pool, so that unified interaction processing is achieved between an H5 end and a native end, the interaction mode efficiency is higher, the maintainability is better, the speed of webpage access is increased, the development efficiency is greatly improved, and the development cost is reduced.
Drawings
The above and other features, properties and advantages of the present invention will become more apparent from the following description of the embodiments with reference to the accompanying drawings in which like reference numerals denote like features throughout the several views, wherein:
FIG. 1 discloses an architecture diagram of a mobile-end hybrid development-oriented front-end optimization framework according to an embodiment of the invention;
FIG. 2 discloses a flow chart of the unified interaction of H5 and native end according to an embodiment of the invention;
FIG. 3 discloses a flow chart of cache resource interception loading according to an embodiment of the invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
According to the mobile terminal hybrid development-oriented front-end optimization method and device, the mobile terminal interacts uniformly through the mixing container and accelerates the component (H5 Wrapper for short), the H5Wrapper component is an important basic component for supporting the hybrid development mode, and communication interaction between the H5 terminal and the native terminal is achieved. And the Android, the iOS, the RN, the WebView of the applet and the H5 terminal are subjected to unified interaction processing through a mixing container interaction and acceleration component.
Meanwhile, the mobile terminal hybrid development-oriented front-end optimization method and device provided by the invention provide an optimized container caching mechanism, and the speed of the accessed webpage is increased through WebView pre-creation, resource caching, HTML caching, white list setting, caching strategy, caching updating mechanism and other mechanisms.
Fig. 1 is a schematic diagram of a front-end optimization framework for hybrid mobile-end-oriented development according to an embodiment of the present invention, and as shown in fig. 1, the front-end optimization method for hybrid mobile-end-oriented development according to the present invention implements communication interaction between a native end and an H5 end through a hybrid container interaction unification and speed-up component.
The mixed container interaction unification and acceleration component is provided with a message monitoring queue pool, and transmits and recalls interaction parameters and interaction processing data through the message monitoring queue pool, so that the H5 end and the native end realize unified interaction processing;
the message monitoring alignment pool comprises interactive data information, message id and callback method function
As shown in fig. 1, the mixing container interaction unification and acceleration component comprises an H5 engine layer and a native engine layer:
the H5 engine layer is communicated and interacted with the view layer and the native engine layer respectively;
and the native engine layer is respectively communicated and interacted with the H5 engine layer and the operating system.
An operating system, further comprising: iOS, android, RN, flutter, and the like. iOS is a mobile operating system developed by apple inc. Android is a free and open source operating system based on the Linux kernel (which does not contain GNU components). The fact Native (RN for short) is a JS framework of Facebook, and the fact is a derivative product of a Native mobile application platform and supports two major platforms of iOS and Android.
The viewing layer further comprises: front end frames, H5 pages, static web pages, and the like.
In the prior art, the interaction modes of the WebView of Android, iOS, RN, applet and the like and the H5 terminal are not uniform, and the H5 terminal needs to respectively designate a platform interaction mode, so that the code redundancy and the development time are increased.
According to the front-end optimization method for mobile terminal hybrid development, the H5 end and Native end communication interaction is unified through the mixing container interaction unification and the speed-up component, the software development kit SDK is simplified and unified, the SDK support is provided for each end (the H5 end and the Native end), the interaction mode is unified, repeated service interaction in different H5 is extracted into the SDK, the H5 does not need to respectively designate each platform interaction mode, and the service functions are convenient to continuously precipitate.
The mixing container interactive unification and speed-up component (H5 Wrapper for short) shown in fig. 1 is composed of two parts, i.e., an H5 engine layer and a native engine layer.
The H5 engine layer comprises an H5 software development kit (H5-SDK) and is used for providing H5 access and supporting file access, CDN access and npm access.
Providing an access interface for an H5 page through an H5 software development kit, and encapsulating an asynchronous processing mechanism of the H5 page into synchronous call through a Promise form;
and the H5 engine layer receives the messages sent by the native engine layer and processes the messages uniformly.
Key is used as a Key value of one-time interaction, and the timestamp can be replaced by a self-generation mode as long as the timestamp is ensured to be unique.
The H5 engine layer further comprises a JSbridge component, the JSbridge component is a communication mode between JS and Native, the communication between the Native and JS is defined, the Native only calls the JS through a fixed bridge object, and the JS also only calls the Native through the fixed bridge object.
The native engine layer comprises application software development toolkits of different operating system types, and provides access interfaces for receiving messages in a uniform format for the application software of different operating system types through the application software development toolkits.
In the embodiment shown in FIG. 1, the native engine layer comprises an Android software development kit
The system comprises an Android-SDK, an iOS software development kit (iOS-SDK), an RN software development kit (RN-SDK) and a Flutter software development kit (Flutter-SDK), and is used for providing access for apps of different OS types.
The native engine layer is mainly used for providing an interface for receiving messages with a uniform format and internally provided with an interactive processing pool (ActionPool). And the interactive processing pool is a set of native engine layer processing interactive (Action) methods, performs interactive processing through the interactive processing pool, encapsulates the processing result into a uniform format message, and sends the uniform format message to the H5 engine layer.
The interaction processing pool (Action pool) provides preset interaction (Action) processing capacity, and the native engine layer performs preset unified interaction (Action) processing through the interaction processing pool.
The interaction processing pool (Action pool) also provides an addAction (interaction increasing) method for a developer to define actions (interactions), and the native engine layer performs user-defined extended interaction (Action) processing through the interaction processing pool.
Therefore, the interaction processing pool (Action pool) supports customization, and can store the realized 'interaction' Action in an SDK mode, so that the Action supports dynamic maintenance, abstracts a public logic Action, supports expansion by the customization Action, and is simpler to realize and easier to access.
The iOS/Android/RN/Flutter-SDK initializes default interaction (Action), and adds user-defined interaction (Action) through a user-defined interaction processing (addAction) method.
Fig. 2 is a flowchart illustrating unified interaction between H5 and a native side according to an embodiment of the present invention, and as shown in fig. 2, the mixing container interaction unifying and accelerating component (H5 Wrapper for short) unifies and manages messages through a message listening queue pool (ListenerMap), so as to implement bidirectional message passing and support the Promise form of ES 6.
Listnmap is a set of snoops for returning result messages to the native end after the H5 end sends messages to the native end. The information is transmitted in a one-way mode through ListenerMap (information monitoring queue pool) management to be changed into two-way communication, chain calling is supported, the display is more direct, JS codes loaded at the front end are reduced by 50%, action callback names which are appointed to make a round trip are reduced, exception capture and unified processing are supported, the return state is richer, timeout time can be set, and overtime exception mechanism processing is carried out.
A plan is a solution of ES6 asynchronous programming, and is, in syntax, an object or a constructor, which is used to encapsulate an asynchronous operation and obtain its success or failure result, and is represented as an object in the code, mainly used to solve the callback domain problem, and the syntax is "new plan (project)".
In the whole H5 end and Native end interaction unification, the message one-way sending is changed into two-way communication, and the message synchronous returning is realized. The H5 side needs to store the snoop message into the message queue pool ListenerMap, and the core contents in the queue are (key | key value, reserve | success callback, reject | failure callback), where, resolve and reject are the success and failure callback method functions in the plan of ES6, and can be replaced with the callback method function of the callback support type or message bus that it wants.
More specifically, the H5 page registers monitoring on a native engine layer in a message monitoring queue pool through an H5 engine layer;
and the H5 page acquires the H5-SDK instance through the H5 engine layer, calls a doAction command for requesting interactive processing of the H5-SDK, and transmits and sends the interactive type and the interactive parameters to the native engine layer.
The H5 software development kit H5-SDK is used for creating a Promise object and generating a callback message id (MsgID);
a callback method function and a callback message id of a Promise object are put into a ListenerMap set of a message monitoring queue pool, and interactive data (Action) is sent to a native engine layer in a bottom layer message sending mode;
the native engine layer receives and processes the interactive data, and sends a processing result (handler) and a return message id (MsgID) to the H5-SDK after the Action is processed;
and H5, searching a callback method function corresponding to the Promise object in the listenerMap through the returned message id.
The mobile terminal hybrid development-oriented front-end optimization method provided by the invention realizes static resource extraction by packaging each terminal loading interceptor, and realizes cache acceleration by matching with a container cache mechanism.
Fig. 3 discloses a flowchart of cache resource interception loading according to an embodiment of the present invention, and as shown in fig. 3, the application software development kit sets a loading interceptor, and obtains static resources through the loading interceptor, and achieves a mixed-mode native experience through a caching technique.
The resource files of the App accessing the H5 page are all static, the data change is only realized after the App is opened for many times, and the resource loading speed is increased through the cache.
When a native engine layer accesses a website (URL) through Webview, the loading interceptor judges whether to acquire resources from a cache or write the resources into the cache through a cache strategy;
and if the resource can be acquired from the cache or written into the cache, filtering the accessed website through a loading interceptor to acquire the static resource.
In this embodiment, the caching policy further includes a white list, a time (validity period), a caching resource size, and a website last modification flag (H5 update policy).
When the website is accessed, whether the white list website accords with the caching strategy or not is judged, and whether the resource is written into the caching cache or is obtained from the caching cache is determined according to other strategies.
Furthermore, a three-level Cache loading scheme is adopted to load the resources, and simultaneously, the resources are written into a Cache and displayed;
the three-level cache loading scheme comprises memory loading, disk loading and network loading.
The embodiment of the invention also provides a front-end optimization device for mobile-end hybrid development, which comprises at least one memory and at least one processor;
the at least one memory to store a machine readable program;
the at least one processor is configured to invoke the machine readable program to execute a mobile-end hybrid development-oriented front-end optimization method according to any of the above embodiments of the present invention.
The implementation process file of the front-end optimization method for mobile-end hybrid development may be a computer program, stored in a hard disk, and recorded in a processor for execution, so as to implement the method of the present application.
When the implementation process file of the front-end optimization method for mobile-end hybrid development is a computer program, the implementation process file can also be stored in a computer-readable storage medium as a product. For example, computer-readable storage media can include but are not limited to magnetic storage devices (e.g., hard disk, floppy disk, magnetic strips), optical disks (e.g., compact Disk (CD), digital Versatile Disk (DVD)), smart cards, and flash memory devices (e.g., electrically erasable programmable read-only memory (EPROM), card, stick, key drive). In addition, various storage media described herein can represent one or more devices and/or other machine-readable media for storing information. The term "machine-readable medium" can include, without being limited to, wireless channels and various other media (and/or storage media) capable of storing, containing, and/or carrying code and/or instructions and/or data.
Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuitry, field Programmable Gate Arrays (FPGAs), application Specific Integrated Circuits (ASICs), application Specific Standard Products (ASSPs), system on a chip (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.
Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the program codes, when executed by the processor or controller, cause the functions/operations specified in the flowchart and/or block diagram to be performed. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package partly on the machine and partly on a remote machine or entirely on the remote machine or server.
According to the front-end optimization method and device for mobile-end hybrid development, a hybrid development framework is adopted for mobile-end development APP development, interaction parameters and interaction processing data are transmitted and recalled through a message monitoring queue pool, so that unified interaction processing is achieved between an H5 end and a native end, the interaction mode efficiency is higher, the maintainability is better, the speed of webpage access is increased, the development efficiency is greatly improved, and the development cost is reduced.
While, for purposes of simplicity of explanation, the methodologies are shown and described as a series of acts, it is to be understood and appreciated that the methodologies are not limited by the order of acts, as some acts may, in accordance with one or more embodiments, occur in different orders and/or concurrently with other acts from that shown and described herein or not shown and described herein, as would be understood by one skilled in the art.
As used in this application and in the claims, the terms "a," "an," "the," and/or "the" are not intended to be inclusive in the singular, but rather are intended to include the plural, unless the context clearly dictates otherwise. In general, the terms "comprises" and "comprising" are intended to cover only the explicitly identified steps or elements as not constituting an exclusive list and that the method or apparatus may comprise further steps or elements.
The above-described embodiments are provided to enable persons skilled in the art to make or use the invention, and that persons skilled in the art may make modifications or changes to the above-described embodiments without departing from the inventive concept thereof, and therefore the scope of protection of the invention is not limited by the above-described embodiments but should be accorded the widest scope consistent with the innovative features recited in the claims.
Claims (14)
1. The front-end optimization method for mobile-end hybrid development is characterized in that a mobile end realizes communication interaction between a native end and an H5 end through a hybrid container interaction unification and speed-up component:
the mixing container interaction unifying and speed-increasing component is provided with a message monitoring queue pool, and transmits and recalls interaction parameters and interaction processing data through the message monitoring queue pool, so that the H5 end and the primary end realize unified interaction processing;
the message monitoring queue pool comprises interactive data information, message id and a callback method function.
2. The method of claim 1, wherein the blending container interaction unification and acceleration component comprises an H5 engine layer and a native engine layer,
the H5 engine layer is communicated and interacted with the view layer and the native engine layer respectively;
and the native engine layer is in communication interaction with the H5 engine layer and the operating system respectively.
3. The mobile-end hybrid development-oriented front-end optimization method according to claim 2, wherein the H5 engine layer comprises an H5 software development kit;
the view layer comprises a front-end frame, an H5 page and a static webpage;
providing an access interface for an H5 page through an H5 software development kit, and encapsulating an asynchronous processing mechanism of the H5 page into synchronous call through a Promise form;
the H5 engine layer receives the messages sent by the native engine layer and processes the messages in a unified way.
4. The method for front-end optimization of mobile-end hybrid development according to claim 1, wherein the native engine layer comprises application development toolkits of different operating system types;
and providing an access interface for receiving messages in a uniform format for application software of different operating system types through an application software development toolkit.
5. The front-end optimization method for mobile-end-oriented hybrid development according to claim 1, wherein the native engine layer is built-in with an interactive processing pool;
and performing interactive processing through the interactive processing pool, packaging a processing result into a uniform format message, and sending the uniform format message to the H5 engine layer.
6. The mobile-end-oriented hybrid development front-end optimization method according to claim 5, wherein the native engine layer performs preset interactive processing through an interactive processing pool;
and the native engine layer carries out self-defined interactive processing through the interactive processing pool.
7. The front-end optimization method for mobile-end-oriented hybrid development according to claim 3, wherein the H5 page registers snooping of a native engine layer in a message snoop pool through an H5 engine layer;
the H5 page obtains an H5 software development kit example through an H5 engine layer, calls a request interaction processing instruction of the H5 software development kit, and transmits and sends an interaction type and an interaction parameter to a native engine layer.
8. The front-end optimization method for mobile-end-oriented hybrid development according to claim 7, wherein a remise object is created through an H5 software development kit, and a callback message id is generated;
a callback method function and a callback message id of a Promise object are placed in a message monitoring queue pool, and interactive data are sent to a native engine layer in a bottom layer message sending mode;
the native engine layer receives and processes the interactive data, and sends a processing result and a return message id to the H5 software development kit;
and the H5 page searches a callback method function corresponding to the Promise object in the message monitoring queue pool through the returned message id.
9. The mobile-end-oriented hybrid development front-end optimization method according to claim 4, wherein the application software development kit is provided with a loading interceptor, and the acquisition of static resources is realized through the loading interceptor, further comprising the steps of:
when a native engine layer accesses a website through Webview, the loading interceptor judges whether to acquire resources from a cache or write the resources into the cache according to a cache strategy;
and if the resource can be acquired from the cache or written into the cache, filtering the accessed website through a loading interceptor to acquire the static resource.
10. The method of claim 9, wherein the caching policy further includes a white list, a time, a caching resource size, and a website last modification flag.
11. The front-end optimization method for mobile-end-oriented hybrid development according to claim 9, wherein a three-level cache loading scheme is adopted to load resources and simultaneously write in and display a cache;
the third-level cache loading scheme comprises memory loading, disk loading and network loading.
12. The method of claim 2, wherein the operating system further comprises: iOS, android, RN and Flutter.
13. The front-end optimization device for hybrid development of the mobile end is characterized by comprising at least one memory and at least one processor;
the at least one memory to store a machine readable program;
the at least one processor, configured to invoke the machine readable program to perform the method of any of claims 1 to 12.
14. A computer readable medium having stored thereon computer instructions which, when executed by a processor, cause the processor to perform the method of any of claims 1 to 12.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211607056.4A CN115904341A (en) | 2022-12-14 | 2022-12-14 | Front-end optimization method and device for mobile-end hybrid development |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211607056.4A CN115904341A (en) | 2022-12-14 | 2022-12-14 | Front-end optimization method and device for mobile-end hybrid development |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115904341A true CN115904341A (en) | 2023-04-04 |
Family
ID=86472463
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211607056.4A Pending CN115904341A (en) | 2022-12-14 | 2022-12-14 | Front-end optimization method and device for mobile-end hybrid development |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115904341A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117667076A (en) * | 2023-12-06 | 2024-03-08 | 北京波士山信息技术有限公司 | Cross-component message transfer method and system for dynamic page |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107908426A (en) * | 2017-12-21 | 2018-04-13 | 江苏国泰新点软件有限公司 | Design method, device, mobile terminal and the storage medium of cross-platform program |
| CN108762956A (en) * | 2018-05-31 | 2018-11-06 | 康键信息技术（深圳）有限公司 | Obtain method, server, mobile terminal and the storage medium of Native local datas |
| WO2020238277A1 (en) * | 2019-05-24 | 2020-12-03 | ***股份有限公司 | Access method based on h5 access mode, access assembly thereof and mobile terminal |
| CN112256450A (en) * | 2020-10-19 | 2021-01-22 | 天元大数据信用管理有限公司 | Method and tool for realizing unified interaction between web end and mobile end based on JSbridge |
| CN112559928A (en) * | 2020-12-24 | 2021-03-26 | 成都新希望金融信息有限公司 | Page processing method and device based on hybrid development, electronic equipment and storage medium |
| CN114077423A (en) * | 2021-10-18 | 2022-02-22 | 青岛民航凯亚***集成有限公司 | Airport APP development container architecture based on mobile cross-platform |
-
2022
- 2022-12-14 CN CN202211607056.4A patent/CN115904341A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107908426A (en) * | 2017-12-21 | 2018-04-13 | 江苏国泰新点软件有限公司 | Design method, device, mobile terminal and the storage medium of cross-platform program |
| CN108762956A (en) * | 2018-05-31 | 2018-11-06 | 康键信息技术（深圳）有限公司 | Obtain method, server, mobile terminal and the storage medium of Native local datas |
| WO2020238277A1 (en) * | 2019-05-24 | 2020-12-03 | ***股份有限公司 | Access method based on h5 access mode, access assembly thereof and mobile terminal |
| CN112256450A (en) * | 2020-10-19 | 2021-01-22 | 天元大数据信用管理有限公司 | Method and tool for realizing unified interaction between web end and mobile end based on JSbridge |
| CN112559928A (en) * | 2020-12-24 | 2021-03-26 | 成都新希望金融信息有限公司 | Page processing method and device based on hybrid development, electronic equipment and storage medium |
| CN114077423A (en) * | 2021-10-18 | 2022-02-22 | 青岛民航凯亚***集成有限公司 | Airport APP development container architecture based on mobile cross-platform |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117667076A (en) * | 2023-12-06 | 2024-03-08 | 北京波士山信息技术有限公司 | Cross-component message transfer method and system for dynamic page |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111158818B (en) | Page rendering method and device | |
| US11119812B2 (en) | Method and device for processing application program page according to a common interface container | |
| US20200410031A1 (en) | Systems and methods for cloud computing | |
| CN109002362B (en) | Service method, device and system and electronic equipment | |
| CN108964968B (en) | Service access management method and system in container cloud environment | |
| CN107045438B (en) | Application top view processing method, device and component | |
| WO2022135178A1 (en) | Micro-frontend system, sub-application loading method, electronic device, computer program product, and computer readable storage medium | |
| TW202006538A (en) | Method and device for running program, calculating apparatus and storage medium | |
| US8826276B1 (en) | Multi-threaded virtual machine processing on a web page | |
| CN109388766A (en) | The method and apparatus of page load | |
| US20190034195A1 (en) | Systems and methods for providing patchable rom firmware | |
| CN112306587A (en) | Page display processing method and device and terminal equipment | |
| CN113419710B (en) | Development method and device of applet, electronic equipment and medium | |
| CN115904341A (en) | Front-end optimization method and device for mobile-end hybrid development | |
| CN112667305A (en) | Page display method and device | |
| CN112087370A (en) | Method, system, electronic device and computer-readable storage medium for issuing GitHub Issues | |
| CN113253999B (en) | Plug-in data access method, data source management system and interface access method | |
| CN109343970B (en) | Application program-based operation method and device, electronic equipment and computer medium | |
| CN112395098B (en) | Application program interface calling method and device, storage medium and electronic equipment | |
| CN113641594B (en) | Cross-terminal automatic testing method and related device | |
| CN111367577A (en) | Method, device and terminal for loading plug-in of application | |
| CN107092601B (en) | Resource file construction method, resource file application method and device | |
| CN114780211A (en) | Method for managing a secure container and system based on a secure container | |
| CN114254232A (en) | Cloud product page generation method and device, computer equipment and storage medium | |
| CN112925527B (en) | Calling method, calling device, storage medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20230404 |
|
| RJ01 | Rejection of invention patent application after publication |