CN107463383A - The method and system of CSS style compatibility different platform in a kind of HybridAPP - Google Patents
The method and system of CSS style compatibility different platform in a kind of HybridAPP Download PDFInfo
- Publication number
- CN107463383A CN107463383A CN201710702934.3A CN201710702934A CN107463383A CN 107463383 A CN107463383 A CN 107463383A CN 201710702934 A CN201710702934 A CN 201710702934A CN 107463383 A CN107463383 A CN 107463383A
- Authority
- CN
- China
- Prior art keywords
- platform
- pattern
- html page
- operating platform
- module
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/76—Adapting program code to run in a different environment; Porting
Abstract
The invention discloses a kind of method of CSS style compatibility different platform in HybridAPP, step are as follows：The first step, html page file and external style sheet are established, determine pattern on the basis of the CSS style that html page defines on platform and operating platform one on the basis of operating platform one；Second step, determine difference element；3rd step, the standard pattern of each difference element is determined, and with reference to the displaying pattern of standard pattern modification all differences element, make each difference element identical with its standard pattern in the displaying pattern of each operating platform；4th step, displaying pattern of each difference element in each operating platform is named respectively, the 5th step, the JavaScript defined in html page is encoded；6th step, load html page.The method of CSS style compatibility different platform in the Hybrid APP of the present invention, it can be used for solving in Hybrid APP with the page of HTML5 exploitations the compatibility issue caused by the self-characteristic of each mobile platform and difference when being shown on different mobile platforms, it is more user-friendly.
Description
Technical field
The present invention relates to mobile Hybrid APP front-end technology field, CSS style in more particularly to a kind of Hybrid APP
The method and system of compatible different platform.
Background technology
In the last few years, with the high speed development of internet, the combination of portable mobile apparatus and internet, greatly change
The quick popularization of our life style and working method, especially smart mobile phone, has thoroughly overturned conventional mobile phone and has been only used as
This concept of communication tool；As long as a smart mobile phone can is completed much to need opening PC could be complete in the past now
Into thing, this make we Working Life and study all become more and more convenient, increasing service provider is also certain about
The development of mobile Internet, by the popularization of smart mobile phone, the various mobile APP for facilitating us to work and live are proposed, I
Only need to open APP on mobile phone, no matter when and where can easily realize shopping, reserving hotel, buy ticket air ticket,
Cost is supplemented with money, pays the service such as water power gas expense, very convenient, therefore receives having deep love for for user, also changes our life.
Hybrid App rise is that one kind of mobile Internet industry at this stage is accidental.HTML5 exploitation Mobile solutions
Advantage that can be cross-platform and cheap allows numerous to want that the company into mobile Internet field starts aroused in interest.So it is being exactly good luck
Under coincidence, the Hybrid App technologies for being had concurrently Native App speciality again based on HTML5 low cost Cross-border congestion management advantages are entered
Tangled warfare, and attracted increasing concern quickly.The development cost of Mobile solution is greatly reduced, can be by existing
Issued using shop mode, independent inlets etc. are formed in user's desktop, allow Hybrid App to turn into solution Mobile solution exploitation tired
The pretty good selection in border.
Hybrid App are generally developed using homepages language and program language simultaneously, and moving operation is distinguished by application shop
System is distributed, and user needs the Mobile solution installed and used.Overall characteristic because uses simultaneously closer to Native App
Homepages language coding, so development cost and difficulty are more much smaller than Native App.Therefore, Hybrid App have concurrently
Native App institute is advantageous, has also had the advantage using HTML5 Cross-border congestion managements low cost concurrently.
But due to existing difference between different mobile platforms, cause the html page in Hybrid APP can be not
Different performances is presented with mobile platform, this causes certain inconvenience to user.
The content of the invention
The purpose of the present invention is to overcome deficiency in above-mentioned background technology, there is provided CSS style is compatible in a kind of Hybrid APP
The method and system of different platform, it is suitable for different mobile platforms, definition mainly by starting with from HTML element CSS style sheet
CSS style sheet with the platform, to eliminate otherness of the html page in the performance of different mobile platforms.
In order to reach above-mentioned technique effect, the present invention takes following technical scheme：
The method of CSS style compatibility different platform, is comprised the steps of in a kind of Hybrid APP：
A. html page file and external style sheet are established, is determined on the basis of operating platform one on platform and operating platform one
Pattern on the basis of the CSS style that html page defines；
B. difference element is determined, wherein, the difference element is in other operations in the page elements that html page includes
The element being had differences when being shown on platform with showing pattern when being shown on the reference platform；
C. the standard pattern of each difference element is determined, and with reference to the flex spline of standard pattern modification all differences element
Formula, make each difference element identical with its standard pattern in the displaying pattern of each operating platform；
D. displaying pattern of each difference element in each operating platform is named respectively, wherein, difference element M is being grasped
The displaying pattern for making platform N is defined as classM_N；
E. the JavaScript defined in html page is encoded, and the JavaScript is encoded for judging described in loading
The operating platform of html page is operating platform one or operating platform N；
F. html page is loaded, wherein, when display loads the difference element included in html page, according to sentencing for step E
Disconnected result, selection load each difference element displaying pattern corresponding with the operating platform and are shown.
Further, the operating platform includes Android platform and iOS platforms.
Meanwhile the invention also discloses a kind of system of CSS style compatibility different platform in Hybrid APP, include component
Generation module, differential diagnostic module, standard determining module, pattern adjusting module, platform determination module, component load-on module；
The component generation module is used to establish html page file and external style sheet；The differential diagnostic module is used for
Determine the difference element that displaying pattern has differences when being shown on each operating platform in the page elements that html page includes；Institute
Standard determining module is stated to be used to determine standard pattern of each difference element when showing on each operating platform；The pattern adjusts mould
Block is used to displaying pattern of each difference element on each operating platform being adjusted to standard pattern；The platform determination module is used for
Judge the type of the operating platform of current loading html page；The component load-on module is used to load html page；
Wherein, the component generation module is completed after establishing html page file and external style sheet, and the standard determines
Module determines sample on the basis of the CSS style that platform on the basis of an operating platform and the html page on the operating platform define
Formula；The differential diagnostic module determine in the page elements that html page includes on other operating platforms show when with described
The element that displaying pattern has differences when being shown on reference platform is difference element；Each difference is determined by standard determining module again
The standard pattern of element, pattern adjusting module make each difference with reference to the displaying pattern of standard pattern modification all differences element
Element is identical with its standard pattern in the displaying pattern of each operating platform and respectively to each difference element in each operating platform
Displaying pattern is named；
During component load-on module display loading html page, platform determination module judges to load the operation of the html page
The type of platform, component load-on module load the exhibition corresponding with the operating platform of each difference element further according to judged result selection
Sample formula is shown.
Further, there are JavaScript codings defined in the platform determination module.
Further, the operating platform includes Android platform and iOS platforms.
The present invention compared with prior art, have the advantage that for：The invention provides CSS in a kind of Hybrid APP
The method and system of pattern compatibility different platform, it can be used for solving in Hybrid APP with the page of HTML5 exploitations not
With when being shown on mobile platform caused by the self-characteristic of each mobile platform and difference compatibility issue, it is more convenient to use
The use at family.
Brief description of the drawings
Fig. 1 be embodiment one a kind of Hybrid APP in CSS style compatibility different platform method schematic flow sheet；
Fig. 2 be embodiment two a kind of Hybrid APP in CSS style compatibility different platform system schematic.
Embodiment
With reference to embodiments of the invention, the invention will be further elaborated.
Embodiment：
Below, it is compatible to CSS style in a kind of Hybrid APP of the present invention different flat with reference to accompanying drawing 1, accompanying drawing 2
The method and system of platform illustrate.
Embodiment one
As shown in figure 1, in a kind of Hybrid APP CSS style compatibility different platform method, with the movement of current main-stream
Exemplified by platform Android platform and iOS platforms, comprise the steps of：
Step 1：Html file and external style sheet are established, analyzes Android platform and the characteristic of iOS platforms, and with it
In on some platform html page performance as benchmark, choose platform on the basis of the platform, while defined on reference platform
CSS style file on the basis of pattern；The platform on the basis of Android platform is assumed herein that, on this basis, by contrast
Difference of the html page when Android platform and iOS platforms are shown is found out one by one with analysis.
Step 2：For the difference of the html page element that is obtained in step 1 in Android platform and iOS platforms,
Its Based On file is modified, if element A has differences in the performance of Android platform and iOS platforms, by A
The style definitions that element is shown in Android platform are classA_andr, and as standard；It is right for otherness
ClassA_andr pattern is modified, and makes its performance on iOS consistent with the performance in Android platform, and will repair
The style definitions changed are classA_ios；The pattern of all elements that inconsistent performance be present is changed in this way, is made
Html page is identical with the bandwagon effect on iOS platforms in Android platform.
Step 3：The JavaScript defined in html page is encoded, and JavaScript Coding Effects are current flat to judge
Platform is Android platform or iOS platforms, hereafter in html page in loading procedure, to existing in two platform displayings
The element A of difference, the result judged according to foregoing platform, selection are to use the classA_andr suitable for Android platform
Pattern also applies to the classA_ios patterns of iOS platforms；It is and all poor in the presence of showing using the processing of identical method successively
Different element, reload whole html page.
Step 4：The Hybrid APP are run in Android platform and iOS platforms respectively and load the html page,
The display effect checked on two platforms.
Embodiment two
A kind of system of CSS style compatibility different platform in Hybrid APP is illustrated in figure 2, mould is generated comprising component
Block, differential diagnostic module, standard determining module, pattern adjusting module, platform determination module, component load-on module.
Wherein component generation module is used to establish html page file and external style sheet；Differential diagnostic module is used to determine
The difference element that displaying pattern has differences when being shown on each operating platform in the page elements that html page includes；Standard is true
Cover half block is used to determine standard pattern of each difference element when showing on each operating platform；Pattern adjusting module is used for each difference
Displaying pattern of the different element on each operating platform is adjusted to standard pattern；Platform determination module is used to judge currently to load HTML
The type of the operating platform of the page；Component load-on module is used to load html page.
Specifically, component generation module is completed after establishing html page file and external style sheet, standard determining module is true
Pattern on the basis of the CSS style that html page on the basis of a fixed operating platform on platform and the operating platform defines；Difference
Diagnostic module determine in the page elements that html page includes on other operating platforms show when with being shown on reference platform
When the element that has differences of displaying pattern be difference element；The standard sample of each difference element is determined by standard determining module again
Formula, pattern adjusting module make each difference element in each operation with reference to the displaying pattern of standard pattern modification all differences element
The displaying pattern of platform is identical with its standard pattern and displaying pattern of each difference element in each operating platform is carried out respectively
Name.
During component load-on module display loading html page, platform determination module judges the operating platform of loading html page
Type, component load-on module loads each difference element flex spline corresponding with the operating platform further according to judged result selection
Formula is shown.
By taking the mobile platform Android platform of current main-stream and iOS platforms as an example, CSS style is compatible in Hybrid APP
Mainly comprised the steps of during the system work of different platform：
The first step：Component generation module establishes html file and external style sheet, and standard determining module analysis Android is put down
The characteristic of platform and iOS platforms, and using the performance of html page wherein on some platform as benchmark, choose and put down on the basis of the platform
Platform, meanwhile, pattern on the basis of the CSS style file that standard determining module defines on reference platform.
Second step, it is assumed that the platform on the basis of Android platform, on this basis, differential diagnostic module by contrast and
Analysis finds out difference of the html page when Android platform and iOS platforms are shown and determines specific difference element one by one.
3rd step：Pattern adjusting module is directed to the html page element obtained in second step and put down in Android platform and iOS
The difference member having differences on platform is usually modified to its Based On file, if element A in Android platform and
Had differences in the performance of iOS platforms, the style definitions that pattern adjusting module shows element A in Android platform are
ClassA_andr, and as standard；For otherness, pattern adjusting module is modified to classA_andr pattern,
Make its performance on iOS platforms consistent with the performance in Android platform, and be by amended style definitions
classA_ios；Pattern adjusting module changes the pattern of all elements that inconsistent performance be present successively in this way, makes
Html page is identical with the bandwagon effect on iOS platforms in Android platform.
4th step：Platform determination module JavaScript defined in html page is encoded, and JavaScript codings are available
In judging current platform for Android platform or iOS platforms, hereafter in html page in loading procedure, to flat at two
The element A being had differences in platform displaying, the result judged according to foregoing platform, selection are to use to be applied to Android platform
ClassA_andr patterns also apply to the classA_ios patterns of iOS platforms；And successively using identical method processing institute
There is the element in the presence of performance difference, reuse component load-on module and load whole html page.
5th step：Component load-on module runs the Hybrid APP and loaded in Android platform and iOS platforms respectively
The html page, to check the display effect on two platforms.
It is understood that the principle that embodiment of above is intended to be merely illustrative of the present and the exemplary implementation that uses
Mode, but the invention is not limited in this.For those skilled in the art, the essence of the present invention is not being departed from
In the case of refreshing and essence, various changes and modifications can be made therein, and these variations and modifications are also considered as protection scope of the present invention.
Claims (5)
1. a kind of method of CSS style compatibility different platform in HybridAPP, it is characterised in that comprise the steps of：
A. html page file and external style sheet are established, determines on the basis of operating platform one HTML on platform and operating platform one
Pattern on the basis of the CSS style that the page defines；
B. difference element is determined, wherein, the difference element is in other operating platforms in the page elements that html page includes
The element being had differences during upper displaying with showing pattern when being shown on the reference platform；
C. the standard pattern of each difference element is determined, and with reference to the displaying pattern of standard pattern modification all differences element, is made
Each difference element is identical with its standard pattern in the displaying pattern of each operating platform；
D. displaying pattern of each difference element in each operating platform is named respectively, wherein, difference element M is flat in operation
Platform N displaying pattern is defined as classM_N；
E. the JavaScript defined in html page is encoded, and the JavaScript is encoded for judging to load the HTML page
The operating platform in face is operating platform one or operating platform N；
F. html page is loaded, wherein, when display loads the difference element included in html page, according to step E judgement knot
Fruit, selection load each difference element displaying pattern corresponding with the operating platform and are shown.
2. the method for CSS style compatibility different platform in a kind of HybridAPP according to claim 1, it is characterised in that
The operating platform includes Android platform and iOS platforms.
3. the system of CSS style compatibility different platform in a kind of HybridAPP, it is characterised in that include component generation module, difference
Different diagnostic module, standard determining module, pattern adjusting module, platform determination module, component load-on module；
The component generation module is used to establish html page file and external style sheet；
The differential diagnostic module is used to determine to show when showing on each operating platform in the page elements that html page includes
The difference element that pattern has differences；
The standard determining module is used to determine standard pattern of each difference element when showing on each operating platform；
The pattern adjusting module is used to displaying pattern of each difference element on each operating platform being adjusted to standard pattern；
The platform determination module is used for the type for judging the operating platform of current loading html page；
The component load-on module is used to load html page；
Wherein, the component generation module is completed after establishing html page file and external style sheet, the standard determining module
Determine pattern on the basis of the CSS style that platform on the basis of an operating platform and the html page on the operating platform define；Institute
Differential diagnostic module is stated to determine in the page elements that html page includes when showing on other operating platforms and in the benchmark
The element that displaying pattern has differences when being shown on platform is difference element；Each difference element is determined by standard determining module again
Standard pattern, pattern adjusting module with reference to the standard pattern modification all differences element displaying pattern, make each difference element
It is identical with its standard pattern in the displaying pattern of each operating platform and respectively to each difference element each operating platform displaying
Pattern is named；
During component load-on module display loading html page, platform determination module judges to load the operating platform of the html page
Type, component load-on module loads each difference element flex spline corresponding with the operating platform further according to judged result selection
Formula is shown.
4. the system of CSS style compatibility different platform in a kind of HybridAPP according to claim 3, it is characterised in that
There are JavaScript codings defined in the platform determination module.
5. the system of CSS style compatibility different platform in a kind of HybridAPP according to claim 3, it is characterised in that
The operating platform includes Android platform and iOS platforms.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710702934.3A CN107463383A (en) | 2017-08-16 | 2017-08-16 | The method and system of CSS style compatibility different platform in a kind of HybridAPP |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710702934.3A CN107463383A (en) | 2017-08-16 | 2017-08-16 | The method and system of CSS style compatibility different platform in a kind of HybridAPP |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107463383A true CN107463383A (en) | 2017-12-12 |
Family
ID=60548985
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710702934.3A Pending CN107463383A (en) | 2017-08-16 | 2017-08-16 | The method and system of CSS style compatibility different platform in a kind of HybridAPP |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107463383A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109799988A (en) * | 2018-12-13 | 2019-05-24 | 深圳壹账通智能科技有限公司 | IOS page layout method, terminal device and computer readable storage medium |
| WO2023179329A1 (en) * | 2022-03-23 | 2023-09-28 | 掌阅科技股份有限公司 | Method and apparatus for generating typesetting style codes of electronic book, and device and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102541533A (en) * | 2010-12-27 | 2012-07-04 | 北大方正集团有限公司 | Method and equipment for page display |
| CN102637135A (en) * | 2011-02-09 | 2012-08-15 | 北京千橡网景科技发展有限公司 | Method and device for compiling CSS (cascading style sheet) |
| CN103179302A (en) * | 2011-12-22 | 2013-06-26 | 腾讯科技（深圳）有限公司 | Picture processing method and system in open platform |
| CN104866570A (en) * | 2015-05-22 | 2015-08-26 | 国云科技股份有限公司 | Method for implementing CSS multi-browser compatibility |
-
2017
- 2017-08-16 CN CN201710702934.3A patent/CN107463383A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102541533A (en) * | 2010-12-27 | 2012-07-04 | 北大方正集团有限公司 | Method and equipment for page display |
| CN102637135A (en) * | 2011-02-09 | 2012-08-15 | 北京千橡网景科技发展有限公司 | Method and device for compiling CSS (cascading style sheet) |
| CN103179302A (en) * | 2011-12-22 | 2013-06-26 | 腾讯科技（深圳）有限公司 | Picture processing method and system in open platform |
| CN104866570A (en) * | 2015-05-22 | 2015-08-26 | 国云科技股份有限公司 | Method for implementing CSS multi-browser compatibility |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109799988A (en) * | 2018-12-13 | 2019-05-24 | 深圳壹账通智能科技有限公司 | IOS page layout method, terminal device and computer readable storage medium |
| WO2020119435A1 (en) * | 2018-12-13 | 2020-06-18 | 深圳壹账通智能科技有限公司 | Ios page layout method, terminal device and computer-readable storage medium |
| CN109799988B (en) * | 2018-12-13 | 2022-03-15 | 深圳壹账通智能科技有限公司 | iOS page layout method, terminal device and computer readable storage medium |
| WO2023179329A1 (en) * | 2022-03-23 | 2023-09-28 | 掌阅科技股份有限公司 | Method and apparatus for generating typesetting style codes of electronic book, and device and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106095867B (en) | A kind of book recommendation method and device based on industry analysis | |
| CN103049369B (en) | A kind of automated testing method and system | |
| CN103530175B (en) | The classification processing method and device of application program | |
| US20140372422A1 (en) | Method and device for displaying microblog dynamics, and computer storage medium | |
| CN104850489A (en) | Mobile application test system | |
| US10120789B2 (en) | Automated test runs in an integrated development environment system and method | |
| CN107463383A (en) | The method and system of CSS style compatibility different platform in a kind of HybridAPP | |
| CN105335515A (en) | Information recommendation method and information recommendation device | |
| CN105989106A (en) | Recommendation method and device based on interest similarity | |
| WO2021192470A1 (en) | Information processing device and information processing system | |
| CN104504584A (en) | Recommendation method and recommendation device for intelligent hardware commodities | |
| CN106102007A (en) | For controlling the system and method for mobile device operation | |
| CN106658616A (en) | Network switching method and apparatus based on network speed, and terminal device | |
| CN103269521B (en) | Intelligent terminal data fast sharing method | |
| CN104915228A (en) | Application program language setting method and device | |
| CN104461603B (en) | A kind of information processing method and electronic equipment | |
| US20180025359A1 (en) | Customer journey optimized pre-fetching | |
| CN107179933A (en) | Dynamic language identification variables method, device, interpretation method and software transplanting method | |
| CN104572454B (en) | A kind of method and device of locating resource | |
| CN103281221B (en) | Fire-fighting Internet of things system method of testing | |
| CN105989147A (en) | Path planning method and apparatus | |
| CN110347376A (en) | Project development method and device | |
| CN109948114A (en) | Arc length curve integrates automatic calculating method, equipment, storage medium and device | |
| CN110471837A (en) | Program detecting method, device and computer readable storage medium | |
| Berry II | Using Concept Maps and Other Visualization Tools Reflection |
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: 20171212 |
|
| RJ01 | Rejection of invention patent application after publication |