What is JSBridge

JSBridge is a communication method between JS and Native, which is to define the communication between Native and JS. Native only calls JS through a fixed bridge object, and JS only calls through a fixed bridge object. Native.

This article will introduce frameworks such as Ionic and PhoneGap, which are known to anyone who has done hybrid development. These frameworks wrap a layer of Native on the basis of the web. Then call the local library through Bridge technology's js.

JSBridge: The name refers to the bridge between js and Native, but in fact JSBridge is indeed a communication method between JS and Native. Simply put, JSBridge defines the communication between Native and JS. Native only calls JS through a fixed bridge object, and JS only calls Native through a fixed bridge object. JSBridge is another name and the well-known Hybrid app technology.

Process: H5->Trigger a url in some way->Native captures the url, analyzes it->Native processing->Native calls H5's JSBridge object to pass the callback.

We have mentioned before that the native WebView/UIWebView control can already achieve data communication with Js, so why do we need JSBridge?

In fact, there are many considerations when using JSBridge:

Below Android 4.2, the addJavascriptInterface method has security leaks

Below iOS7, JS cannot be called Native

url scheme interaction method is an existing mature solution, which can be perfectly compatible with various versions and is compatible with previous old version technologies.

JSBridge technology implementation

To implement JSBridge, we need to analyze according to the following steps:

Step one: Design a Native and JS interaction Global bridge object

Step 2: How JS calls Native

Step 3: How Native knows that the api is called

Step 4: Analyze url-parameters and callbacks The format

Step 5: How Native calls JS

Step 6: Registration of the api method in H5 and the format

The complete process of JSBridge can be summarized as :

The above is the detailed content of What is JSBridge. For more information, please follow other related articles on the PHP Chinese website!