CN111427645A - H5-based cross-terminal adaptive display method and device - Google Patents
H5-based cross-terminal adaptive display method and device Download PDFInfo
- Publication number
- CN111427645A CN111427645A CN202010199211.8A CN202010199211A CN111427645A CN 111427645 A CN111427645 A CN 111427645A CN 202010199211 A CN202010199211 A CN 202010199211A CN 111427645 A CN111427645 A CN 111427645A
- Authority
- CN
- China
- Prior art keywords
- terminal
- template
- app
- file
- background
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Abstract
The invention discloses a cross-terminal self-adaptive display method and device based on H5, the method comprises the steps that a terminal sends equipment information of the terminal to a background when determining that an APP is started, the equipment information of the terminal comprises a terminal type, so that the background determines an H5 template of the APP according to the terminal type, analyzes the H5 template of the APP sent by the background, determines a CSS file and a JS file list required by the H5 template according to the resolution of the terminal, and loads an H5 page of the APP according to the CSS file and each JS file corresponding to the H5 template and the resolution of the terminal. The terminal type of the terminal is sent to the background, so that an H5 template of the APP of the terminal is adapted, the CSS file and the JS file needed by the H5 template are pulled from the background based on the current resolution of the terminal, the H5 page of the APP is loaded, the research and development efficiency of the APP can be improved, and the labor and time cost are saved.
Description
Technical Field
The embodiment of the invention relates to the technical field of smart home, in particular to a cross-terminal self-adaptive display method and device based on H5.
Background
At present, when a developer designs an APP, the APP is developed on a mobile phone in a preferential mode basically, and after the APP is developed successfully on the mobile phone, if the APP is transplanted to other types of terminals for use, a set of codes needs to be developed for the APP again, UI is redesigned, and development is carried out again. Under the condition, the development cycle is long, the maintenance workload is large, and a large amount of time and manpower are wasted.
Disclosure of Invention
The embodiment of the invention provides a cross-terminal self-adaptive display method and device based on H5, which are used for realizing self-adaptive display of the same APP on different terminals and improving APP research and development efficiency.
In a first aspect, an embodiment of the present invention provides a cross-terminal adaptive display method based on H5, including:
the method comprises the steps that when determining that the APP is started, the terminal sends equipment information of the terminal to a background, wherein the equipment information of the terminal comprises a terminal type, so that the background determines an H5 template of the APP according to the terminal type;
the terminal analyzes the APP H5 template sent by the background, and determines a CSS file and a JS file list required by the H5 template according to the resolution of the terminal;
the terminal requests to download the CSS file corresponding to the resolution of the terminal and each JS file corresponding to the JS file list from the background according to the CSS file and the JS file list required by the H5 template;
the terminal is according to the H5 template and the CSS file that the resolution ratio of terminal corresponds with each JS file, load the H5 page of APP.
Among the above-mentioned technical scheme, send the backstage through the terminal type with the terminal to obtain the APP's of this terminal of adaptation H5 template, and pull required CSS file and JS file of this H5 template from the backstage based on the current resolution ratio of terminal, thereby load the H5 page of this APP, can realize the multiple terminal of research and development adaptation of APP once, need not to carry out research and development many times to different terminals, thereby improve APP's research and development efficiency, saved manpower and time cost.
Optionally, the device information of the terminal further includes a manufacturer and a model, so that the background determines the H5 template of the APP according to the terminal type, the manufacturer, and the model.
In a second aspect, the present invention provides a method for cross-terminal adaptive display based on H5, the method includes:
the background acquires equipment information sent by the terminal; the device information is sent by the terminal when determining that the APP is started, and the device information comprises a terminal type;
the background determines an H5 template corresponding to the APP from a template library according to the terminal type;
the background sends the H5 template corresponding to the APP to the terminal, so that the terminal analyzes the H5 template corresponding to the APP to determine a CSS file and a JS file list required by the H5 template;
the backstage is receiving behind the download request of terminal, in rendering storehouse of CSS and the JS script storehouse, each JS file is sent for in required CSS file of H5 template and the JS file list the terminal, so that the terminal loading the H5 page of APP.
Optionally, the determining, by the background, the H5 template corresponding to the APP from a template library according to the terminal type, and sending the H5 template corresponding to the APP to the terminal includes:
the background determines a routing path of an H5 template corresponding to the APP from a template library according to the terminal type, and sends the routing path to the terminal, so that the terminal downloads the H5 template corresponding to the APP according to the routing path;
and the background sends the H5 template corresponding to the APP to the terminal when receiving a request of downloading the H5 template from the terminal.
Optionally, the device information further includes a manufacturer and a model;
the background determines an H5 template corresponding to the APP from a template library according to the terminal type, and the method comprises the following steps:
and the background determines an H5 template corresponding to the APP from the template library according to the terminal type, the manufacturer and the model in sequence.
In a third aspect, an embodiment of the present invention provides an apparatus for cross-terminal adaptive display based on H5, including:
a sending unit, configured to send device information of a terminal to a background when determining that an APP is started, where the device information of the terminal includes a terminal type, so that the background determines an H5 template of the APP according to the terminal type;
the processing unit is used for analyzing the APP H5 template sent by the background and determining a CSS file and a JS file list required by the H5 template according to the resolution of the terminal; according to the CSS file and the JS file list required by the H5 template, downloading the CSS file corresponding to the resolution of the terminal and each JS file corresponding to the JS file list from the background request; and loading the H5 page of the APP according to the H5 template and the CSS file corresponding to the resolution of the terminal and each JS file.
Optionally, the device information of the terminal further includes a manufacturer and a model, so that the background determines the H5 template of the APP according to the terminal type, the manufacturer, and the model.
In a fourth aspect, an embodiment of the present invention provides an apparatus for cross-terminal adaptive display based on H5, including:
the device comprises an acquisition unit, a processing unit and a processing unit, wherein the acquisition unit is used for acquiring device information sent by a terminal; the device information is sent by the terminal when determining that the APP is started, and the device information comprises a terminal type;
the processing unit is used for determining an H5 template corresponding to the APP from a template library according to the terminal type;
a sending unit, configured to send the H5 template corresponding to the APP to the terminal, so that the terminal analyzes the H5 template corresponding to the APP to determine a CSS file and a JS file list required by the H5 template; receiving the download request of the terminal, sending the CSS files required by the H5 template and each JS file in the JS file list to the terminal so as to load the terminal on the H5 page of the APP.
Optionally, the processing unit is specifically configured to:
determining a routing path of the H5 template corresponding to the APP from a template library according to the terminal type, and sending the routing path to the terminal, so that the terminal downloads the H5 template corresponding to the APP according to the routing path;
and when a request of downloading an H5 template by the terminal is received, controlling the sending unit to send the H5 template corresponding to the APP to the terminal.
Optionally, the device information further includes a manufacturer and a model;
the processing unit is specifically configured to:
and determining an H5 template corresponding to the APP from the template library according to the terminal type, the manufacturer and the model in sequence.
In a fifth aspect, an embodiment of the present invention further provides a computing device, including:
a memory for storing program instructions;
and the processor is used for calling the program instructions stored in the memory and executing the method for cross-terminal adaptive display based on H5 according to the obtained program.
In a sixth aspect, the embodiment of the present invention further provides a computer-readable non-volatile storage medium, which includes computer-readable instructions, and when the computer reads and executes the computer-readable instructions, the computer is caused to execute the above method for cross-terminal adaptive display based on H5.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings needed to be used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.
Fig. 1 is a schematic diagram of a system architecture according to an embodiment of the present invention;
fig. 2 is a schematic flowchart of a cross-terminal adaptive display method based on H5 according to an embodiment of the present invention;
FIG. 3 is a diagram illustrating a directory organization of a file store according to an embodiment of the present invention;
FIG. 4 is a diagram illustrating CSS file adaptation according to an embodiment of the present invention;
fig. 5 is a schematic flowchart of determining a routing path of an H5 template according to an embodiment of the present invention;
fig. 6 is a flowchart illustrating a method for cross-terminal adaptive display based on H5 according to an embodiment of the present invention;
fig. 7 is a schematic structural diagram of an apparatus for cross-terminal adaptive display based on H5 according to an embodiment of the present invention;
fig. 8 is a schematic structural diagram of an apparatus for cross-terminal adaptive display based on H5 according to an embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention clearer, the present invention will be described in further detail with reference to the accompanying drawings, and it is apparent that the described embodiments are only a part of the embodiments of the present invention, not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Fig. 1 illustrates an exemplary system architecture to which an embodiment of the present invention is applicable, which may include a plurality of terminals 100 and a backend 200.
The terminals 100 are different types of devices, for example, different types of devices such as a mobile phone, a television, a refrigerator, a washing machine, a magic mirror, and the like, and the APP can be installed in the terminals 100.
The background 200 is a server corresponding to the APP installed on each terminal 100, and an H5 template library, a CSS rendering library, and a JS script library are provided on the background 200. The H5 template library stores H5 templates corresponding to different terminal types of the APP, each H5 template corresponds to one set of CSS rendering library and one set of JS script library, and each set of CSS rendering library stores rendering files suitable for different screen sizes and resolutions. Each set of JS script library holds a set of JS script files that its corresponding H5 template needs to be associated with.
It should be noted that the structure shown in fig. 1 is only an example, and the embodiment of the present invention is not limited thereto.
Based on the above description, fig. 2 shows in detail the flow of a method for cross-terminal adaptive display based on H5 according to an embodiment of the present invention, which may be performed by an apparatus for cross-terminal adaptive display based on H5. The process of APP adaptive display will be described below by way of terminal interaction with the background.
As shown in fig. 2, the process specifically includes:
step 201, the terminal sends the device information of the terminal to the background when determining that the APP is started.
In the embodiment of the invention, when the APP is started on the terminal, the device information of the terminal is collected and then reported to the background, and the reported device information can include the terminal type. So that the background determines the H5 template corresponding to the APP from the template library according to the terminal type.
It should be noted that the device information may further include a manufacturer and a model, that is, a manufacturer of the terminal and a model of the terminal, for example, the device type of the terminal may be a refrigerator, the manufacturer is a manufacturer of the refrigerator, and the model is a model of the refrigerator. The background may in turn select an adapted H5 template for the APP depending on the terminal type, manufacturer and model. The H5 template may be customized by manufacturer and model.
Step 202, the background determines an H5 template corresponding to the APP from a template library according to the terminal type.
When the background determines the H5 template corresponding to the APP, if the device information only includes the terminal type, the background directly determines the H5 template according to the terminal type. If the device information further includes a manufacturer and a model, the H5 template corresponding to the APP needs to be determined sequentially according to the terminal type, the manufacturer, and the model.
Specifically, the background determines a routing path of an H5 template corresponding to the APP from the template library according to the terminal type, and sends the routing path to the terminal, so that the terminal downloads the H5 template corresponding to the APP according to the routing path, and the background sends the H5 template corresponding to the APP to the terminal when receiving a request for downloading the H5 template by the terminal.
In the embodiment of the invention, resource libraries, namely an H5 template library, a CSS rendering library and a JS script library, are arranged in the background. The background may be a WEB server, and when storing the WEB page file, the background may store the WEB page file according to a directory organization as shown in fig. 3, specifically:
1) the routing framework under the root directory is classified into 3 levels:
level 2 routing: general design, or routing according to manufacturers;
level 3 routing: if the level 2 route is the manufacturer, then the level 3 route is entered, including the general design, or the route is performed according to different models under the current manufacturer. The routing modes of manufacturers and models are customized according to different projects.
2) After passing through the routing framework, the specific h5+ js + css combined web implementation framework is entered.
Wherein:
under the common directory of level 1 routes corresponding to each device type, a complete set of designs (h5+ js + css) is included, which is the basis of the universal display.
On the basis of general design, if customized requirements exist, all the differentiated realization is put into a directory corresponding to the equipment type \ manufacturer \ model.
3) CSS rendering library
Files in the CSS rendering library are organized according to the methods of hdpi, mdpi and ldpi so as to adapt to display of different terminal resolutions. Where this resolution list can be extended as needed, such as: xhdpi, xxhdpi, and the like.
Specifically, under a certain resolution directory, all related CSS files of the corresponding resolution are saved. For example, rendering files such as 1.css, 2.css, and 3.css are held under mdpi.
When designing the H5 template, a process of calling different CSS files according to different resolutions may be preset, as shown in fig. 4. Meanwhile, the CSS file can realize the adaptation of screens with different resolutions through a response type layout. And in the responsive layout, a plurality of CSS styles are written according to different screen size ranges by using the @ media rule of the CSS to adapt to various screen sizes.
When the background searches for the H5 template path, it can be seen that the process shown in fig. 5 is particularly implemented by using an adaptive selection frame, where a front end of the adaptive selection frame is connected to the user, a back end of the adaptive selection frame is connected to a resource library (including an H5 template library, a JS script library, and a CSS rendering library), and after the user reports basic information of the terminal, the adaptive selection frame is responsible for determining which H5 template should be returned to the terminal.
As shown in fig. 5, the specific process includes:
step 501, receiving a request message for reporting basic information by an APP.
And step 507, searching whether the resource library has a catalog matched with the equipment type/manufacturer/model, if so, turning to step 508, and otherwise, turning to step 509.
It should be noted that if the manufacturer + model customization scheme is to be enabled, the H5 template corresponding to the top page must be placed under the corresponding routing path, which is the entry of the application load.
And 203, the background sends the H5 template of the APP to the terminal.
After the background determines the H5 template of APP, the H5 template of APP may be sent to the terminal upon receiving a request sent by the terminal to download the H5 template.
And step 204, the terminal analyzes the H5 template of the APP sent by the background, and determines the CSS file and the JS file list required by the H5 template according to the resolution of the terminal.
The terminal can analyze the H5 template of the APP sent by the background, and then determine the CSS file and the JS file list required by the H5 template according to the configuration in the H5 template and the resolution of the terminal.
And step 205, the terminal requests to download the CSS file corresponding to the resolution of the terminal and each JS file corresponding to the JS file list from the background according to the CSS file and the JS file list required by the H5 template.
The terminal needs to send a downloading request to the background, and the CSS file corresponding to the resolution of the terminal and each JS file corresponding to the JS file list are downloaded from the background.
And step 206, after receiving the downloading request of the terminal, the background sends the CSS files required by the H5 template in the CSS rendering library and the JS script library and each JS file in the JS file list to the terminal.
After receiving the download request of the terminal, the background can send the files corresponding to the CSS rendering library and the JS script library to the terminal according to the download request.
And step 207, loading the H5 page of the APP by the terminal according to the H5 template, the CSS file corresponding to the resolution of the terminal and each JS file.
After the terminal has received all the files, it can load the H5 page of APP.
That is to say, the process of starting and loading the APP home page by the terminal may be that, first, basic information of the terminal is reported, including the type (type agreed with the background), manufacturer, and model of the terminal, a home page H5 template path (including a relative path of a complete route) returned by the background is obtained, and an H5 template is downloaded; then the webview component analyzes the H5 template, and pulls the JS + CSS file as required according to the configuration in the H5 template; and finally, loading the APP home page according to the H5 template and the pulled JS + CSS file.
In order to better explain the embodiment of the present invention, the flow of the APP adaptive display described above will be described in a specific implementation scenario.
As shown in fig. 6, the method specifically includes:
step 601, starting an application.
The user starts the APP on the terminal.
Step 602, reporting the basic information of the terminal.
The APP collects basic information of the equipment and reports the basic information to a background, and the reporting content comprises the following steps: terminal type, manufacturer, model.
And 603, analyzing the reported content, and finding out the routing path of the H5 template corresponding to the terminal.
And the self-adaptive selection framework receives and analyzes the information reported by the APP, and then searches a corresponding H5 template from an H5 template library according to the terminal type to obtain a routing path of an H5 template corresponding to the terminal.
Step 604 returns the routing path of the H5 template used by the terminal.
The adaptive selection framework returns the routing path of the H5 template used by the APP terminal.
Step 605, resolve template paths and assemble complete addresses.
The APP resolves the routing path of the H5 template and then assembles the complete address.
At step 606, the H5 template is pulled.
The APP pulls the H5 template from the H5 template library according to the full address.
Step 607, return to the H5 template.
H5 template library returns H5 templates to APP
And step 608, analyzing the H5 template, and pulling the corresponding CSS rendering file according to the current resolution of the terminal.
The APP analyzes the H5 template, selects the CSS file matched with the resolution of the APP according to the CSS files with different resolutions predefined in the template, and requests the CSS rendering library of the background for downloading.
Step 609, pull the CSS rendering file with the corresponding resolution.
And the APP pulls the CSS rendering file with the corresponding resolution from the CSS rendering library of the background.
Step 610, return CSS render file.
And the CSS rendering library of the background returns the CSS rendering file to the APP.
And step 611, analyzing the H5 template to obtain a JS script file list.
And the APP analyzes the H5 template to obtain the JS file list.
And step 612, sequentially pulling the JS script files.
And sequentially pulling the corresponding JS script files from the APP to the background JS script library.
And step 613, returning to the JS script file.
And the background JS script library returns the JS script file to the APP.
At step 614, the page is loaded.
After the files are all acquired, the APP loads the H5 page normally. And the subsequent page jump is also based on the same process to load the page.
The above embodiment shows that the terminal sends the device information of the terminal to the background when determining that the APP is started, the device information of the terminal includes the terminal type, so that the background determines the H5 template of the APP according to the terminal type, analyzes the H5 template of the APP sent by the background, and determines the CSS file and the JS file list required by the H5 template according to the resolution of the terminal, according to the CSS file and the JS file list required by the H5 template, the CSS file corresponding to the resolution of the terminal and each JS file corresponding to the JS file list are downloaded from the background, according to the CSS file corresponding to the resolution of the H5 template and the terminal and each JS file, and the H5 page of the APP is loaded. The terminal type of the terminal is sent to the background, so that the APP H5 template adaptive to the terminal is obtained, the CSS file and the JS file required by the H5 template are pulled from the background based on the current resolution of the terminal, the H5 page of the APP is loaded, multiple terminals of one-time APP research and development adaptation can be achieved, multiple research and development are not needed for different terminals, the APP research and development efficiency is improved, and manpower and time cost are saved.
Based on the same technical concept, fig. 7 exemplarily shows a structure of an H5-based cross-terminal adaptive display apparatus, which can perform a flow of H5-based cross-terminal adaptive display, according to an embodiment of the present invention.
As shown in fig. 7, the apparatus specifically includes:
a sending unit 701, configured to send device information of a terminal to a background when determining that an APP is started, where the device information of the terminal includes a terminal type, so that the background determines an H5 template of the APP according to the terminal type;
the processing unit 702 is configured to analyze the H5 template of the APP sent by the background, and determine a CSS file and a JS file list required by the H5 template according to the resolution of the terminal; according to the CSS file and the JS file list required by the H5 template, downloading the CSS file corresponding to the resolution of the terminal and each JS file corresponding to the JS file list from the background request; and loading the H5 page of the APP according to the H5 template and the CSS file corresponding to the resolution of the terminal and each JS file.
Optionally, the device information of the terminal further includes a manufacturer and a model, so that the background determines the H5 template of the APP according to the terminal type, the manufacturer, and the model.
Based on the same technical concept, fig. 8 exemplarily shows a structure of an H5-based cross-terminal adaptive display apparatus, which can perform a flow of H5-based cross-terminal adaptive display, according to an embodiment of the present invention.
As shown in fig. 8, the apparatus includes:
an obtaining unit 801, configured to obtain device information sent by a terminal; the device information is sent by the terminal when determining that the APP is started, and the device information comprises a terminal type;
a processing unit 802, configured to determine, according to the terminal type, an H5 template corresponding to the APP from a template library;
a sending unit 803, configured to send the H5 template corresponding to the APP to the terminal, so that the terminal analyzes the H5 template corresponding to the APP to determine a CSS file and a JS file list required by the H5 template; receiving the download request of the terminal, sending the CSS files required by the H5 template and each JS file in the JS file list to the terminal so as to load the terminal on the H5 page of the APP.
Optionally, the processing unit 802 is specifically configured to:
determining a routing path of the H5 template corresponding to the APP from a template library according to the terminal type, and sending the routing path to the terminal, so that the terminal downloads the H5 template corresponding to the APP according to the routing path;
and when receiving a request for downloading an H5 template from the terminal, controlling the sending unit 803 to send the H5 template corresponding to the APP to the terminal.
Optionally, the device information further includes a manufacturer and a model;
the processing unit 802 is specifically configured to:
and determining an H5 template corresponding to the APP from the template library according to the terminal type, the manufacturer and the model in sequence.
Based on the same technical concept, an embodiment of the present invention further provides a computing device, including:
a memory for storing program instructions;
and the processor is used for calling the program instructions stored in the memory and executing the method for cross-terminal adaptive display based on H5 according to the obtained program.
Based on the same technical concept, the embodiment of the present invention also provides a computer-readable non-volatile storage medium, which includes computer-readable instructions, and when the computer reads and executes the computer-readable instructions, the computer is caused to execute the above method for cross-terminal adaptive display based on H5.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
While preferred embodiments of the present invention have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including preferred embodiments and all such alterations and modifications as fall within the scope of the invention.
It will be apparent to those skilled in the art that various changes and modifications may be made in the present invention without departing from the spirit and scope of the invention. Thus, if such modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include such modifications and variations.
Claims (10)
1. A cross-terminal adaptive display method based on H5 is characterized by comprising the following steps:
the method comprises the steps that when determining that the APP is started, the terminal sends equipment information of the terminal to a background, wherein the equipment information of the terminal comprises a terminal type, so that the background determines an H5 template of the APP according to the terminal type;
the terminal analyzes the APP H5 template sent by the background, and determines a CSS file and a JS file list required by the H5 template according to the resolution of the terminal;
the terminal requests to download the CSS file corresponding to the resolution of the terminal and each JS file corresponding to the JS file list from the background according to the CSS file and the JS file list required by the H5 template;
the terminal is according to the H5 template and the CSS file that the resolution ratio of terminal corresponds with each JS file, load the H5 page of APP.
2. The method of claim 1, wherein the device information of the terminal further includes a vendor and a model number, so that the background determines an H5 template of the APP according to the terminal type, the vendor and the model number.
3. A method for cross-terminal adaptive display based on H5 is characterized by comprising the following steps:
the background acquires equipment information sent by the terminal; the device information is sent by the terminal when determining that the APP is started, and the device information comprises a terminal type;
the background determines an H5 template corresponding to the APP from a template library according to the terminal type;
the background sends the H5 template corresponding to the APP to the terminal, so that the terminal analyzes the H5 template corresponding to the APP to determine a CSS file and a JS file list required by the H5 template;
the backstage is receiving behind the download request of terminal, in rendering storehouse of CSS and the JS script storehouse, each JS file is sent for in required CSS file of H5 template and the JS file list the terminal, so that the terminal loading the H5 page of APP.
4. The method of claim 3, wherein the background determines an H5 template corresponding to the APP from a template library according to the terminal type, and sends an H5 template corresponding to the APP to the terminal, including:
the background determines a routing path of an H5 template corresponding to the APP from a template library according to the terminal type, and sends the routing path to the terminal, so that the terminal downloads the H5 template corresponding to the APP according to the routing path;
and the background sends the H5 template corresponding to the APP to the terminal when receiving a request of downloading the H5 template from the terminal.
5. The method of claim 3 or 4, wherein the device information further includes a manufacturer and a model number;
the background determines an H5 template corresponding to the APP from a template library according to the terminal type, and the method comprises the following steps:
and the background determines an H5 template corresponding to the APP from the template library according to the terminal type, the manufacturer and the model in sequence.
6. An apparatus for H5-based cross-terminal adaptive display, comprising:
a sending unit, configured to send device information of a terminal to a background when determining that an APP is started, where the device information of the terminal includes a terminal type, so that the background determines an H5 template of the APP according to the terminal type;
the processing unit is used for analyzing the APP H5 template sent by the background and determining a CSS file and a JS file list required by the H5 template according to the resolution of the terminal; according to the CSS file and the JS file list required by the H5 template, downloading the CSS file corresponding to the resolution of the terminal and each JS file corresponding to the JS file list from the background request; and loading the H5 page of the APP according to the H5 template and the CSS file corresponding to the resolution of the terminal and each JS file.
7. The apparatus of claim 6, wherein the device information of the terminal further comprises a vendor and a model, such that the backend determines an H5 template of the APP according to the terminal type, the vendor, and the model.
8. An apparatus for H5-based cross-terminal adaptive display, comprising:
the device comprises an acquisition unit, a processing unit and a processing unit, wherein the acquisition unit is used for acquiring device information sent by a terminal; the device information is sent by the terminal when determining that the APP is started, and the device information comprises a terminal type;
the processing unit is used for determining an H5 template corresponding to the APP from a template library according to the terminal type;
a sending unit, configured to send the H5 template corresponding to the APP to the terminal, so that the terminal analyzes the H5 template corresponding to the APP to determine a CSS file and a JS file list required by the H5 template; receiving the download request of the terminal, sending the CSS files required by the H5 template and each JS file in the JS file list to the terminal so as to load the terminal on the H5 page of the APP.
9. A computing device, comprising:
a memory for storing program instructions;
a processor for calling program instructions stored in said memory to execute the method of any one of claims 1 to 5 in accordance with the obtained program.
10. A computer-readable non-transitory storage medium including computer-readable instructions which, when read and executed by a computer, cause the computer to perform the method of any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010199211.8A CN111427645A (en) | 2020-03-20 | 2020-03-20 | H5-based cross-terminal adaptive display method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010199211.8A CN111427645A (en) | 2020-03-20 | 2020-03-20 | H5-based cross-terminal adaptive display method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111427645A true CN111427645A (en) | 2020-07-17 |
Family
ID=71548255
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010199211.8A Pending CN111427645A (en) | 2020-03-20 | 2020-03-20 | H5-based cross-terminal adaptive display method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111427645A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112416462A (en) * | 2020-11-28 | 2021-02-26 | 郑州信大捷安信息技术股份有限公司 | Offline H5 application loading method and system |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150089352A1 (en) * | 2013-09-25 | 2015-03-26 | Akamai Technologies, Inc. | Key Resource Prefetching Using Front-End Optimization (FEO) Configuration |
| CN104881430A (en) * | 2015-04-17 | 2015-09-02 | 北京天耀宏图科技有限公司 | Cross-terminal self-adaptation visual electronic map implementation method based on pure network script languages |
| CN106293743A (en) * | 2016-08-11 | 2017-01-04 | 上海泛微网络科技股份有限公司 | A kind of mobile modeling and build Mobile solution the method realizing cross-platform issue |
| CN107943478A (en) * | 2017-11-29 | 2018-04-20 | 厦门市美亚柏科信息股份有限公司 | A kind of exploitation of Web page application program and loading method, device, terminal and medium |
| CN108345482A (en) * | 2017-12-29 | 2018-07-31 | 广州品唯软件有限公司 | The self-defined edit methods of dynamic page, device, electronic equipment and storage medium |
| CN109597617A (en) * | 2019-01-25 | 2019-04-09 | 北京字节跳动网络技术有限公司 | The method and apparatus for quickly generating the business page based on template |
| CN109739504A (en) * | 2018-12-28 | 2019-05-10 | 浙江网新恩普软件有限公司 | A method of the H5 business handling page is automatically generated according to backstage configuration |
| CN109948090A (en) * | 2019-03-08 | 2019-06-28 | 腾讯科技（深圳）有限公司 | Webpage loading method and device |
| CN110020276A (en) * | 2017-08-22 | 2019-07-16 | 武汉斗鱼网络科技有限公司 | The compatible processing method and processing device of the H5 page is embedded in a kind of APP |
| CN110321177A (en) * | 2019-06-18 | 2019-10-11 | 北京奇艺世纪科技有限公司 | A kind of mobile application localization loading method, device and electronic equipment |
| CN110647699A (en) * | 2019-08-13 | 2020-01-03 | 平安普惠企业管理有限公司 | Web page rendering method and device, computer equipment and storage medium |
-
2020
- 2020-03-20 CN CN202010199211.8A patent/CN111427645A/en active Pending
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150089352A1 (en) * | 2013-09-25 | 2015-03-26 | Akamai Technologies, Inc. | Key Resource Prefetching Using Front-End Optimization (FEO) Configuration |
| CN104881430A (en) * | 2015-04-17 | 2015-09-02 | 北京天耀宏图科技有限公司 | Cross-terminal self-adaptation visual electronic map implementation method based on pure network script languages |
| CN106293743A (en) * | 2016-08-11 | 2017-01-04 | 上海泛微网络科技股份有限公司 | A kind of mobile modeling and build Mobile solution the method realizing cross-platform issue |
| CN110020276A (en) * | 2017-08-22 | 2019-07-16 | 武汉斗鱼网络科技有限公司 | The compatible processing method and processing device of the H5 page is embedded in a kind of APP |
| CN107943478A (en) * | 2017-11-29 | 2018-04-20 | 厦门市美亚柏科信息股份有限公司 | A kind of exploitation of Web page application program and loading method, device, terminal and medium |
| CN108345482A (en) * | 2017-12-29 | 2018-07-31 | 广州品唯软件有限公司 | The self-defined edit methods of dynamic page, device, electronic equipment and storage medium |
| CN109739504A (en) * | 2018-12-28 | 2019-05-10 | 浙江网新恩普软件有限公司 | A method of the H5 business handling page is automatically generated according to backstage configuration |
| CN109597617A (en) * | 2019-01-25 | 2019-04-09 | 北京字节跳动网络技术有限公司 | The method and apparatus for quickly generating the business page based on template |
| CN109948090A (en) * | 2019-03-08 | 2019-06-28 | 腾讯科技（深圳）有限公司 | Webpage loading method and device |
| CN110321177A (en) * | 2019-06-18 | 2019-10-11 | 北京奇艺世纪科技有限公司 | A kind of mobile application localization loading method, device and electronic equipment |
| CN110647699A (en) * | 2019-08-13 | 2020-01-03 | 平安普惠企业管理有限公司 | Web page rendering method and device, computer equipment and storage medium |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112416462A (en) * | 2020-11-28 | 2021-02-26 | 郑州信大捷安信息技术股份有限公司 | Offline H5 application loading method and system |
| CN112416462B (en) * | 2020-11-28 | 2022-04-08 | 郑州信大捷安信息技术股份有限公司 | Offline H5 application loading method and system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110187931B (en) | Method and device for running small program | |
| EP3333704A1 (en) | Method and apparatus for repairing kernel vulnerability | |
| CN107741844B (en) | Method and device for generating application installation package | |
| CN110598868B (en) | Machine learning model building method and device and related equipment | |
| CN107957837B (en) | Method and device for generating shortcut of webpage application program and terminal equipment | |
| CN111427596B (en) | Software upgrading method and device and terminal equipment | |
| CN108228293B (en) | Interface skin switching method and device | |
| CN106648685B (en) | Intelligent terminal system application processing method and device and intelligent terminal | |
| CN105335132B (en) | Method, device and system for customizing application program function | |
| CN105988837B (en) | Application program installation method and device | |
| CN105955833B (en) | Engine calling method and device | |
| CN107220066B (en) | Method and device for releasing application software in application store | |
| CN113254331A (en) | Model test method, device, storage medium and program product | |
| CN111290773A (en) | System upgrading method, device and readable storage medium | |
| CN114385164A (en) | Page generation and rendering method and device, electronic equipment and storage medium | |
| CN106681767B (en) | Light application adding method and device | |
| CN111857712A (en) | Form processing method, device, terminal and medium | |
| CN112148395A (en) | Page display method, device, equipment and storage medium | |
| CN111427645A (en) | H5-based cross-terminal adaptive display method and device | |
| CN111382259A (en) | Analysis method and device for APP crash logs | |
| CN112035129A (en) | Method and device for driver installation and upgrade and computer equipment | |
| CN109101429B (en) | Method and device for debugging browser page of set top box | |
| CN111694733A (en) | API (application programming interface) testing method and device for software development kit SDK (software development kit) | |
| CN111061414A (en) | Skin replacement method and device, electronic equipment and readable storage medium | |
| CN108572985B (en) | Page display method and device |
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 |