H5 embedded native app

In fact, we can see from ios or Android that the reason why native apps can embed H5 is because the webview app has an embedded browser view, so that we can develop html and then load it into the app (the principle is almost the same as that of the pc. The request, loading and rendering are the same), generally when we develop h5, we can request to the native app in two ways, one is to put the html code on the server, the other is to put it in the current app project directory Local request (usually used for debugging).

Therefore, we can see that embedding is actually not difficult, but the difficulty lies in adapting, interacting with the web natively, data transmission, etc. Of course, we can also use vue to develop the H5 interface

1. How to realize the interaction?

The answer is to use a third-party plugin JsBridge

1. Forge requests through js -> Native interception to obtain data

 

2. Native app---->H5 interface

The principle is similar to jsonp. First define a function in js and mount it under the window, then call this function in native and pass the value

js part:

Native part:

 

A simple demo

html part:

Native part:

 

General WEB front-end engineers don’t know how to write ios and andirod, so can we directly use js to call the functions of the device, such as camera, QR code scanning, etc. In fact, it is possible to use the following third-party tools cordova and then cordova Plugins add corresponding plug-ins can call device functions in js

Cordova official documentation: https://cordova.apache.org/docs/en/latest/

Guess you like

Origin blog.csdn.net/weixin_41421227/article/details/90473865