Interface mapping method and device

Abstract

The present invention discloses an interface mapping method and device, which relate to the field of computer technology. A specific implementation of the method includes: the native end receives the interface identifier transmitted by the web page end, obtains the interface information corresponding to the interface identifier and registers it to obtain the registered interface information; wherein the interface information includes native classes and methods; transmits the registered interface information to the web page end, so as to map the native classes and methods in the registered interface information to format objects and methods on the web page end, and establish an interface mapping relationship between the native end and the web page end. In the initial process of WebApp, this implementation method automatically maps the native interface capabilities to the JS of H5, so that the capabilities of the Native open interface are integrated with JS, and the interface mapping between the Native end and the WebApp is realized; and there is no need for the staff to manually enter the interface protocol, which effectively reduces the error rate of the WebApp calling the Native protocol, reduces the workload of the staff, improves the development efficiency of the developers, and makes the front-end development more convenient and efficient.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to an interface mapping method and device. Background Art

[0002] When integrating an H5 page into an APP application, some of the H5 page's logic / functions usually rely on interfaces provided by Native (that is, Java calls interfaces of non-Java code). Therefore, H5 and Native need to interact to implement the call.

[0003] The existing interaction methods between H5 and Native are mainly based on JSBridge and DSBridge technologies:

[0004] 1) Native calls JS by injecting JS statements into JS using evaluate JavaScript to achieve interaction;

[0005] 2) When JS calls Native, it intercepts the Scheme: / / xxx / xxxx protocol in Native, parses the Scheme-compliant URL (Uniform Resource Locator), and converts the parsed path, param, etc. used to represent the class, method, and parameter in the program into an execution method (that is, the ability to execute and call specific functions in the program) and a callback calling interface capability.

[0006] In the process of implementing the present invention, the inventors discovered that the prior art has at least the following problems:

[0007] 1) JS is completely unaware of Native interface capabilities, and development can only be done by comparing with Native interface documentation, which is very inconvenient and requires high documentation.

[0008] 2) When JS calls Native, it often calls in the form of concatenated strings, which are often hard-coded. If developers make spelling errors during the coding process, it is difficult to find the problem;

[0009] 3) The JS SDK classification is confusing, often mixing many interfaces in a JS object, resulting in inconsistent interfaces between Native and JS.

[0010] 4) When debugging H5, you cannot see the actual structure and interface of the object provided by Native. Debugging cannot automatically prompt classes and methods. In addition, the cost of interface joint debugging is high, requiring frequent communication between developers on both sides. Summary of the Invention

[0011] In view of this, an embodiment of the present invention provides an interface mapping method and device, which can at least solve the problem in the prior art that the native interface document has high requirements and H5's native interface capabilities are completely unknown.

[0012] To achieve the above object, according to one aspect of an embodiment of the present invention, an interface mapping method is provided, comprising:

[0013] The native end receives the interface identifier transmitted by the web page end, obtains the interface information corresponding to the interface identifier and registers it to obtain the registered interface information; wherein the interface information includes the native class and method;

[0014] The registration interface information is transmitted to the web page end, so that the native classes and methods in the registration interface information are mapped to format objects and methods on the web page end, and an interface mapping relationship is established between the native end and the web page end.

[0015] Optionally, the native end receives the interface identifier transmitted by the web page end, obtains interface information corresponding to the interface identifier and registers it, and obtains the registered interface information, including:

[0016] During the process of loading the web page, the native end obtains the interface identifier in the web page and determines the interface corresponding to the interface identifier;

[0017] Obtaining interface information of the interface and registering it to generate registration interface information corresponding to the identifier of the web page;

[0018] Receive the initialization information transmitted by the web page, and obtain the registration interface information corresponding to the web page according to the identifier of the web page.

[0019] Optionally, the native end receives the interface identifier transmitted by the web page end, further comprising:

[0020] The native end analyzes the characteristics of all interfaces, determines the interfaces that can provide external services, and generates external interface records;

[0021] The external interface record is transmitted to the web page end, and then the interface identifier fed back by the web page end is received; wherein, the interface identifier is obtained by the web page end by comparing the external interface record with the interface record of the web page end.

[0022] Optionally, after determining the interface that can provide external services, the method further includes:

[0023] Obtaining the interface information of the determined interface and registering it to obtain the registered interface information;

[0024] The acquiring and registering the interface information corresponding to the interface identifier includes: acquiring the registered interface information corresponding to the interface identifier.

[0025] Optionally, mapping the native classes and methods in the registration interface information to format objects and methods on the web page includes:

[0026] The web page converts the format of the native class and method through a predetermined conversion method to obtain the format object and method, and stores the format object and method in the interface execution code of the web page.

[0027] To achieve the above object, according to another aspect of an embodiment of the present invention, an interface mapping device is provided, comprising:

[0028] An information registration module is used for the native end to receive the interface identifier transmitted by the web page end, obtain the interface information corresponding to the interface identifier and register it to obtain the registered interface information; wherein the interface information includes the native class and method;

[0029] An information mapping module is used to transmit the registration interface information to the web page end, so as to map the native classes and methods in the registration interface information into format objects and methods on the web page end, and establish an interface mapping relationship between the native end and the web page end.

[0030] Optionally, the information registration module is used to:

[0031] During the process of loading the web page, the native end obtains the interface identifier in the web page and determines the interface corresponding to the interface identifier;

[0032] Obtaining interface information of the interface and registering it to generate registration interface information corresponding to the identifier of the web page;

[0033] Receive the initialization information transmitted by the web page, and obtain the registration interface information corresponding to the web page according to the identifier of the web page.

[0034] Optionally, the information registration module is further used to:

[0035] The native end analyzes the characteristics of all interfaces, determines the interfaces that can provide external services, and generates external interface records;

[0036] The external interface record is transmitted to the web page end, and then the interface identifier fed back by the web page end is received; wherein, the interface identifier is obtained by the web page end by comparing the external interface record with the interface record of the web page end.

[0037] Optionally, the information registration module is further configured to: obtain interface information of the determined interface and register it to obtain registered interface information; and obtain registered interface information corresponding to the interface identifier.

[0038] Optionally, the information mapping module is used to: the web page end performs format conversion on the native class and method through a predetermined conversion method to obtain the format object and method, and stores the format object and method in the interface execution code of the web page end.

[0039] To achieve the above objective, according to another aspect of an embodiment of the present invention, an interface mapping electronic device is provided.

[0040] The electronic device of an embodiment of the present invention includes: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, the one or more processors implement any of the above-mentioned interface mapping methods.

[0041] To achieve the above object, according to another aspect of an embodiment of the present invention, a computer-readable medium is provided, on which a computer program is stored. When the program is executed by a processor, any of the above interface mapping methods is implemented.

[0042] According to the solution provided by the present invention, one embodiment of the above invention has the following advantages or beneficial effects: Native abstractly classifies and decouples the interface capabilities required by WebApp, and automatically maps the native capability interface to H5's JS during the subsequent WebApp loading process, so that the open capabilities of Native are integrated with JS, making it convenient for JS SDK to provide external capabilities for classification and encapsulation and make multi-terminal interfaces consistent, so that Native developers can focus more on the development of interface capabilities and H5 developers can focus more on the development of business and applications; at the same time, the development efficiency and debugging efficiency of developers on both ends are improved, and the error rate is reduced.

[0043] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with specific embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] The accompanying drawings are provided for a better understanding of the present invention and are not intended to limit the present invention.

[0045] Figure 1 This is a schematic diagram of the main flow of an interface mapping method according to an embodiment of the present invention;

[0046] Figure 2 This is a schematic diagram of mapping the Native end to the H5 end provided by an embodiment of the present invention;

[0047] Figure 3 A schematic flow chart of an optional interface mapping method according to an embodiment of the present invention;

[0048] Figure 4 is a flow chart of another optional interface mapping method according to an embodiment of the present invention;

[0049] Figure 5 is a flowchart of a specific interface mapping method according to an embodiment of the present invention;

[0050] Figure 6 is a partial schematic diagram of a debugging interface provided by an embodiment of the present invention;

[0051] Figure 7 1 is a schematic diagram of main modules of an interface mapping device according to an embodiment of the present invention;

[0052] Figure 8 is an exemplary system architecture diagram in which embodiments of the present invention may be applied;

[0053] Figure 9 It is a schematic diagram of the structure of a computer system of a mobile device or server suitable for implementing the embodiments of the present invention. DETAILED DESCRIPTION

[0054] The following description of exemplary embodiments of the present invention is made in conjunction with the accompanying drawings, in which various details of the embodiments of the present invention are included to facilitate understanding. These details should be considered as merely exemplary. Therefore, it should be appreciated by those skilled in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0055] It should be noted that the current mainstream programming codes for operating systems are Object-C (iOS system) and Java (Android system). The solution for H5 and Native interaction is mainly applicable to these two systems. This invention mainly uses the iOS system as an example for explanation.

[0056] The terms used in this invention are explained as follows:

[0057] Interface mapping: refers to creating Native classes and class calling methods on the H5 side with the same class name and method name, so that the classes and methods used by JS and Native have the same name, and calling the JS function is equivalent to calling the Native function.

[0058] WebApp: A small H5 application with certain special functions developed by a company or team. It can be a web page or a website.

[0059] JSBridge, DSbridge: open source framework, JS code connecting native WebView and Javascript communication bridge.

[0060] Interface documentation: In project development, the front-end and back-end of web projects are developed separately, and App development requires the front-end and back-end engineers to jointly define the interface and write the interface documentation. After that, everyone will develop according to this interface document, and it needs to be maintained until the end of the project.

[0061] See also Figure 1 , which shows a main flow chart of an interface mapping method provided by an embodiment of the present invention, including the following steps:

[0062] S101: The native end receives the interface identifier transmitted by the web page end, obtains the interface information corresponding to the interface identifier, and registers it to obtain the registered interface information; wherein the interface information includes the native class and method;

[0063] S102: Transmitting the registration interface information to the web page end, so as to map the native classes and methods in the registration interface information to format objects and methods on the web page end, and establishing an interface mapping relationship between the native end and the web page end.

[0064] In the above implementation, step S101 mainly acts on the native side.

[0065] JSBridge.js is an intermediary layer that manages communication between the native JavaScript and the WebApp H5 page's JavaScript. JSBridge.js can also be called a service, but it differs from the server in that it serves as an intermediary bridge responsible for recording and transmitting communication data.

[0066] Some functions of the page in the WebApp may require calling the Native API to be implemented; for example, calling the camera API to take a picture, and then calling the upload picture API to upload the taken picture.

[0067] Typically, when developing a WebApp, developers analyze which functions can be implemented by themselves and which functions require calling native APIs. Therefore, when loading the WebApp, the WebApp transmits the identifiers of these interfaces to the native side.

[0068] Some interfaces on the Native side can provide services to the outside world, while others cannot. Usually, the interface identifiers transmitted by WebApp are identifiers of interfaces that can provide services to the outside world.

[0069] To distinguish interface services, register interfaces that provide external services to distinguish them from other interfaces. For example, in iOS, due to the deep class inheritance structure in Obj-C, which may contain too many useless interface methods, the open interface methods of registered classes are named starting with "JSInterface_" to distinguish them (interfaces include native classes and methods).

[0070] Among them, the Native classes registered in the Native side are all collections of certain native functions that have been classified, such as DeviceInfo, Camera, Photo, Network, and Share.

[0071] Furthermore, classes and calling methods can be registered based on the WebApp identifier, interface identifier, and JSInterface_. However, the same interface may be called by multiple apps. To reduce the system resource usage of subsequent registered interface information, the present invention mainly adopts the above method, that is, naming with "JSInterface_" to distinguish them.

[0072] Furthermore, different apps implement different functions. A corresponding registration interface information table can be created for each app and temporarily stored in the native memory for subsequent mapping. In addition, this method also facilitates subsequent app function updates, in which case the registration interface information table can be directly updated.

[0073] For step S102 , the page data of the WebApp is usually stored in the server, so the page information associated with the page needs to be loaded from the server, such as html, css, images, js (webapp.js, jsbridge.js / dsbridge.js, mappingN.js).

[0074] For WebApp, its page display is based on the native side of the WebView. Therefore, based on the obtained page information, the properties of the WebView can be configured, including URL, width and height, navigation bar style, etc.

[0075] In addition, mappingN.js (a JS used for mapping classes) is mainly used for mapping classes. It is implemented based on the communication mechanism and functions of JSbridge, and mainly has the functions of create to create objects and addMethod to add object methods.

[0076] The registration interface information transmitted from the Native side to the WebApp is mainly sent in the form of a string.

[0077] For the received string, the WebApp can use the create method in the loaded mappingN.js to create a JS object (i.e., a format object) and the addMethod method to add JS object methods to complete the automatic mapping of all classes. Specifically: var mN = mapping.create...

[0078] See also Figure 2 , showing the class and method mapping between Native and H5:

[0079] 1) Create a string of JS execution program in Native - (id)JSInterface_deviceInfo: (id)args: (id)args;

[0080] 2) Native transmits this string to WebApp;

[0081] 3) After WebApp performs mapping through mappingN.js, it obtains function deviceInfo(args){}, thereby completing the interface mapping.

[0082] As shown below Figure 2 Some core codes of JMEH5ApiDeviceInfo class mapping:

[0083] NSString*jsString=[NSString stringWithFormat:@"var mN=

[0084] mappingN.create(); mappingN.addMethod(mN,'JMEH5ApiDeviceInfo','deviceInfo'); mappingN.addMethod(mN,'JMEH5ApiDeviceInfo','getUDID');"];

[0085] [selfevaluateJavaScript:[NSString stringWithFormat:@"%@",jsString]completionHandler:^(id_Nullable obj,NSError*_Nullable error){}]

[0086] Furthermore, in the mapping method adopted, the names of the classes and calling methods of the relevant interfaces remain unchanged. Taking the class - camera and the calling method - open in the Native side as an example, the existing method and the present invention are compared:

[0087] 1) In the existing traditional method, the class in the WebApp may be camera1 and the method may be shoot, and the classification names defined by each are not unified;

[0088] 2) In the present invention, the classes and methods of JS are all mapped, and the classification and naming are unified, that is, class - camera, and calling method - open.

[0089] Therefore, after completing the interface mapping between the Native side and the WebApp, the JS SDK (Software Development Kit) in the WebApp calls the corresponding Object and method of JS, which is equivalent to calling the native interface capabilities of the Native side, integrating the open capabilities of Native with JS.

[0090] Furthermore, the SDK encapsulates the application programming interface (API) used to call native operations. The JS SDK can also be encapsulated twice, encapsulating JS objects and methods in the interface provided by external applications for interaction.

[0091] Furthermore, the functions of the WebApp are implemented based on its code. For the interface code that needs to call the Native side, it can be set to blank first, for example, interface1(), and the brackets need to be supplemented based on the interface information of the Native side.

[0092] Therefore, after the calling method of the class of the above-mentioned acquisition interface is obtained, this part of blank code can be updated based on the converted JS object and method, specifically, replaced and updated.

[0093] This copy-and-paste method replaces the existing method where staff need to manually enter the interface protocol word for word according to the requirements of the native interface document, effectively avoiding protocol input errors, while reducing the number of times developers need to analyze errors, correct errors, and re-debug, thereby reducing the workload of staff.

[0094] The method provided in the above embodiment automatically maps native interface capabilities to HTML5's JavaScript during the WebApp initialization process, integrating the native open interface capabilities with JavaScript and achieving interface mapping between the native side and the WebApp. This approach eliminates the need for manual interface protocol input by staff, effectively reducing the error rate when the WebApp calls the native protocol, reducing staff workload, and improving developer efficiency, making front-end development more convenient and efficient.

[0095] See also Figure 3, which shows a main flow chart of an optional interface mapping method provided by an embodiment of the present invention, including the following steps:

[0096] S301: During the process of loading a web page, the native terminal obtains an interface identifier in the web page and determines an interface corresponding to the interface identifier;

[0097] S302: Obtaining interface information of the interface and registering it to generate registered interface information corresponding to the identifier of the web page; wherein the interface information includes native classes and methods;

[0098] S303: Receive initialization information transmitted by the web page, and obtain registration interface information corresponding to the web page according to the identifier of the web page;

[0099] S304: Transmitting the registration interface information to the web page end, so as to map the native classes and methods in the registration interface information to format objects and methods on the web page end, and establishing an interface mapping relationship between the native end and the web page end.

[0100] In the above embodiment, for step S304, please refer to Figure 1 The description shown is not repeated here.

[0101] In the above implementation, steps S301 and S302 occur before the App is initialized. The Native side has registered the interface information according to the interface requirements of the WebApp side, but has not yet transmitted the registered interface information to the WebApp.

[0102] Here, the loading of the WebApp can be the process of downloading the installation package and installing it on the device, or restarting the application after the function is updated, or loading in response to the user clicking to open the operation. The present invention does not limit this.

[0103] In the WebApp code, the code for calling the native side interface can be blank and needs to be supplemented based on the native side class and calling method. Therefore, during the WebApp loading process, the WebApp will transfer the identifiers of these interfaces to the native side.

[0104] The native side determines the corresponding interface based on the interface identifier and registers the interface information to distinguish it from other interfaces. For example, after registering the class "camera" and the method "open", the result is the string "JSInterface_camera" and "open".

[0105] Furthermore, in order to facilitate the subsequent direct acquisition of WebApp registration interface information, the registered registration interface information can be matched with the WebApp.

[0106] Regarding step S303, after the WebApp starts initialization, that is, JS initialization JSInit (interface initialization work), it will transmit the initialization information to the Native end to inform the Native end to start interface information preparation work.

[0107] The Native side responds to the message and also starts the nativeInit initialization work to prepare for transmitting the registration interface information.

[0108] For WebApp, it is mainly divided into business layer and engine layer:

[0109] 1) Business layer, which is developed by business personnel based on business needs

[0110] In the business center of the WebApp (or application management backend), developers can distinguish and label all called interfaces according to business needs, such as interface 1 - calling the App's own functions, interface 2 - calling the mobile phone functions, and store them in the App for subsequent transmission to the Native end.

[0111] 2) Engine layer, for obtaining registration interface information, rendering pages, etc.

[0112] The engine processing center is not involved in business processing, so it does not know which interfaces the WebApp needs to call on the Native side. The engine center here only obtains the registration interface information corresponding to the webApp from the Native side.

[0113] The method described above transmits the interface identifier to the native side through the WebApp's business layer, and then retrieves the corresponding registered interface information from the native side through the engine layer. This process, performed at different levels of the WebApp, significantly improves overall operational efficiency compared to a single-level approach that determines both the interface identifier and retrieves the registered interface information. It also facilitates troubleshooting of any subsequent system anomalies.

[0114] See also Figure 4 , which shows a main flow chart of another optional interface mapping method provided by an embodiment of the present invention, including the following steps:

[0115] S401: The native end analyzes the characteristics of all interfaces, determines the interfaces that can provide external services, and generates external interface records;

[0116] S402: Transmitting the external interface record to the webpage, and then receiving the interface identifier fed back by the webpage; wherein the interface identifier is obtained by the webpage by comparing the external interface record with the interface record of the webpage;

[0117] S403: Acquire interface information corresponding to the interface identifier and register it to obtain registered interface information; wherein the interface information includes native classes and methods;

[0118] S404: Transmitting the registration interface information to the web page end, so as to map the native classes and methods in the registration interface information to format objects and methods on the web page end, and establishing an interface mapping relationship between the native end and the web page end.

[0119] In the above embodiment, step S403 can be seen in Figure 1 and Figure 3 For step S404, please refer to Figure 1 The description of step S102 is omitted here.

[0120] In the above implementation, for step S401, some interfaces in the Native side can provide external services, such as the camera interface, while some cannot, such as the calendar interface.

[0121] In this case, to improve the efficiency of subsequent interface determination and interface information acquisition, the Native side can build external interface records for interfaces that can provide external services to achieve interface classification.

[0122] Regarding step S402, it was mentioned earlier that during the WebApp development phase, developers will determine which Native-side interfaces need to be called based on their business needs.

[0123] In addition to this manual analysis method, during the WebApp loading phase, the WebApp can compare its interface records with the external interface records of the Native side to determine which interface capabilities can be provided by the Native side.

[0124] In addition to the aforementioned WebApp comparison method, the Native side can also automatically obtain the WebApp's interface records and compare them with its own external interface records to determine which interface capabilities can be provided to the WebApp.

[0125] Furthermore, the external service interfaces on the Native side will be called by the App to a greater or lesser extent.

[0126] Therefore, after determining the interfaces that can provide external services, you can directly register the interface information of these interfaces to obtain the registered interface information corresponding to each interface. In this way, in subsequent scenarios where registered interface information is needed, it can be directly obtained based on the interface identifier, omitting the operation of re-registering the information.

[0127] In the method provided in the above embodiment, the Native end transmits the external interface record to the WebApp, and subsequently transmits the registration interface information to the WebApp, thereby enabling the WebApp to obtain the Native end interface capability.

[0128] See also Figure 5 , which shows a main flow chart of a specific interface mapping method provided by an embodiment of the present invention, including the following steps:

[0129] S501: The native end analyzes the characteristics of all interfaces, determines the interfaces that can provide external services, and generates external interface records;

[0130] S502: During the process of loading the web page, the external interface record is transmitted to the web page;

[0131] S503: Receive the interface identifier transmitted by the web page, and determine the interface corresponding to the interface identifier; wherein the interface identifier is obtained by the web page by comparing the external interface record with the interface record of the web page;

[0132] S504: Obtaining interface information of the interface and registering it to generate registered interface information corresponding to the identifier of the web page; wherein the interface information includes native classes and methods;

[0133] S505: Receive initialization information transmitted by the web page, obtain registration interface information corresponding to the web page according to the identifier of the web page, and transmit the registration interface information to the web page;

[0134] S506: The web page converts the native classes and methods in the registration interface information into formats using a predetermined conversion method to obtain format objects and methods.

[0135] S507: The web page stores the format object and the object in the interface execution code of the web page, and establishes an interface mapping relationship between the native end and the web page.

[0136] In the above embodiment, for steps S501 to S505, please refer to the above Figures 1 to 4 The description shown is not repeated here.

[0137] In the above implementation, for steps S506 and S507, during the WebApp development process, the code required to call the Native API can be left blank. This blank code can only be updated, specifically, overwritten, after receiving the JS string transmitted from the Native API and converting it into a JS object and method.

[0138] The program JS string is generated on the Native side. After being transferred to the WebApp and executed by JS, MappingN.js will be called to complete the actual mapping relationship, which will ultimately take effect on the WebApp side.

[0139] It should be noted that, before step S507, the page displayed in the WebApp is blank, indicating the loading process of the page. Only after step S507 is a complete page displayed, including page data, page configuration information, etc.

[0140] After completing the interface mapping between the Native side and the WebApp, you can make interface calls and debug the H5 page JS in the WebApp:

[0141] 1) Interface call

[0142] When a user clicks a configuration option on the WebApp page and needs to call the Native API, the WebApp transmits the API call request to the Native API.

[0143] The Native side responds to the interface call request, automatically searches for classes and methods through the runtime, finds the corresponding classes and methods, and calls them directly, completing automatic interaction with the WebApp; among them, the runtime is the runtime in the iOS system's Object-C.

[0144] For example, in the program, the class - camera, the method - open, input these two strings into a low-level interface in object-c, and the corresponding class and method in the native memory will be automatically called to perform the camera opening operation.

[0145] 2) JS debugging of H5 pages in WebApp

[0146] The purpose of debugging is to check whether the interaction between JS and Native is efficient, whether the transmitted data is correct, and whether the interface capabilities can be called normally.

[0147] The debugging page can automatically prompt JS classes and methods (i.e. Native classes and methods), but the name prompted by JMEJSSDK.Native.JMEH5ApiDeviceInfo.getUDID in the debugging interface can only be seen after mapping, which is different from the existing debugging interface.

[0148] See also Figure 6 This is a partial debugging H5 tool for Apple's AFAR browser. In this debugging interface, you can also view the structure within an object, improving the efficiency of joint development and debugging for both developers.

[0149] The JS SDK in the WebApp calls the corresponding Object and method of JS, which is equivalent to directly calling the native interface capability of the Native side, maintaining multi-end uniformity (iOS / Android). You can use Native.JMEH5ApiDeviceInfo.getUDID(data, callback) to call the mapping method.

[0150] Compared with the existing methods, the method provided by the embodiment of the present invention has the following beneficial effects:

[0151] 1) The Native side transmits external interface records and registered interface information to the WebApp, so that the JS in the page can obtain the interface capabilities in the Native side without the need for the Native side to provide interface documentation;

[0152] 2) Separate the business layer and logic layer in the WebApp. The business layer determines the required Native APIs, and the engine layer obtains the registered API information. This creates a clear division of labor. This also facilitates problem discovery and timely resolution if an anomaly occurs in the WebApp later.

[0153] 3) When the WebApp page is initialized, a JS object and a calling method mapped to JS are created and given the same name as the object method in Native, making the interface capabilities provided by Native completely transparent to JS. Calling JS's own method is equivalent to calling the corresponding method in Native.

[0154] 4) By leveraging the principle that native code can inject JS script statements into WebView, the open interface capabilities of Native are integrated with the JS of the WebApp page. This facilitates the classification and encapsulation of the interface capabilities provided by the JS SDK and ensures consistent interfaces across multiple terminals (iOS / Android).

[0155] 5) This allows native developers to focus more on interface development and H5 developers to focus more on business and application development. It also reduces the number of interactions between developers on both ends, improves debugging and joint debugging efficiency, reduces error rates, and facilitates rapid problem location.

[0156] See also Figure 7 , which shows a schematic diagram of the main modules of an interface mapping device 700 provided in an embodiment of the present invention, including:

[0157] Information registration module 701, configured for the native terminal to receive the interface identifier transmitted by the web page terminal, obtain the interface information corresponding to the interface identifier, and register it to obtain registered interface information; wherein the interface information includes native classes and methods;

[0158] The information mapping module 702 is used to transmit the registration interface information to the web page end, so as to map the native classes and methods in the registration interface information into format objects and methods on the web page end, and establish an interface mapping relationship between the native end and the web page end.

[0159] In the implementation device of the present invention, the information registration module 701 is used to:

[0160] During the process of loading the web page, the native end obtains the interface identifier in the web page and determines the interface corresponding to the interface identifier;

[0161] Obtaining interface information of the interface and registering it to generate registration interface information corresponding to the identifier of the web page;

[0162] Receive the initialization information transmitted by the web page, and obtain the registration interface information corresponding to the web page according to the identifier of the web page.

[0163] In the implementation device of the present invention, the information registration module 701 is further used to:

[0164] The native end analyzes the characteristics of all interfaces, determines the interfaces that can provide external services, and generates external interface records;

[0165] The external interface record is transmitted to the web page end, and then the interface identifier fed back by the web page end is received; wherein, the interface identifier is obtained by the web page end by comparing the external interface record with the interface record of the web page end.

[0166] In the implementation device of the present invention, the information registration module 701 is further used to:

[0167] The interface information of the determined interface is obtained and registered to obtain registered interface information; and the registered interface information corresponding to the interface identifier is obtained.

[0168] In the implementation device of the present invention, the information mapping module 702 is used to:

[0169] The web page converts the format of the native class and method through a predetermined conversion method to obtain the format object and method, and stores the format object and method in the interface execution code of the web page.

[0170] In addition, the specific implementation contents of the device described in the embodiment of the present invention have been described in detail above, so the repeated contents will not be described again here.

[0171] Figure 8 An exemplary system architecture 800 is shown in which embodiments of the present invention may be applied.

[0172] like Figure 8 As shown, system architecture 800 may include terminal devices 801, 802, and 803, a network 804, and a server 805 (only as an example). Network 804 is used to provide a medium for communication links between terminal devices 801, 802, and 803 and server 805. Network 804 may include various connection types, such as wired or wireless communication links or fiber optic cables.

[0173] Users can use terminal devices 801, 802, 803 to interact with server 805 via network 804 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 801, 802, 803.

[0174] The terminal devices 801 , 802 , and 803 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers.

[0175] Server 805 may be a server that provides various services, such as a backend management server (for example only) that supports shopping websites browsed by users using terminal devices 801, 802, and 803. The backend management server may analyze and process received data such as product information query requests, and feed back the processing results to the terminal device.

[0176] It should be noted that the interface mapping method provided in the embodiment of the present invention is generally executed by the server 805 , and accordingly, the interface mapping device is generally provided in the server 805 .

[0177] It should be understood that Figure 8 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.

[0178] Reference below Figure 9 , which shows a schematic structural diagram of a computer system 900 of a terminal device suitable for implementing an embodiment of the present invention. Figure 9 The terminal device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0179] like Figure 9 As shown, the computer system 900 includes a central processing unit (CPU) 901, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 902 or a program loaded from a storage unit 908 into a random access memory (RAM) 903. Various programs and data required for the operation of the system 900 are also stored in the RAM 903. The CPU 901, ROM 902, and RAM 903 are connected to each other via a bus 904. An input / output (I / O) interface 905 is also connected to the bus 904.

[0180] The following components are connected to the I / O interface 905: an input section 906 including a keyboard, a mouse, and the like; an output section 907 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and a speaker; a storage section 908 including a hard disk and the like; and a communication section 909 including a network interface card such as a LAN card or a modem. The communication section 909 performs communication processing via a network such as the Internet. A drive 910 is also connected to the I / O interface 905 as needed. A removable medium 911, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 910 as needed, so that computer programs read therefrom can be installed into the storage section 908 as needed.

[0181] In particular, according to the embodiments disclosed in the present invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments disclosed in the present invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program comprising program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 909, and / or installed from a removable medium 911. When the computer program is executed by the central processing unit (CPU) 901, the above-mentioned functions defined in the system of the present invention are performed.

[0182] It should be noted that the computer-readable medium described in the present invention can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of computer-readable storage media can include, but are not limited to, an electrical connection having one or more conductors, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In the present invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. This propagated data signal can take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction with an instruction execution system, apparatus, or device. Program code embodied on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wireline, optical fiber cable, RF, or any suitable combination thereof.

[0183] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present invention. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the above-mentioned module, program segment, or a part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0184] The modules described in the embodiments of the present invention may be implemented in software or hardware. The modules described may also be provided in a processor. For example, they may be described as comprising an information registration module and an information mapping module. The names of these modules do not, in some cases, limit the modules themselves. For example, the information registration module may also be described as a "module for registering interface information."

[0185] As another aspect, the present invention further provides a computer-readable medium, which may be included in the device described in the above embodiments, or may exist independently without being incorporated into the device. The computer-readable medium carries one or more programs, and when the one or more programs are executed by the device, the device includes:

[0186] The native end receives the interface identifier transmitted by the web page end, obtains the interface information corresponding to the interface identifier and registers it to obtain the registered interface information; wherein the interface information includes the native class and method;

[0187] It is used to transmit the registration interface information to the web page end, so as to map the native classes and methods in the registration interface information into format objects and methods on the web page end, and establish an interface mapping relationship between the native end and the web page end.

[0188] The technical solution of the embodiment of the present invention has the following beneficial effects compared with the existing method:

[0189] 1) The Native side transmits external interface records and registered interface information to the WebApp, so that the JS in the page can obtain the interface capabilities in the Native side without the need for the Native side to provide interface documentation;

[0190] 2) Separate the business layer and logic layer in the WebApp. The business layer determines the required Native APIs, and the engine layer obtains the registered API information. This creates a clear division of labor. This also facilitates problem discovery and timely resolution if an anomaly occurs in the WebApp later.

[0191] 3) When the WebApp page is initialized, a JS object and a calling method mapped to JS are created and given the same name as the object method in Native, making the interface capabilities provided by Native completely transparent to JS. Calling JS's own method is equivalent to calling the corresponding method in Native.

[0192] 4) By leveraging the principle that native code can inject JS script statements into WebView, the open interface capabilities of Native are integrated with the JS of the WebApp page. This facilitates the classification and encapsulation of the interface capabilities provided by the JS SDK and ensures consistent interfaces across multiple terminals (iOS / Android).

[0193] 5) This allows native developers to focus more on interface capability development and H5 developers to focus more on business and application development. This reduces the number of interactions between developers on both ends, improves debugging and joint debugging efficiency, reduces error rates, and facilitates rapid problem location.

[0194] The above specific embodiments do not limit the scope of protection of the present invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions may occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention are intended to be included within the scope of protection of the present invention.

Claims

1. An interface mapping method, characterized in that: include: The native end receives the interface identifier transmitted by the web page end, obtains the interface information corresponding to the interface identifier and registers it to obtain the registered interface information; wherein the interface information includes the native class and method; the native end receives the interface identifier transmitted by the web page end, including: the native end analyzes the characteristics of all interfaces, determines the interface that can provide services externally, and generates an external interface record; transmits the external interface record to the web page end, and then receives the interface identifier fed back by the web page end; wherein the interface identifier is obtained by the web page end by comparing the external interface record with the interface record of the web page end; The registered interface information is transmitted to the web page end, so that the native classes and methods in the registered interface information are mapped to format objects and methods on the web page end, and an interface mapping relationship is established between the native end and the web page end; wherein, the web page end sets the interface code that needs to call the native end as blank, and updates the blank code after obtaining the mapped format object and method; in the interface mapping relationship, the classes and methods used by the web page end and the native end have the same name.

2. The method according to claim 1, characterized in that The native end receives the interface identifier transmitted by the web page end, obtains the interface information corresponding to the interface identifier and registers it, and obtains the registered interface information, including: During the process of loading the web page, the native end obtains the interface identifier in the web page and determines the interface corresponding to the interface identifier; Obtaining interface information of the interface and registering it to generate registration interface information corresponding to the identifier of the web page; Receive the initialization information transmitted by the web page, and obtain the registration interface information corresponding to the web page according to the identifier of the web page.

3. The method according to claim 1, characterized in that After determining the interface that can provide external services, the method further includes: Obtaining the interface information of the determined interface and registering it to obtain the registered interface information; The acquiring and registering the interface information corresponding to the interface identifier includes: acquiring the registered interface information corresponding to the interface identifier.

4. The method according to claim 1, wherein Mapping the native classes and methods in the registration interface information to format objects and methods on the web page includes: The web page converts the format of the native class and method through a predetermined conversion method to obtain the format object and method, and stores the format object and method in the interface execution code of the web page.

5. An interface mapping device, characterized in that: include: An information registration module is configured to receive, on the native side, an interface identifier transmitted by the web page side, obtain interface information corresponding to the interface identifier and register the interface information to obtain registered interface information; wherein the interface information includes native classes and methods; the native side receives the interface identifier transmitted by the web page side, including: the native side analyzes the characteristics of all interfaces, determines the interface that can provide external services, and generates an external interface record; transmits the external interface record to the web page side, and then receives the interface identifier fed back by the web page side; wherein the interface identifier is obtained by the web page side by comparing the external interface record with the interface record of the web page side; An information mapping module is used to transmit the registered interface information to the web page end, so as to map the native classes and methods in the registered interface information into format objects and methods on the web page end, and establish an interface mapping relationship between the native end and the web page end; wherein, the web page end sets the interface code that needs to call the native end as blank, and updates the blank code after obtaining the mapped format object and method; in the interface mapping relationship, the classes and methods used by the web page end and the native end have the same name.

6. The device according to claim 5, characterized in that The information registration module is used to: During the process of loading the web page, the native end obtains the interface identifier in the web page and determines the interface corresponding to the interface identifier; Obtaining interface information of the interface and registering it to generate registration interface information corresponding to the identifier of the web page; Receive the initialization information transmitted by the web page, and obtain the registration interface information corresponding to the web page according to the identifier of the web page.

7. The device according to claim 5, characterized in that The information registration module is further used to: Obtaining interface information of the determined interface and registering it to obtain registered interface information; and Acquire the registered interface information corresponding to the interface identifier.

8. The device according to claim 5, characterized in that The information mapping module is used to: The web page converts the format of the native class and method through a predetermined conversion method to obtain the format object and method, and stores the format object and method in the interface execution code of the web page.

9. An electronic device, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 4.

10. A computer-readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

Images