CN107133322A - The implementation method for the common data channel that HTML is interacted with Native in Mobile solution - Google Patents
The implementation method for the common data channel that HTML is interacted with Native in Mobile solution Download PDFInfo
- Publication number
- CN107133322A CN107133322A CN201710308278.9A CN201710308278A CN107133322A CN 107133322 A CN107133322 A CN 107133322A CN 201710308278 A CN201710308278 A CN 201710308278A CN 107133322 A CN107133322 A CN 107133322A
- Authority
- CN
- China
- Prior art keywords
- html
- native
- data
- interactive modules
- modules
- 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
- 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
-
- 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/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/547—Remote procedure calls [RPC]; Web services
Abstract
The invention discloses the implementation method of the common data channels interacted with Native of HTML in Mobile solution, it includes HTML interactive modules and Native interactive modules, HTML interactive modules, are developed using HTML, CSS and JavaScript, and HTML builds page elements；CSS completes page layout.JavaScript sets up the service of data interaction sharing channel, by JavaScript by the data storage needed for html page in being locally stored, and Native interactive modules are given by the access interface opening that data are locally stored, HTML interactive modules is obtained required data from Native interactive modules and data can be transmitted to Native interactive modules.Native interactive modules are managed to the data at Native ends, and Native ends provide data access and data transmission interface, can receive the data transmitted from HTML interactive modules, and transmit data to HTML interactive modules.
Description
Technical field
The present invention relates to a kind of implementation method of mixed mode exploitation cross-domain data interaction, and in particular to mobile applications
The implementation of the common data channel of middle HTML and Native interaction.
Background technology
Mobile Internet high speed development, mobile terminal is quite popularized, and the operating system of mobile terminal is most of by iOS
System and android system are occupied, and the browser kernel of both operating systems all uses WebKit cores.
The HTML run on browser, with cross-platform advantage, adaptive cloth is used for different screen resolutions
Office ensures UI compatibility, and development language and rendering system are almost completely the same, and HTML technologies have in current rapid build UI
Certain advantage, such as rapid build prototype, product design, quick exploitation, modification UI costs are low, in addition with cross-platform
The characteristic of (iOS, Android), using HTML+JavaScript+CSS development technique, interface exhibition is carried out by browser container
It is now and interactive, APP development efficiency can be improved.
The Native modes at APP ends can directly access respective system all hardware, can give full play to hardware capabilities,
Aspect of performance is significantly faster than the JavaScript at HTML ends.But in mixed developing is carried out, between HTML ends and Native ends
Have certain data sharing, but the data that each store of HTML and Native can not between share and use, it is necessary to set up
Between HTML and Native share data channel, could preferably carry out mixed developing, therefore, how to set up HTML with
Native data channel, becomes as technical problem urgently to be resolved hurrily.
The content of the invention
Under being developed it is an object of the invention to provide a kind of mixed mode, the common data channel that HTML is interacted with Native
Implementation method, it is intended to solve above-mentioned technical problem.
The present invention takes following technical scheme：The realization for the common data channel that HTML is interacted with Native in Mobile solution
Method, it includes HTML interactive modules and Native interactive modules,
The HTML interactive modules, are developed using HTML, CSS and JavaScript, wherein, the HTML builds page
Surface element；The CSS completes page layout.
The JavaScript sets up the service of data interaction sharing channel, by JavaScript by needed for html page
The access interface opening that data are locally stored is given Native interactive modules in being locally stored by data storage, interacts HTML
Data needed for module can be obtained from Native interactive modules simultaneously can transmit data to Native interactive modules.
The Native interactive modules are managed to the data at Native ends, and Native ends provide data access and data
Coffret, can receive the data transmitted from HTML interactive modules, and transmit data to HTML interactive modules.
Further technical scheme is：The interface that the HTML interactive modules and Native interactive modules are mutually accessed includes
Addition, deletion, modification and lookup.
Further technical scheme is：The JavaScript be locally stored data using localStorage or
SessionStorage or local variable var mode.
Further technical scheme is：The data management at the Native interactive modules end is different according to terminal different choice
Storage container, the storage container be selected from Android SQLite, Android SharedPreferences, iOS
Any one in SQLite, iOS NSUserDefault.
Further technical scheme is：The HTML interactive modules, are operated in terminal browser WebView.
The present invention compared with prior art, with following beneficial effect：Invention be related in Mobile solution HTML and
The implementation of the common data channel of Native interactions, by the invention, developer can combine HTML and Native
Advantage, more quick advantageously application mixed mode exploitation Mobile solution APP.
Brief description of the drawings
Fig. 1 is the common data channel schematic diagram that HTML interactive modules are interacted with Native interactive modules.
Embodiment
With reference to embodiments of the invention, the invention will be further elaborated.
Embodiment：
The present invention is, based on mixing Mobile solution development mode, need to carry out HTML and Native using WebView as carrier and hand over
Mutually, the present invention includes HTML interactive modules and Native interactive modules.
HTML interactive modules be in the browser of WebKit engines run, the module generally comprise HTML,
JavaScript and CSS, HTML build page elements, and CSS completes page layout, and JavaScript completes data, logic etc.
The service of data channel is set up in reason, the present invention by JavaScript.
HTML interactive modules, by JavaScript by the data storage needed for html page in being locally stored
(localStorage, sessionStorage, local variable var etc.), and by the access interface of local data open to
Native interactive modules, allow to obtain required data from Native interactive modules and can transmit number to Native interactive modules
According to.
HTML interactive modules, using JavaScript to the access method that is locally stored and to obtaining Native interactions
The method of module end data is packaged, and wherein method includes addition, searches, deletes, changing.
Native interactive modules can call the function of mobile application system in itself, and realize Native interactive module numbers
HTML interactive modules are given according to management, and offer interface opening, Native end datas, wherein interface are accessed for HTML interactive modules
Including increase, lookup, delete.
Native interactive modules can receive the data transmitted from HTML interactive modules end simultaneously, and to HTML interactive modules
Transmit data.
Native interactive modules end, the data to Native ends are managed, in the data capsule at deposit Native ends, bag
Android SQLite, Android SharedPreferences, iOS SQLite, iOS NSUserDefault etc. are included,
Native is each realized, HTML interactive modules end is given to provide interface exploitation.
As shown in figure 1, the common data channel schematic diagram interacted for the present embodiment HTML with Native.
HTML interactive modules, are operated in terminal browser, are specifically operated in WebView, use loadUrl.
HTML interactive modules are typically developed using Web technologies such as HTML+CSS+JavaScript, and HTML builds page elements, CSS
Page layout is completed, JavaScript completes the processing such as data, logic, wherein setting up data using JavaScript in the present invention
Interaction sharing channel service.
In HTML interactive modules, the data channel service that JavaScript is set up, mainly including following functions.
1. the data of HTML interactive modules are carried out storage management, while to Native interactive module open interfaces, interface
Including addition (put), (remove), modification (alter), the interface for searching (get) HTML interactive module data are deleted, these connect
Mouth can be by what Native interactive modules were directly accessed.
2. HTML interactive modules provide the data that method is able to access that Native interactive modules.
3. HTML interactive modules, which provide method, to transmit data to Native interactive modules.
Data, which are locally stored, in JavaScript can use localStorage, sessionStorage, local variable var
Etc. mode.
Native interactive modules can call the hardware module of mobile application system in itself, play its high performance feature,
So, it is necessary to use many Native functions in mixed developing, such as take pictures, audio frequency and video processing.
Native interactive modules need to be managed the data at Native ends, and it is corresponding to HTML ends to provide opening
Interface, interface includes addition, deletes, changes, searching.
The method that Native interactive modules are provided must be that Native interactive modules extend method to JavaScript.
Native interactive modules will can receive the data transmitted from HTML interactive modules, and be transmitted to HTML interactive modules
Data.
The management of Native interactive modules end local datastore can according to the different storage container of terminal different choice, including
Android SQLite, Android SharedPreferences, iOS SQLite, iOS NSUserDefault etc., each
Self terminal is realized, but the interface provided to HTML interactive modules need to be consistent, and facilitate HTML Unified codings.
Thus, HTML interactive modules and Native interactive modules establish two-way common data channel, facilitate HTML
Data sharing and transmission between interactive module and Native interactive modules, solve the problem in background.
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. the implementation method for the common data channel that HTML is interacted with Native in Mobile solution, it is characterised in that：It includes
HTML interactive modules and Native interactive modules,
The HTML interactive modules, are developed using HTML, CSS and JavaScript, wherein, the HTML builds page member
Element；The CSS completes page layout；
The JavaScript sets up the service of data interaction sharing channel, by JavaScript by the data needed for html page
It is stored in and is locally stored, and Native interactive modules are given by the access interface opening that data are locally stored, makes HTML interactive modules
Data needed for being obtained from Native interactive modules simultaneously can transmit data to Native modules；
The Native interactive modules are managed to the data at Native ends, and Native ends provide data access and data transfer
Interface, can receive the data transmitted from HTML interactive modules, and transmit data to HTML modules.
2. the implementation method for the common data channel that HTML is interacted with Native in Mobile solution according to claim 1,
It is characterized in that：The interface that the HTML interactive modules and Native interactive modules are mutually accessed include addition, delete, modification and
Search.
3. the implementation method for the common data channel that HTML is interacted with Native in Mobile solution according to claim 1,
It is characterized in that：The JavaScript is locally stored data and become using localStorage or sessionStorage or local
Measure var mode.
4. the implementation method for the common data channel that HTML is interacted with Native in Mobile solution according to claim 1,
It is characterized in that：The data management at the Native interactive modules end is described according to the different storage container of terminal different choice
Storage container is to be selected from Android SQLite, Android SharedPreferences, iOS SQLite, iOS
Any one in NSUserDefault.
5. the implementation method for the common data channel that HTML is interacted with Native in Mobile solution according to claim 1,
It is characterized in that：The HTML interactive modules, are operated in terminal browser WebView.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710308278.9A CN107133322A (en) | 2017-05-04 | 2017-05-04 | The implementation method for the common data channel that HTML is interacted with Native in Mobile solution |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710308278.9A CN107133322A (en) | 2017-05-04 | 2017-05-04 | The implementation method for the common data channel that HTML is interacted with Native in Mobile solution |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107133322A true CN107133322A (en) | 2017-09-05 |
Family
ID=59716590
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710308278.9A Pending CN107133322A (en) | 2017-05-04 | 2017-05-04 | The implementation method for the common data channel that HTML is interacted with Native in Mobile solution |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107133322A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108595160A (en) * | 2018-05-16 | 2018-09-28 | 福建天泉教育科技有限公司 | JS calls the method for primary object, storage medium |
| CN109725887A (en) * | 2018-12-14 | 2019-05-07 | 中国平安财产保险股份有限公司 | Data interactive method, device and terminal device based on message research and development frame |
| WO2019153492A1 (en) * | 2018-02-07 | 2019-08-15 | 平安科技（深圳）有限公司 | Method for realizing web and native function interaction, and electronic apparatus and readable storage medium |
| CN110175309A (en) * | 2019-05-30 | 2019-08-27 | 四川长虹电器股份有限公司 | The primary end resource pool management system and method for mobile application mixed developing |
| WO2020019458A1 (en) * | 2018-07-27 | 2020-01-30 | 平安科技（深圳）有限公司 | Page switching method of hybrid application, framework, computer device and storage medium |
| CN113010239A (en) * | 2021-03-26 | 2021-06-22 | 北京乐学帮网络技术有限公司 | IOS client-based interaction method and device |
| CN109725887B (en) * | 2018-12-14 | 2024-04-26 | 中国平安财产保险股份有限公司 | Data interaction method and device based on message research and development framework and terminal equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103780627A (en) * | 2014-01-30 | 2014-05-07 | 吴锦洲 | Native APP, Web APP and Wechat-similar APP information synchronization system |
| CN105739967A (en) * | 2016-01-19 | 2016-07-06 | 四川长虹电器股份有限公司 | Method of asynchronously calling native by js in mobile application |
| CN105760162A (en) * | 2016-02-04 | 2016-07-13 | 四川长虹电器股份有限公司 | Development method for hybrid APP software |
| CN106507194A (en) * | 2016-11-15 | 2017-03-15 | 四川长虹电器股份有限公司 | A kind of Android intelligent television scene management method |
-
2017
- 2017-05-04 CN CN201710308278.9A patent/CN107133322A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103780627A (en) * | 2014-01-30 | 2014-05-07 | 吴锦洲 | Native APP, Web APP and Wechat-similar APP information synchronization system |
| CN105739967A (en) * | 2016-01-19 | 2016-07-06 | 四川长虹电器股份有限公司 | Method of asynchronously calling native by js in mobile application |
| CN105760162A (en) * | 2016-02-04 | 2016-07-13 | 四川长虹电器股份有限公司 | Development method for hybrid APP software |
| CN106507194A (en) * | 2016-11-15 | 2017-03-15 | 四川长虹电器股份有限公司 | A kind of Android intelligent television scene management method |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2019153492A1 (en) * | 2018-02-07 | 2019-08-15 | 平安科技（深圳）有限公司 | Method for realizing web and native function interaction, and electronic apparatus and readable storage medium |
| CN108595160A (en) * | 2018-05-16 | 2018-09-28 | 福建天泉教育科技有限公司 | JS calls the method for primary object, storage medium |
| WO2020019458A1 (en) * | 2018-07-27 | 2020-01-30 | 平安科技（深圳）有限公司 | Page switching method of hybrid application, framework, computer device and storage medium |
| CN109725887A (en) * | 2018-12-14 | 2019-05-07 | 中国平安财产保险股份有限公司 | Data interactive method, device and terminal device based on message research and development frame |
| CN109725887B (en) * | 2018-12-14 | 2024-04-26 | 中国平安财产保险股份有限公司 | Data interaction method and device based on message research and development framework and terminal equipment |
| CN110175309A (en) * | 2019-05-30 | 2019-08-27 | 四川长虹电器股份有限公司 | The primary end resource pool management system and method for mobile application mixed developing |
| CN110175309B (en) * | 2019-05-30 | 2022-01-28 | 四川长虹电器股份有限公司 | Native terminal resource pool management system and method for mobile application hybrid development |
| CN113010239A (en) * | 2021-03-26 | 2021-06-22 | 北京乐学帮网络技术有限公司 | IOS client-based interaction method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107133322A (en) | The implementation method for the common data channel that HTML is interacted with Native in Mobile solution | |
| US9971740B2 (en) | Dynamic webpage image | |
| AU2018206841B2 (en) | Image curation | |
| US20190287217A1 (en) | Machine learning system for reduced network bandwidth transmission of content | |
| JP2020504865A (en) | Application data processing method, apparatus, and storage medium | |
| US20230362430A1 (en) | Techniques for managing generation and rendering of user interfaces on client devices | |
| CN105142011A (en) | Web-based television terminal multi-screen interaction method and device | |
| KR101473257B1 (en) | Apparatus for reproducing contents stream including user interface data and method thereof | |
| WO2020063031A1 (en) | Method and apparatus for processing structured data, and storage medium and electronic device | |
| CN110417766A (en) | A kind of method and apparatus of protocol analysis | |
| CN106899653A (en) | Document transmission method and device | |
| US20150116391A1 (en) | Method and system to share display attributes of content | |
| CN113127361B (en) | Application development method and device, electronic equipment and storage medium | |
| CN105550246A (en) | System and method for loading network picture under Android platform | |
| CN104536649A (en) | Page display method and device | |
| CN106210724A (en) | Picture decoding method and device | |
| CN104252513B (en) | file cache device, system and method | |
| CN106709960A (en) | Image storage method, device and system | |
| CN108052575A (en) | File scanning method, equipment and storage medium | |
| JP7471510B2 (en) | Method, device, equipment and storage medium for picture to video conversion - Patents.com | |
| JP5792326B2 (en) | Reading service providing method, content providing server and system | |
| CN112153459A (en) | Method and device for screen projection display | |
| CN103312777B (en) | A kind of resource search method and client | |
| EP4136809B1 (en) | Distributed flow processing and flow cache | |
| CN108616567A (en) | A kind of picture transmission method, system, server, client and user 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: 20170905 |
|
| RJ01 | Rejection of invention patent application after publication |