Detailed examples of interaction and intermodulation methods between WebView and JS in Android

Detailed examples of interaction and intermodulation methods between WebView and JS in Android

preface:

For the function of water test, generally, the company will adopt H5 to develop it, which can be completed with few resources and short project duration. However, in many cases, H5 pages need some data such as user information held natively, and some interactions also need to call native interactive behaviors such as toast to maintain the same mobile phone style. At this time, JS needs to be able to actively call native methods to operate or obtain data. Or the method of calling JS natively passes some parameters when H5 is loaded.

For methods that call JS natively

We need to implement a webviewclient to replace the JS method loading in this webviewclient

as

The initevaluationpage here must be consistent with the method name of JS

It is recommended to pass JSON format data as parameters.

Don't forget to allow WebView to execute JS code

Calling native methods with JS is a little more complicated

First, an interface needs to be defined locally, and the interface name needs to be consistent with that written in JS

For example, JS needs the user information saved by the client

The code in JS is like this

Then we also need to define a corresponding interface locally

The interface name is consistent with the method name

Instantiate this interface and return our user information in the instance method

Be careful not to forget the @ JavaScript interface annotation

Then add this interface method to WebView_ Note that the second parameter is the interface name, which should be consistent with that in JS.

In this way, we can return the data given in our instance when JS calls window. Jsuserinfointerface. Getuserinfo()

Similarly, we can execute directly without returning data. For example, play a native dialog.

It should be noted that there is no concept of mainline sub thread in JS. When JS makes a network request, WebView will open sub threads for it by default. You can understand the specific mechanism if you are interested. However, this means that you can't directly perform UI operations in the native methods dropped for JS. You can choose to send it to the main thread for execution.

For example, in the following code, I use rxjava to switch threads

last

A little advice

If there are many or a certain number of JS interactions in your project, it is recommended to write an interface with return value. It is then controlled by JSON parameters. An internal parsing protocol is developed to decide what to do according to the JSON data, so as to avoid a large number of defined interfaces and building too many instances to consume resources

Thank you for reading, hope to help you, thank you for your support to this site!