CN116414377A

CN116414377A - Interaction method of web page and native application, electronic equipment and storage medium

Info

Publication number: CN116414377A
Application number: CN202111639988.2A
Authority: CN
Inventors: 刘欣; 黄含泉
Original assignee: Midea Group Co Ltd; GD Midea Air Conditioning Equipment Co Ltd
Current assignee: Midea Group Co Ltd; GD Midea Air Conditioning Equipment Co Ltd
Priority date: 2021-12-29
Filing date: 2021-12-29
Publication date: 2023-07-11

Abstract

The application discloses an interaction method of a web page and a native application, electronic equipment and a computer storage medium. The interaction method of the web page and the native application comprises the following steps: creating a web container based on the web page configuration information when the web page is loaded; the web page loads a preset bridge file into a web container; the native application injects the native function into a preset bridge file; the web page adopts a method defined by a preset bridge file to call a native function; the native application performs adaptation processing on the native function called by the web page; the native application calls back the web page based on the adapted and processed native function. By the method, web pages developed by different technologies can be interacted with the native application in a unified interaction mode, so that code redundancy is reduced, maintenance is simplified, and cost is reduced.

Description

Interaction method of web page and native application, electronic equipment and storage medium

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a method for interacting a web page with a native application, an electronic device, and a computer storage medium.

Background

In the current environment, the hybrid development mode is a technical scheme adopted by most mobile applications (apps), and data interaction needs to be performed between different technologies related to the hybrid development mode, for example, hybrid development of h5 technology and weex technology.

In order to realize the hybrid development of the h5 technology and the weex technology, the service developed by the weex technology is provided with a set of independent modules and independent plug-ins, the service developed by the h5 technology is provided with another set of independent modules and independent plug-ins, the weex technology and the h5 technology call the modules and the plug-ins in different modes and different names, but the basic functions are the same, and the problems of code redundancy, easy error, difficult maintenance, higher cost and the like are caused.

Disclosure of Invention

The technical problem to be solved mainly by the application is to provide an interaction method and device for web pages and native applications and a computer storage medium, wherein web pages developed by different technologies are interacted with the native applications in a unified interaction mode, so that code redundancy is reduced, maintenance is simplified, and cost is reduced.

In order to solve the technical problems, one technical scheme adopted by the application is as follows: an interaction method of a web page and a native application is provided. The interaction method of the web page and the native application comprises the following steps: creating a web container based on the web page configuration information when the web page is loaded; the web page loads a preset bridge file into a web container; the native application injects the native function into a preset bridge file; the web page adopts a method defined by a preset bridge file to call a native function; the native application performs adaptation processing on the native function called by the web page; the native application calls back the web page based on the adapted and processed native function.

In order to solve the technical problems, one technical scheme adopted by the application is as follows: an electronic device is provided. The electronic device comprises a memory and a processor which are mutually coupled, wherein the processor is used for executing program data stored in the memory so as to realize the interaction method of any web page and the native application.

In order to solve the technical problems, one technical scheme adopted by the application is as follows: a computer storage medium is provided. The computer storage medium has stored thereon program data executable to implement a method of interaction of any of the web pages with a native application described above.

The beneficial effects of the embodiment of the application are that: before the web page calls the original function, the preset bridge file is loaded in the web container, and the original function is injected into the preset bridge file, so that the adaptation processing of the web page can be realized, and the web page developed by different technologies can call the original function by using the same set of calling methods; further, the native application adapts the native function called by the web page, so that the adaptation of the native function can be realized, and the web page developed by different technologies can use the same set of interfaces to call the native function; therefore, the web pages developed by different technologies can interact with the native application in a unified interaction mode, so that code redundancy can be reduced, maintenance is simplified, and cost is reduced.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are needed in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings can be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 is a flow diagram of one embodiment of a method of interacting a web page with a native application of the present application;

FIG. 2 is a schematic diagram showing a specific flow of step S14 in the embodiment of FIG. 1;

FIG. 3 is a schematic diagram showing a specific flow of step S15 in the embodiment of FIG. 1;

FIG. 4 is a schematic flow chart of step S15 in the embodiment of FIG. 1;

FIG. 5 is a schematic diagram showing a specific flow of step S15 in the embodiment of FIG. 1;

FIG. 6 is a schematic diagram showing a specific flow of step S14 in the embodiment of FIG. 1;

FIG. 7 is a flow diagram of one embodiment of a method of interacting a web page with a native application of the present application;

FIG. 8 is a flow diagram of one embodiment of a method of interacting a web page with a native application of the present application;

FIG. 9 is a flow diagram of one embodiment of a method of interacting a web page with a native application of the present application;

FIG. 10 is a schematic diagram of an embodiment of an electronic device of the present application;

FIG. 11 is a schematic diagram of an embodiment of a computer storage medium of the present application.

Detailed Description

The present application is described in further detail below with reference to the drawings and examples. It is specifically noted that the following examples are only for illustration of the present application, but do not limit the scope of the present application. Likewise, the following embodiments are only some, but not all, of the embodiments of the present application, and all other embodiments obtained by one of ordinary skill in the art without inventive effort are within the scope of the present application.

In the description of the embodiments of the present application, it should be noted that, unless explicitly specified and limited otherwise, the terms "connected," "connected," and "connected" are to be construed broadly, and may be, for example, fixedly connected, detachably connected, or integrally connected; can be mechanically or electrically connected; can be directly connected or indirectly connected through an intermediate medium. The specific meaning of the terms in the embodiments of the present application will be understood by those of ordinary skill in the art in a specific context.

In the examples herein, a first feature "on" or "under" a second feature may be either the first and second features in direct contact, or the first and second features in indirect contact via an intermediary, unless expressly stated and defined otherwise. Moreover, a first feature being "above," "over" and "on" a second feature may be a first feature being directly above or obliquely above the second feature, or simply indicating that the first feature is level higher than the second feature. The first feature being "under", "below" and "beneath" the second feature may be the first feature being directly under or obliquely below the second feature, or simply indicating that the first feature is less level than the second feature.

In the description of the present specification, a description referring to terms "one embodiment," "some embodiments," "examples," "specific examples," or "some examples," etc., means that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the embodiments of the present application. In this specification, schematic representations of the above terms are not necessarily directed to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Furthermore, the different embodiments or examples described in this specification and the features of the different embodiments or examples may be combined and combined by those skilled in the art without contradiction.

The application firstly proposes an interaction method of a web page and a native application, as shown in fig. 1, fig. 1 is a flow chart of an embodiment of the interaction method of the web page and the native application. The interaction method of the embodiment specifically comprises the following steps:

step S11: when a web page is loaded, a web container is created based on the web page configuration information.

When a web page is to be loaded, a web container, i.e., webview, is created. The web container reads the request address, letting the web program run.

When a web page is opened with webview, the native application registers two listening functions: a callnative module function (method) and a callEngineStartup function; the main function of the callEngineStartup function is to provide a time for injecting all modules and plugins (native functions) in a native manner, so that the modules and plugins can be prevented from calling a callNative or a callset-back entry function callJS before being successfully injected, i.e. the callset-back entry function callJS must be completed before all callNative functions and callJS functions are called.

The implementation of the two listening functions is different for different systems. For example, a window.MSNative.callEngineStartup function is called for an android system, and a window.webkit.message handers.callEngineStartup function is called for an iOS system; after the iOS system and the android system monitor the callEngineStartup function, all modules in the module manager are injected into all modules and plug-ins by calling the register modules function of the js method.

Step S12: the web page loads the preset bridge file into the web container.

After the web container is created, a preset bridge file is firstly loaded into the web container, and the preset bridge file is matched with task allocation such as module management/call/data processing, so that the consistency of the modes of calling the native web page developed by different technologies and the native callback information and the data hierarchy format is maintained.

The preset bridge file, jsbridge. Js file, is the js and native communication mechanism.

js is mainly to provide an interface for calling the native function for JavaScript, so that the front end part in hybrid development can conveniently use the function of the native function. While jsbridge is a bridge between native and non-native, its core is to build a channel of native and non-native messaging, and this channel of communication is bi-directional.

Step S13: the native application injects the native functions into the preset bridge file.

Optionally, the web page of the embodiment includes an h5 page and a weex page. The weex technology gives consideration to performance and dynamic performance, enables an developer to write out the performance experience of the original level through a simple h5 grammar, and supports multi-end cross-platform. The interaction of the weex page with the native application, not described in detail herein, may be referred to in the prior art.

After the h5 page loads the preset bridging file into the web container, the h5 page calls a primary injection time function; the native application monitors the native injection timing function, and calls the native function injection function to inject the native function into the preset bridge file.

Specifically, at the h5 end, that is, the web end developed by adopting the h5 technology, the jsbridge file, that is, the preset bridge file, is pre-packaged, and when the h5 page is loaded each time, the jsbridge file is injected into the h5 page in advance. In jsbridge.js file, a callback management object CallbackManager, a management object id instanceId, a previous callback function id lastCallbackId and a callback function callback are defined; the jsbridge. Js file also defines 4 functions that are directly related to native applications: the method comprises the steps of a native injection timing function callEngineStartup, a callback entry function callJS, a native call function callNative, a native function injection function register modules and the like.

The register modules function is mainly a method for injecting modules, all modules are stored in jsModule dictionary attributes of jsbridge.js files, dictionary keys are module names, and value is a module array; the callNative function is mainly h5, a native entry is called, parameters need to be transmitted with a module name, a method name, parameters and other options, a callbackmanager/add function is called inside, lastcallbackId is added by one, callbacks [ lastcallbackId ] assignment is completed, and finally a window/webkit/message handers/callNative module function is called by an android system call window.MSNative.callNativeModule, iOS; the callnative module is a method name for the native application to monitor in advance; the callJS function is mainly used for an entry of the native application call h5, a callback function in the jsbridge.js file is called internally according to a method in a parameter, the parameter must include a callback Id, and the generated lastcallback Id corresponds to the callback Id, so that the accuracy and the correctness of the data callback are completed.

The native application firstly transmits all the data information of the native functions to a web container, and the web container is only stored so as to prepare specific service call; and the web side calls a corresponding native function according to the specific service to acquire the native data to complete the logical rendering of the interface.

Step S14: the web page invokes the native function using a method defined by a preset bridge file.

When the web page performs specific service, that is, when the web page performs specific data interaction with the native application, the object created by the web page may use a method defined by a preset bridge file to call a specific native function required by the specific service, that is, a module and a method required by the specific service.

Alternatively, the present embodiment may implement step S14 by a method as shown in fig. 2. The method of the present embodiment includes step S21 and step S22.

Step S21: and h5, calling a native calling function by the object, and analyzing the module name/method name/parameter of the native calling function.

The web page obtains service requirements and determines required native functions based on the service requirements; the web page calls a native call function, and information such as a module name/a method name/a parameter corresponding to the required native function is transmitted through the native call function.

When the loading of the h5 page is completed and data interaction with the native application is needed, calling a registered callNative module function (consistent with the callNative function), calling [ BHBridgeManager callNativeModule:message.body bridge identifier ] and analyzing the message.body as a module name/method name/parameter, and calling [ BHBridgemanager_sharedManager ]. BridgeCtx callNativeModule: moduleName methodName:methodNages: arguments options: options bridgeIdentifier:bridge identifier ], wherein the final call is the code of the bhModuleMethod function for completing h5 calling the native function.

A code block is copied in the invoke function and is used for calling back the callJS function, the code block is mainly a [ BHBridgeManager callBackFuncId: callbackId params:result keepalive:keepalive ] method, and the bottom layer of the method is the logic of calling the callJS function of the h5 page by the native application.

Wherein the invoke function is a target method for executing a certain object; the BHBridgeMethod bridging method type has 4 attributes: bridge id bridgeIdentifier, method name, module name, parameter array parameters; BHModuleMethod inherits from BHBridgeMethod and is a method bridging type specially used for calling native application to h5 page; BHCallJSmethod inherits from BHBridgemethod and is a method bridging type specially used for calling h5 pages for native applications; BHSDKInstance is a browser object entity, and corresponds to a web container one by one, one web container corresponds to one BHSDKInstance, and the attribute of the browser entity object comprises: instanceId (entity object id), view controller, webview, userInfo, baseplug in; the method for the browser entity object comprises the following steps: a nonBasePluginForProtocol (acquire non-basic plug-in object) and a moduleObjectForModuleName (acquire Module object); attributes of the entity object of the BHBaseModuleInstance type include: viewController, rootView (root view), instanceId, userInfo, basePlugins, attachedModuleInstance (add-in module instance), url (web address), the method of the entity object includes: noneBasePluginForprotocol for decoupling WXSDK instance of weex.

After the web page creates an object, i.e., a browser entity object, the object is bound to the web container.

Step S22: the h5 object invokes corresponding native functions in the web container based on the module name/method name/parameter.

The preset bridge file is used for realizing the same calling mode for calling the original function of the web pages developed by different technologies; further, in order to realize web pages developed by different technologies, the embodiment can share a set of interface APIs called by native functions, and create a preset protocol, namely a base protocol, including web container information, plug-in information, module information, and the like); the native functions include modules and plug-ins.

When the web side opens the h5 page using webview, the BHBaseWebController function creates a base object bhsdkinson, including a plug-in base object and a module base object, both of which adhere to the base protocol BaseModuleProtocol, which internally defines a queue targetexekueue attribute, a thread targetexekutatethread attribute, a module base object moduleInstance and a plug-in base object plugin instance, both of which are BHBaseModuleInstance types, which can accomplish decoupling of the wxsdk instance types, and is a core that a module or plug-in can share in the web page and the h5 page, mainly with the following attributes (see above): viewController, rootView, object id instanceId, userInfo, basePlugins, attachedModuleInstance, url.

Step S15: the native application performs adaptation processing on the native functions called by the web page.

The steps realize the calling mode of calling the original functions of the web pages developed by different technologies, and further need to realize the web pages developed by different technologies, and share one set of interfaces for calling the original functions, so that the web pages developed by different technologies can realize the calling of the original module methods and plug-ins through the same set of interfaces.

The web page of the present embodiment further includes a weex page, and the present embodiment may implement step S15 by a method as shown in fig. 3. The method of the present embodiment includes steps S31 to S33.

Step S31: the native application obtains the module name of the weex page incoming.

The native application obtains the module name of the weex object of the weex page.

Step S32: the native application obtains a plug-in object and a module object corresponding to the module name.

And obtaining a plug-in object and a module object of the weex object corresponding to the incoming module name.

Step S33: the native application converts module objects into module base objects and plug-in objects into plug-in base objects.

The module basic object and the plug-in basic object are defined in the preset protocol.

The native application converts the weex object into a basic object, and a module and a plug-in corresponding to the basic object can be called by h 5.

The weix framework depends on the property that is a WXSDKInstance object and does not support h5, so the necessary property values corresponding to the WXSDKInstance object must be translated into a BHBaseModuleInstance object.

Specifically, creating classification of WXSDK instance and BHBaseWeex in a service layer, realizing a moduleForclass function and an init function, injecting a basic plug-in array of a BHPluginManager single-instance manager in a BHJSBridge component in the init function in advance, and providing a nonBasePluginForProtocol function for a non-basic plug-in to dynamically acquire a non-basic plug-in object managed by the BHPluginManager; the moduleForclass function is mainly used for acquiring a module object according to the module name of the imported weex object, if the module object exists, the module object is directly taken out of a memory, if the module object does not exist, the module eForclass function is called for acquiring, and the related attribute value of the attribute moduleInstance of the weex object is dynamically set according to whether the module complies with a basic protocol BHBaseModuleProtococol and whether the attribute moduleInstance exists or not: viewcontroller=wxsdkinstance.viewcontroller, rootview=wxsdkinstance.rootview, insteid=wxsdkinstance.insteid, userinfo=wxsdkinstance.userinfo, baseplug= WXSDKInstance.registedWeexCommonPlugins, attachedModuleInstance =moduleinstance, url=wxsdkinstance.script url.

When a moduleForclass function is called, a BHBaseModuleInstance object is created, when basePlugins are set, all plug-in objects are circulated in a setting method, for a plug-in which complies with a base protocol BHBaseModuleProtococol, an attribute plugin instance is dynamically set as a current BHBaseModuleInstance object, and when a nonaneBasePluginForProtococol is called to obtain a non-base plug-in, if the non-base plug-in complies with the base protocol BHBaseModuleProtococol, setting of the attribute plugin instance of the plug-in object is also dynamically completed; in the manner, the weex object can be converted into a basic object for h5 pages.

The present embodiment can implement step S15 by the method as shown in fig. 4. The method of the present embodiment includes steps S41 to S43.

Step S41: the native application obtains the module name of the h5 page which is transferred by calling the native calling function.

Step S42: the native application acquires a plug-in object and a module object of the h5 page corresponding to the module name.

Step S43: the native application converts module objects into module base objects and plug-in objects into plug-in base objects.

Specifically, when a native function is called on the h5 page to generate a BHModuleMethod object and call an invoke function, obtaining a module object internally according to a ModuObjectForModuleName of the BHSDKINSTAN object, if the module object complies with a basic protocol BHBaseModuleProtococol, setting an attribute ModueInstance of the module object, setting a setter method of BasePlugins in the attribute ModuEInstance, and setting an attribute plugin Instance of a plugin object of the module object; for the non-basic plug-in, the setting of the attribute plugin instance of the non-basic plug-in is completed in the non-base plugin ForProtocol method; through the mode, the native module object and the plug-in object called by the h5 object can be converted into the basic object and accord with the basic protocol BHBaseModuleProtococol, so that the BHJSbridge component shares a set of modules and plug-ins.

Step S16: the native application calls back the web page based on the adapted and processed native function.

Interaction between the web page and the native application is mainly realized through a callJS function and a callNative function.

Specifically, the native application invokes the callJS function based on the binding relationship of the h5 object and the web container, so that the native application calls back the code in the preset bridge file in the web container corresponding to the h5 object.

The native application invokes the callJS function: firstly, calling a callback function Id of a BHBridgManager, namely, a params keyAlive method, assembling a BHCallJSmethod object, wherein the name of an incoming module of a callJS function is fixed as jsBridge, the name of the method is fixed as callback, callback Id, parameters args and bridging bridgeIdentier; the callback is a callback function of a uniformly defined native callback h5 in a preset bridge file; the callbackId is a funcId (identification of service function) for identifying the callback of the h5 specific service requirement, the funcId is in one-to-one correspondence (the binding) with callback logic is made in a preset bridge file, and the bridgeIdentifier is a callback for identifying which web container entity object is; then, calling the execu js method of the BHBridgeContext, recursively executing callback tasks (codes in a preset bridge file corresponding to the func id), and calling the calljs method for the BHSDKInstance object conforming to the BHBridgeProtocol by the executing caller to call the calljs methods: args, and finally calling the evaluateJavaScript: completionHandler of the web container.

When the service end opens the h5 page, the BHBaseWebController creates a BHSDKINSTAN object and binds with the web containers one by one, and obtains the addresses of the web containers as the instanceId of the BHSDKINSTAN object, the BHBridgeManager finishes registering the BHSDKINSTAN object, the corresponding BHSDKINSTAN object can be obtained from the BHBridgeManager by transmitting the instanceId to the BHBridgman during subsequent data interaction, js codes of the correct web containers are called, the instanceId is transmitted downwards layer by layer from the UI controller to the jsbridge, and the accuracy and the correctness of the callNative and the callJS are ensured, and the accuracy and the effectiveness of the BHBridgman can be ensured even when a plurality of web containers are loaded simultaneously.

Compared with the prior art, the method and the device have the advantages that before the web page calls the original function, the preset bridge file is loaded in the web container, and the original function is injected into the preset bridge file, so that the adaptation processing of the web page can be realized, and the web page developed by different technologies can use the same set of calling method to call the original function; further, the native application adapts the native function called by the web page, so that the adaptation of the native function can be realized, and the web page developed by different technologies can use the same set of interfaces to call the native function; therefore, the web pages developed by different technologies can interact with the native application in a unified interaction mode, so that code redundancy can be reduced, maintenance is simplified, and cost is reduced.

In order to achieve the above technical effects, the embodiment needs to make 2 adaptations: firstly, adapting a native module and a plug-in, namely firstly, developing an h5 component, defining a base protocol, and then modifying the corresponding module and plug-in to meet the simultaneous call of an h5 page and a weex page; secondly, aiming at a pure h5 page, a jsbridge.js file is added to ensure that the calling mode is unchanged, and the adaptation of the h5 page is performed. Note that the weex page and the h5 page are intersected, and the syntax of the h5 page contains the weex page, and the h5 page is more extensive.

The interaction method of the above embodiment is used for iOS systems.

In other embodiments, the interaction method of the present application may also be used in an android system, and the specific implementation method of the interaction method has a certain difference from the above embodiment, and specifically includes:

interaction of native applications with h5 pages two methods are defined using javascript interface. One is for the h5 page registration module to determine which modules the web container supports; in this method, the module name in the parameter is traversed from the registered module in the h5 management module class, and then the module is registered in the h5 mapping file supported by the web container; if the parameter is empty, no module is registered. The other method is used for the method for calling a certain module by the h5 page, and the method parameters comprise a module name, a method name and a callback function id. When the h5 page calls the method, a corresponding module is obtained from an h5 mapping file supported by the web container through a module name, then the corresponding interface method in the module is called through the method name and parameter reflection, after the execution is finished, the method is returned to the h5 page, and the h5 page determines the callback method through a callback function id callback Id.

Under the android system, the bridge file defines a base class of a proxy class, the base class defines an interface class for sending message notification and an implementation class for injecting the interface class, and the interface method of the interface class is a global event calling function fireGlobalEventCallBack.

The present embodiment can implement step S15 by the method as shown in fig. 5. The method of the present embodiment includes steps S51 to S56.

Step S51: and creating a base class of the proxy module class, wherein the base class defines an interface class for sending message notification and an implementation class for injecting the interface class, and the interface method of the interface class is a global event calling function.

Step S52: the native application obtains the module name of the h5 page which is transferred by calling the native calling function.

Step S53: the native application obtains a module corresponding to the module name, wherein the module inherits a corresponding proxy module class.

Step S54: the native application injects the implementation class into the module to call the global event calling function of the interface class.

In order to use the h5 object to have the same messaging capability as the weex object, the function fireGlobalEventCallback function needs to be called for the h5 adaptation total event. The embodiment creates a base class of all proxy module classes, the base class realizes an interface class for sending message notification, and the interface method is a fireGlobalEventCallback function; one member variable of the base class is the interface class that the messaging notifies; the realization of the base class fireGlobalEventCallback function is that the fireGlobalEventCallback function of the interface class of the messaging notification is called; the accumulation further provides an implementation class that injects the messaging interface class.

The corresponding module of the h5 page directly inherits the corresponding proxy module class, and the realization class of the interface class for sending the message notification is injected into the module.

Optionally, the present embodiment further includes step S55 and step S56.

Step S55: a common interface class is created.

Step S56: and h5, the object realizes the common interface class by using the callback class of the module.

To achieve complete decoupling of the h5 object from the weex object, i.e., the h5 object cannot rely on the weex sdk (plug-in), i.e., the callback class JSCallback in the weex sdk cannot be used. In the embodiment, a common interface class of the IJSCallBack is created, the common interface class is realized by the callback class H5JSCallBack of the H5 object, the interface method specifically calls an evaluateJavascript function of the webView, and the execution result is returned to the H5 object.

Further, the web page of the embodiment further includes a weex page, the WeexJSCallback of the weex page implements the common interface class, and in the interface method, specifically, an invoke method of the JSCallback is called, and the execution result is called back to the weex object.

The method in the module is the same as the method in the corresponding proxy module class, except that the callback parameter class is different; the realization of each method is that the method corresponding to the proxy module class is called through the member variable of the proxy module class, and JSCallBack in parameters is required to be converted into IJSCallBack; implementation classes of the messaging interface class are injected in the module.

The embodiment realizes that the weex page and the h5 page use the same set of proxy module class, so that only the proxy module class needs to be maintained.

The h5 page can support methods that do not require proxy to implement method calls, and can also use proxy methods to implement method calls.

Based on the android system, step S14 may be implemented by the method as shown in fig. 6. The method of the present embodiment includes step S61 and step S62.

Step S61: the h5 page calls the original calling function, and the module class corresponding to the module name of the original calling function is searched in the h5 mapping file.

Step S62: in response to the module class being un-instantiated, the module class is instantiated and saved.

Further, based on the android system, the native application can utilize the common interface class to reflect and call according to the method name and the parameters of the module class, and call back the execution result of the interface method of the common interface class to the page h5 page, so that the native application calls back the h5 page based on the adapted native function.

The application further proposes another embodiment of a method for interaction between a web page and a native application, for an iOS system, as shown in fig. 7, where the native function includes a module and a plug-in, and the method of this embodiment specifically includes the following steps:

Step S71: in response to the native application launch, the native application registers the module and plug-in.

When a native application (app) is started, a register module function and a register PluginProtocol function/a register BaseProtocol function of the BHSDKEngine are called in an appDelegate method application, i.e. didFinishLaunchingWithOptions, and a module and a plugin are respectively registered; the register module of the weex page is a register module function of the WXSDKEngine, the weex page does not register an api of a plug-in, when the plug-in is called, the plug-in is transferred and called through a module entry, unified plug-in management does not exist, and the management of the registration, unbinding, calling and the like of the plug-in of the embodiment is managed through a BHPluginManager single-instance manager, and the BHModulefunction manages all modules and method objects thereof.

Step S72: when a web page is loaded by a native application, the web page creates a web container based on the web page configuration information.

Step S73: the web page loads the preset bridge file into the web container.

Step S74: the native application injects the native functions into the preset bridge file.

Step S75: the web page invokes the native function using a method defined by a preset bridge file.

Step S76: the native application performs adaptation processing on the native functions called by the web page.

Step S77: the native application calls back the web page based on the adapted and processed native function.

The specific flowchart of this embodiment may refer to fig. 8 and the above embodiments, which are not repeated here.

In another embodiment, as shown in fig. 9, the interaction method between the web page and the native application in the embodiment is used for the android system, the web page includes a h5 page and a weex page, the native function includes a native interface component, and the interaction method in the embodiment specifically includes the following steps:

step S91: in response to the native application launching, the native application registers all module classes within the native interface component into a native mapping file.

Step S92: the native application registers the module class that is registered in the native interface component and supports the weex page into the weex map file.

Step S93: the native application registers the module class that is registered in the native interface component and supports the h5 page into the h5 mapping file.

When the native application is started, firstly, loading an initialization method of a native interface component, wherein Class objects of all module classes are registered in a native mapping file; however, loading a method for initializing a weex module, wherein the method registers a registered module class supporting weex in a native interface component into a weex mapping file; and then loading an initialization method of the h5 module, wherein the method registers the registered module class supporting h5 in the native interface component into the h5 mapping file.

Step S94: when a web page is loaded by a native application, the web page creates a web container based on the web page configuration information.

Step S95: the web page loads the preset bridge file into the web container.

Step S96: the native application injects the native functions into the preset bridge file.

Step S97: the web page invokes the native function using a method defined by a preset bridge file.

Step S98: the native application performs adaptation processing on the native functions called by the web page.

Step S99: the native application calls back the web page based on the adapted native function

The implementation manner of step S94 to step S99 may refer to the above embodiment, and is not repeated here.

The application further provides an electronic device, as shown in fig. 10, and fig. 10 is a schematic structural diagram of an embodiment of the electronic device. The electronic device 100 of the present embodiment includes a processor 101, a memory 102 coupled to the processor 101, an input output device 103, and a bus 104.

The processor 101, the memory 102, and the input/output device 103 are respectively connected to the bus 104, where the memory 102 stores program data, and the processor 101 is configured to execute the program data to implement the interaction method between the web page and the native application.

The controller in the above-described embodiments may be integrated within the processor 101.

In the present embodiment, the processor 101 may also be referred to as a CPU (Central Processing Unit ). The processor 101 may be an integrated circuit chip with signal processing capabilities. Processor 101 may also be a general purpose processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other programmable logic device, discrete gate or transistor logic, discrete hardware components. A general purpose processor may be a microprocessor or the processor 101 may be any conventional processor or the like.

The present application further proposes a computer readable storage medium, as shown in fig. 11, where the computer readable storage medium 160 of the present embodiment is configured to store the program data 161 of the foregoing embodiment, and the program data 161 can be executed to implement the interaction method of the web page and the native application. The program data 161 are described in detail in the above method embodiments, and are not described here again.

The computer readable storage medium 160 of the present embodiment may be, but is not limited to, a usb disk, an SD card, a PD optical drive, a mobile hard disk, a high capacity floppy drive, a flash memory, a multimedia memory card, a server, etc.

In addition, the above-described functions, if implemented in the form of software functions and sold or used as a separate product, may be stored in a mobile terminal-readable storage medium, that is, the present application also provides a storage device storing program data that can be executed to implement the method of the above-described embodiment, the storage device may be, for example, a U-disk, an optical disk, a server, or the like. That is, the present application may be embodied in a software product that includes instructions for causing a smart terminal to perform all or part of the steps of the methods described in the various embodiments.

Furthermore, the terms "first," "second," and the like, are used for descriptive purposes only and are not to be construed as indicating or implying a relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defining "a first" or "a second" may explicitly or implicitly include at least one such feature. In the description of the present application, the meaning of "plurality" is at least two, such as two, three, etc., unless explicitly defined otherwise.

Any process or method descriptions in flow charts or otherwise described herein may be understood as representing mechanisms, segments, or portions of code which include one or more executable instructions for implementing specific logical functions or steps of the process, and further implementations are included within the scope of the preferred embodiment of the present application in which functions may be executed out of order from that shown or discussed, including substantially concurrently or in reverse order, depending on the functionality involved, as would be understood by those reasonably skilled in the art of the embodiments of the present application.

Logic and/or steps represented in the flowcharts or otherwise described herein, e.g., may be considered as a ordered listing of executable instructions for implementing logical functions, can be embodied in any computer-readable medium for use by or in connection with an instruction execution system, apparatus, or device (which can be a personal computer, server, network device, or other system that can fetch the instructions from the instruction execution system, apparatus, or device and execute the instructions). For the purposes of this description, a "computer-readable medium" can be any means that can contain, store, communicate, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device. More specific examples (a non-exhaustive list) of the computer-readable medium would include the following: an electrical connection (electronic device) having one or more wires, a portable computer diskette (magnetic device), a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disc read-only memory (CDROM). In addition, the computer readable medium may even be paper or other suitable medium on which the program is printed, as the program may be electronically captured, via, for instance, optical scanning of the paper or other medium, then compiled, interpreted or otherwise processed in a suitable manner, if necessary, and then stored in a computer memory.

The foregoing description is only of embodiments of the present application, and is not intended to limit the scope of the patent application, and all equivalent mechanisms or equivalent process changes made by the specification and the drawings of the present application, or direct or indirect application in other related technical fields, are equally included in the scope of the patent protection of the present application.

Claims

1. A method of interacting a web page with a native application, comprising:

creating a web container based on the web page configuration information when the web page is loaded;

the web page loads a preset bridging file into the web container;

the native application injects a native function into the preset bridge file;

the web page adopts a method defined by the preset bridging file to call the original function;

the native application performs adaptation processing on the native function called by the web page;

and the native application calls back the web page based on the adapted and processed native function.

2. The interaction method of claim 1, wherein after the web container is created based on the web page configuration information, the interaction method further comprises:

the web page creates an object and binds the object with the web container.

3. The interaction method according to claim 1, wherein the web page comprises an h5 page, and the preset bridge file defines a callback function, a native injection timing function, a native calling function and a native function injection function; the native application injecting native functions into the preset bridge file, including:

after the loading of the preset bridge file is completed, the h5 page calls the primary injection time function;

and the native application monitors the native injection timing function, and calls the native function injection function to inject the native function into the preset bridge file.

4. An interaction method according to claim 3, wherein the interaction method is used in an iOS system, and the web page invokes the native function using the method defined by the preset bridge file, comprising:

the h5 object calls the original calling function and analyzes the module name/method name/parameter of the original calling function;

the h5 object invokes the corresponding native function in the web container based on the module name/the method name/the parameter;

the native application callback the web page based on the adapted native function comprises:

The native application invokes the callback function based on the binding relationship between the h5 object and the web container.

5. The interaction method according to claim 4, wherein the native function comprises a module and a plug-in, and the adapting by the native application the native function called by the web page comprises:

the native application acquires the module name transmitted by the h5 page calling the native calling function;

the native application acquires a plug-in object and a module object of the h5 page corresponding to the module name;

the native application converts the module object into a module base object and converts the plug-in object into a plug-in base object; the module basic object and the plug-in basic object are defined in a preset protocol.

6. An interaction method as claimed in claim 3, wherein the interaction method is used in an iOS system, the web page further comprises a weex page, and the native application performs adaptation processing on the native function called by the web page, and the method comprises:

the native application obtains the module name transmitted by the weex page;

the native application acquires the plug-in object corresponding to the module name and the module object;

7. An interaction method according to claim 3, wherein the interaction method is used for an android system, and the adapting of the native function called by the web page by the native application comprises:

creating a base class of a proxy module class, wherein the base class defines an interface class for sending a message notification and an implementation class for injecting the interface class, and an interface method of the interface class is a global event calling function;

the native application acquires a module corresponding to the module name, wherein the module inherits the corresponding proxy module class;

the native application injects the implementation class into the module to call the global event call function of the interface class.

8. The interaction method of claim 7, wherein the native application adapts the native function invoked by the web page, further comprising:

Creating a common interface class;

and the h5 object realizes the common interface class by using the callback class of the module.

9. The interaction method of claim 7, wherein the web page invokes the native function using the method defined by the preset bridge file, comprising:

the h5 page calls the calling original function, and a module class corresponding to the module name of the original calling function is searched in an h5 mapping file;

in response to the module class being un-instantiated, instantiating and saving the module class;

the native application uses the common interface class to reflect calling according to the method name and the parameter of the module class;

and the native application returns the execution result of the common interface class to the h5 page.

10. The method of interaction of a web page with a native application according to claim 1, wherein the method of interaction is for an iOS system, the native functionality comprising a module and a plug-in, the method of interaction further comprising, before the web page creates a web container based on web page configuration information when the web page is loaded by a native application:

In response to the native application launching, the native application registers the module and the plug-in.

11. The method of interaction of a web page with a native application according to claim 1, wherein the method of interaction is for an android system, the web page comprises a h5 page and a weex page, the native function comprises a native interface component, and before the web page is loaded by the native application, the method of interaction further comprises, before the web page creates a web container based on the web page configuration information:

in response to the native application launching, the native application registers all module classes within the native interface component into a native mapping file;

the native application registers the module class which is registered in the native interface component and supports the weex page into a weex mapping file;

the native application registers module classes registered in the native interface component and supporting the h5 page in an h5 mapping file.

12. An electronic device comprising a memory and a processor coupled to each other, the processor configured to execute program data stored in the memory to implement the method of interaction of a web page with a native application of any one of claims 1 to 11.

13. A computer storage medium having stored thereon program data executable to implement the method of interaction of a web page with a native application of any of claims 1 to 11.