CN111399809A - Method, system, device and medium for communication between RN and H5 pages - Google Patents

Method, system, device and medium for communication between RN and H5 pages Download PDF

Info

Publication number
CN111399809A
CN111399809A CN202010166827.5A CN202010166827A CN111399809A CN 111399809 A CN111399809 A CN 111399809A CN 202010166827 A CN202010166827 A CN 202010166827A CN 111399809 A CN111399809 A CN 111399809A
Authority
CN
China
Prior art keywords
information
execution function
data packet
information receiving
sending end
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.)
Granted
Application number
CN202010166827.5A
Other languages
Chinese (zh)
Other versions
CN111399809B (en
Inventor
郁于润
李梁
滑立栋
王彬彬
韩晓芳
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Suzhou Jingxi Education Technology Co ltd
Original Assignee
Suzhou Jinxi Intelligent Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Suzhou Jinxi Intelligent Technology Co ltd filed Critical Suzhou Jinxi Intelligent Technology Co ltd
Priority to CN202010166827.5A priority Critical patent/CN111399809B/en
Publication of CN111399809A publication Critical patent/CN111399809A/en
Application granted granted Critical
Publication of CN111399809B publication Critical patent/CN111399809B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/20Software design
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements 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/46Multiprogramming arrangements
    • G06F9/54Interprogram communication
    • G06F9/547Remote procedure calls [RPC]; Web services

Abstract

The invention provides a method, a system, a device and a medium for communication between RN and H5 pages, which can make the communication between RN and H5 pages simpler and more convenient, reduce the complex operation amount and realize high-efficiency communication, wherein the method comprises the following steps: step 1: calling a data packet by user; step 2: importing the self-defined calling data packet into a project program; and step 3: defining an execution function at an information sending end, the execution function being configured to connect communication of the information sending end and an information receiving end; and 4, step 4: and the information receiving terminal monitors the execution function and executes the execution function to acquire the information from the information sending terminal to finish communication.

Description

Method, system, device and medium for communication between RN and H5 pages
Technical Field
The invention relates to the technical field of read-native and H5 hybrid development, in particular to a method, a system, a device and a medium for communication between RN and H5 pages.
Background
RN (react-native) is one of the current popular cross-platform mobile application development frameworks, "L earn once, write anywhere" is a port number proposed by the react-native, and after the react-native opens a source, the port number is realized, and people can develop and apply the react-ion at a web end, android and apples simultaneously only by learning the react
native has the advantages similar to H5, and has three platforms of cross platform, low cost development, high development speed, dynamic release and one set of similar code maintenance. H5 has many advantages, particularly with respect to the disadvantages of native development. Such as: the method has the advantages that the method is directly debugged and modified on the webpage, the problems of user machine types and adaptation are hardly considered, and the method aims at the problems of fragmentation of a platform for primary development, development labor cost and high time cost; version upgrading is advantageous, webpage upgrading is irrelevant to a user, the user does not need to download updating installation, and real-time delivery to the user is guaranteed; the online time is stable and quick, the auditing of the development market is not needed, and the development market with income sharing can bypass the income sharing. Due to the nature of H5, many of our APPs will employ the Hybird APP development model of semi-native half H5. But this development mode may involve communication problems between the real-native and H5 pages.
The web view and H5 provided by the react-native authority can be cumbersome to communicate. An attribute onMessage and a method postMessage are defined on the read Native side, wherein the postMessage accepts a string parameter. A message event and a postMessage method are extended on the Web side, and the message sent from the real Native is monitored. Sometimes we need to process complex data or trigger some action on the other side. At this time, a communication protocol needs to be defined to process the complex request, and the existing communication modes are too complicated and inefficient.
Disclosure of Invention
In view of the above problems, the present invention provides a method, a system, an apparatus, and a medium for RN and H5 page communication, which can make the communication between RN and H5 page simpler and more convenient, reduce the complex operation amount, and implement efficient communication.
The technical scheme is as follows: a method for RN and H5 page communication is characterized by comprising the following steps:
step 1: calling a data packet by user;
step 2: importing the self-defined calling data packet into a project program;
and step 3: defining an execution function at an information sending end, the execution function being configured to connect communication of the information sending end and an information receiving end;
and 4, step 4: and the information receiving terminal monitors the execution function and executes the execution function to acquire the information from the information sending terminal to finish communication.
Further, in step 1, the customized calling data package is uploaded to a website hosting a third party package for a user to download the customized calling data package.
Further, in step 3, the execution function is configured to specify the information that needs to be transferred by the information sending end, and the information receiving end can receive the information from the information sending end.
Further, in step 4, the information receiving end calls an API method provided in the custom call data packet, for monitoring an execution function defined in the information sending end; and when the information receiving end monitors the execution function, the execution function is executed, and when the execution function is finished, the information receiving end receives the information from the information sending end to finish communication.
Further, the information sending end is a react-native, and the information receiving end is an H5 page.
Further, the information sending end is an H5 page, and the information sending end is a react-native.
A system for communicating between a RN and a H5 page, comprising:
a calling module configured to custom call the data packet;
the import module is configured to import the self-defined calling data packet into the project program;
an execution function module configured to define an execution function at an information sending end, the execution function configured to connect communication of the information sending end and the information receiving end;
and the monitoring module is configured to execute the execution function when the information receiving end monitors the execution function, and acquire the information from the information sending end.
Further, the calling module uploads the customized calling data packet to a website hosting a third party package for a user to download the customized calling data packet;
the executive function of the executive function module is configured to set the information needed to be transmitted by the information transmitting terminal, and the information receiving terminal can receive the information from the information transmitting terminal;
in the monitoring module, the information receiving terminal calls an API method provided in a self-defined calling data packet and is used for monitoring an execution function defined in an information sending terminal; when the information receiving end monitors the execution function, the execution function is executed, and when the execution function is finished, the information receiving end receives the information from the information sending end to finish communication;
when the information sending end is a react-native, the information receiving end is an H5 page; or when the information sending end is an H5 page, the information sending end is a reactive-native.
An apparatus for communicating between a RN and a H5 page, comprising: comprising a processor, a memory, and a program;
the program is stored in the memory, and the processor calls the program stored in the memory to execute the method for communicating between the RN and H5 pages.
A computer-readable storage medium characterized by: the computer readable storage medium is configured to store a program configured to perform the method of communicating the RN and H5 pages described above.
The method for the RN and the H5 page to communicate comprises the steps of leading a self-defined calling data packet into a project program through a self-defined calling data packet, defining an execution function at an information sending end, executing the execution function by monitoring the execution function at an information receiving end, acquiring information from the information sending end, and completing communication, wherein the communication between the RN and the H5 page is simpler and more convenient through self-defined calling of the data packet, the execution function and the setting of receiving, sending and responding conditions, the complicated operation amount is reduced, the efficient communication is realized, the RN can acquire the function in the H5 page just like directly calling the function, and the method can be applied to various scenes.
Drawings
FIG. 1 is a flowchart of a RN communicating with an H5 page according to the invention;
fig. 2 is a block diagram of the components of a system for communicating between an RN and an H5 page according to the present invention.
Detailed Description
Example 1: referring to fig. 1, the following describes a method for communication between an RN and an H5 page, where an information sending end is a react-native and an information receiving end is an H5 page, and the method includes the following steps:
step 1: calling a data packet by user;
step 2: importing the self-defined calling data packet into a project program;
and step 3: defining an executive function in the react-native, the executive function configured to connect the react-native and the H5 page;
and 4, step 4: and the H5 page monitors the execution function, executes the execution function, acquires the information from the reactive-native and completes the communication.
Specifically, in step 1, the customized calling data package is uploaded to a website hosting the third party package for a user to download the customized calling data package, and the website hosting the third party package has npm official websites.
Specifically, in step 3, the execution function is configured to specify the information to be transmitted by the real-native, and the H5 page can receive the information of the real-native.
Specifically, in this embodiment, in step 4, the H5 page calls an API method provided in a custom call data packet, to monitor an execution function defined in a real-native; and when the H5 page monitors the execution function, the execution function is executed, and when the execution of the execution function is finished, the H5 page receives the information from the reactive-native to finish the communication.
Example 2: the method for communication between the RN and the H5 page is described by taking the information sending end as the H5 page and the information receiving end as the react-native, and comprises the following steps:
step 1: calling a data packet by user;
step 2: importing the self-defined calling data packet into a project program;
and step 3: defining an executive function for the H5 page, the executive function configured to connect to the communication for the H5 page and the react-native;
and 4, step 4: and the act-native monitoring execution function executes the execution function to acquire information from the page H5 to complete communication.
Specifically, in step 1, the customized calling data package is uploaded to a website hosting the third party package for a user to download the customized calling data package, and the website hosting the third party package has npm official websites.
Specifically, in step 3, the executive function is configured to specify the information to be transferred for the H5 page, and the react-native can receive the information from the H5 page.
Specifically, in this embodiment, in step 4, the act-native calls an API method provided in the custom call packet, and is used to monitor an execution function defined in the H5 page; and when the act-native monitors the execution function, executing the execution function, and when the execution of the execution function is finished, receiving the information from the page H5 by the act-native to complete communication.
The method for the RN and the H5 page to communicate comprises the steps of leading a self-defined calling data packet into a project program through a self-defined calling data packet, defining an execution function at an information sending end, executing the execution function by monitoring the execution function at an information receiving end, acquiring information from the information sending end, and completing communication, wherein the communication between the RN and the H5 page is simpler and more convenient through self-defined calling of the data packet, the execution function and the setting of receiving, sending and responding conditions, the complicated operation amount is reduced, the efficient communication is realized, the RN can acquire the function in the H5 page just like directly calling the function, and the method can be applied to various scenes.
Referring to fig. 2, in an embodiment of the present invention, there is further provided a system for communicating between an RN and an H5 page, including:
the calling module 1 is configured to self-define calling data packets;
the import module 2 is configured to import the self-defined calling data packet into the project program;
an execution function module 3 configured to define an execution function at the information sending end, the execution function being configured to connect communication of the information sending end and the information receiving end;
and the monitoring module 4 is configured to monitor the execution function by the information receiving end and then execute the execution function to acquire the information from the information sending end.
Specifically, the calling module 1 uploads a self-defined calling data package to a website hosting a third party package for a user to download the self-defined calling data package;
the execution function of the execution function module 3 is configured to set the information to be transmitted by the information transmitting end, and the information receiving end can receive the information from the information transmitting end;
in the monitoring module 4, the information receiving end calls an API method provided in a self-defined calling data packet and is used for monitoring an execution function defined in the information sending end; when the information receiving end monitors the execution function, the execution function is executed, and when the execution of the execution function is finished, the information receiving end receives the information from the information sending end to finish communication;
when the information sending end is a contact-native, the information receiving end is an H5 page; or when the information sending end is an H5 page, the information sending end is a reactive-native.
In an embodiment of the present invention, there is also provided an apparatus for communicating between an RN and an H5 page, including: comprising a processor, a memory, and a program;
a program is stored in the memory and the processor calls the program stored in the memory to perform the method of communicating between the RN and H5 pages described above.
The apparatus may include, but is not limited to, a processor, a memory. Those skilled in the art will appreciate that the present embodiment is merely an example of an apparatus, and does not constitute a limitation of the apparatus, and may include more or less components than the present embodiment, or combine some components, or different components, for example, may further include an input/output device, a network access device, and the like.
The Memory may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like. The memory is used for storing programs, and the processor executes the programs after receiving the execution instructions.
The processor may be an integrated circuit chip having signal processing capabilities. The processor may be a general-purpose processor, and includes a Central Processing Unit (CPU), a Network Processor (NP), and the like. The Processor may also be other general purpose processors, Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field Programmable Gate Arrays (FPGAs) or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components, etc. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The various methods, steps, and logic blocks disclosed in the embodiments of the present application may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
A data processing program for carrying out operations of the present invention may be written in any combination of one or more programming languages, including AN object oriented programming language such as Java, C + +, or the like, as well as conventional procedural programming languages, such as the "C" language or similar programming languages.
In an embodiment of the present invention, there is also provided a computer-readable storage medium characterized in that: the computer readable storage medium is configured to store a program configured to perform the method of communicating the RN and H5 pages described above.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a system, method, apparatus, or computer program product. Accordingly, embodiments of the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, embodiments of the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
Embodiments of the present invention are described with reference to flowchart illustrations and/or block diagrams of methods, apparatus, and computer program products according to embodiments of the invention. 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 terminal to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal, create means for implementing the functions specified in the flowchart and/or flowchart 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 terminal 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.
These computer program instructions may also be loaded onto a computer or other programmable data processing terminal to cause a series of operational steps to be performed on the computer or other programmable terminal to produce a computer implemented process such that the instructions which execute on the computer or other programmable terminal provide steps for implementing the functions specified in the flowchart.
The method for communicating between RN and H5 pages, the system for communicating between RN and H5 pages, the apparatus for communicating between RN and H5 pages, and the application of a computer readable storage medium provided by the present invention are described in detail above, and a specific example is applied herein to illustrate the principles and embodiments of the present invention, and the above description of the embodiment is only used to help understanding the method and the core idea of the present invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.

Claims (10)

1. A method for RN and H5 page communication is characterized by comprising the following steps:
step 1: calling a data packet by user;
step 2: importing the self-defined calling data packet into a project program;
and step 3: defining an execution function at an information sending end, the execution function being configured to connect communication of the information sending end and an information receiving end;
and 4, step 4: and the information receiving terminal monitors the execution function and executes the execution function to acquire the information from the information sending terminal to finish communication.
2. The method for RN and H5 pages to communicate as claimed in claim 1, wherein: in step 1, the customized calling data package is uploaded to a website hosting a third party package for a user to download the customized calling data package.
3. The method for RN and H5 pages to communicate as claimed in claim 1, wherein: in step 3, the execution function is configured to specify the information that needs to be transmitted by the information transmitting end, and the information receiving end can receive the information from the information transmitting end.
4. The method for RN and H5 pages to communicate as claimed in claim 1, wherein: in step 4, the information receiving end calls an API method provided in a self-defined calling data packet, and is used for monitoring an execution function defined in the information sending end; and when the information receiving end monitors the execution function, the execution function is executed, and when the execution function is finished, the information receiving end receives the information from the information sending end to finish communication.
5. The method for RN and H5 pages to communicate as claimed in claim 1, wherein: the information sending end is a react-native, and the information receiving end is an H5 page.
6. The method for RN and H5 pages to communicate as claimed in claim 1, wherein: the information sending end is an H5 page, and the information sending end is a react-native.
7. A system for communicating between a RN and a H5 page, comprising:
a calling module configured to custom call the data packet;
the import module is configured to import the self-defined calling data packet into the project program;
an execution function module configured to define an execution function at an information sending end, the execution function configured to connect communication of the information sending end and the information receiving end;
and the monitoring module is configured to execute the execution function when the information receiving end monitors the execution function, and acquire the information from the information sending end.
8. The system of claim 7, wherein the RN communicates with the H5 page, and the system further comprises: the calling module uploads the self-defined calling data packet to a website hosting a third party package for a user to download the self-defined calling data packet;
the executive function of the executive function module is configured to set the information needed to be transmitted by the information transmitting terminal, and the information receiving terminal can receive the information from the information transmitting terminal;
in the monitoring module, the information receiving terminal calls an API method provided in a self-defined calling data packet and is used for monitoring an execution function defined in an information sending terminal; and when the information receiving end monitors the execution function, the execution function is executed, and when the execution function is finished, the information receiving end receives the information from the information sending end to finish communication.
9. An apparatus for communicating between a RN and a H5 page, comprising: comprising a processor, a memory, and a program;
the program is stored in the memory and the processor invokes the memory stored program to perform the method of communicating the RN and H5 pages of claim 1.
10. A computer-readable storage medium characterized by: the computer readable storage medium is configured to store a program configured to perform the method of communicating the RN and H5 pages of claim 1.
CN202010166827.5A 2020-03-11 2020-03-11 Method, system, device and medium for communication between RN and H5 page Active CN111399809B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010166827.5A CN111399809B (en) 2020-03-11 2020-03-11 Method, system, device and medium for communication between RN and H5 page

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010166827.5A CN111399809B (en) 2020-03-11 2020-03-11 Method, system, device and medium for communication between RN and H5 page

Publications (2)

Publication Number Publication Date
CN111399809A true CN111399809A (en) 2020-07-10
CN111399809B CN111399809B (en) 2023-09-12

Family

ID=71430682

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010166827.5A Active CN111399809B (en) 2020-03-11 2020-03-11 Method, system, device and medium for communication between RN and H5 page

Country Status (1)

Country Link
CN (1) CN111399809B (en)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106686748A (en) * 2015-11-05 2017-05-17 泰康保险集团股份有限公司 Control method for communication of multiple terminal devices, terminal equipment and server
US20180264361A1 (en) * 2016-05-12 2018-09-20 Tencent Technology (Shenzhen) Company Limited Web page running method and apparatus, terminal, and storage medium
CN109391649A (en) * 2017-08-04 2019-02-26 阿里巴巴集团控股有限公司 The methods, devices and systems of page load
CN109446457A (en) * 2018-09-25 2019-03-08 平安普惠企业管理有限公司 Update method, terminal device and the medium of page data
CN109814965A (en) * 2019-01-10 2019-05-28 北京城市网邻信息技术有限公司 Processing method, device, electronic equipment and the storage medium of the H5 page
CN109857403A (en) * 2018-12-05 2019-06-07 腾讯科技(深圳)有限公司 A kind of renewal of the page, page processing method and device

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106686748A (en) * 2015-11-05 2017-05-17 泰康保险集团股份有限公司 Control method for communication of multiple terminal devices, terminal equipment and server
US20180264361A1 (en) * 2016-05-12 2018-09-20 Tencent Technology (Shenzhen) Company Limited Web page running method and apparatus, terminal, and storage medium
CN109391649A (en) * 2017-08-04 2019-02-26 阿里巴巴集团控股有限公司 The methods, devices and systems of page load
CN109446457A (en) * 2018-09-25 2019-03-08 平安普惠企业管理有限公司 Update method, terminal device and the medium of page data
CN109857403A (en) * 2018-12-05 2019-06-07 腾讯科技(深圳)有限公司 A kind of renewal of the page, page processing method and device
CN109814965A (en) * 2019-01-10 2019-05-28 北京城市网邻信息技术有限公司 Processing method, device, electronic equipment and the storage medium of the H5 page

Also Published As

Publication number Publication date
CN111399809B (en) 2023-09-12

Similar Documents

Publication Publication Date Title
US20190095200A1 (en) Compatibility method based on hybrid, adapter, operation device, system and computer-readable storage medium
CN110187986B (en) Command management method, system, device and computer readable storage medium
CN110096380B (en) Android internal communication method, system, device and storage medium
US20200210829A1 (en) Network off-line model processing method, artificial intelligence processing device and related products
CN113672441A (en) Method and device for testing intelligent equipment
CN113946602A (en) Data searching method, device, equipment and medium
CN109725887B (en) Data interaction method and device based on message research and development framework and terminal equipment
CN109739487B (en) Business logic processing method and device and computer readable storage medium
CN113609417A (en) Method, device, equipment and medium for processing mobile terminal page
CN108509228B (en) Page loading method, terminal equipment and computer readable storage medium
CN111399809A (en) Method, system, device and medium for communication between RN and H5 pages
CN110825373B (en) Mobile terminal dynamic method and device
TW202403541A (en) System, method and device for introducing applet into third-party APP and medium
CN111552606A (en) Data processing method and device and electronic equipment
CN112631949B (en) Debugging method and device, computer equipment and storage medium
CN112612550A (en) File configuration method and device
WO2022099913A1 (en) Interface configuration method and apparatus, and device and medium
CN107092601B (en) Resource file construction method, resource file application method and device
CN112118285B (en) Data transmission method and system suitable for client full-version browser
CN114356507A (en) Method, device and equipment for processing document based on browser and storage medium
CN111459588A (en) Big data model setting method, terminal device and computer readable storage medium
CN112965767A (en) Job processing method and apparatus, electronic device, and storage medium
CN109663361B (en) Game application program self-login method, device, terminal and storage medium
CN113535592B (en) Method, device and equipment for packet capturing of DPDK application program and storage medium
CN112799643B (en) Front-end page application development method and device based on database mapping dynamic interface

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
GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20240110

Address after: No. 168, Ludang Road, Jiangling Street, Wujiang District, Suzhou City, Jiangsu Province (north of the original Lingyi Road)

Patentee after: Suzhou Jingxi Education Technology Co.,Ltd.

Address before: No.78, Keling Road, science and Technology City, high tech Zone, Suzhou City, Jiangsu Province, 215163

Patentee before: Suzhou Jinxi Intelligent Technology Co.,Ltd.