In the mixed development of APP and H5, there are often such requirements:
1. An H5 page is nested in the APP. When sharing this page, you need to obtain some content information of the current H5 page;
2. The nested H5 page in the APP needs to obtain the user information of the current APP login user, or directly invoke a native application page in the APP;
Let's take a look at how to solve the above two requirements:
1. The APP calls the H5 method
H5 defines a JSBridge object, stores all the information needed for interaction in the JSBridge object, and the APP side obtains the corresponding data by obtaining the JSBridge object.
ios code:
Android code:
H5 code:
| type |
method |
parameter |
callback data |
Remark |
|
| JSBridge |
shareData() |
title |
share title |
Get shared data |
|
| desc |
share introduction |
||||
| imgUrl |
share block diagram |
||||
| url |
share path |
||||
2. H5 calls APP method
The app side defines an AppBridge object, and writes the method agreed with H5 in the object, and injects this object into the current webView for H5 to call.
iOS code:
Android code:
H5 code:
| type |
method |
parameter |
callback data |
Remark |
|
| AppBridge |
getAppToken() |
none |
code |
1000: success; 1001: error; |
Get login user token |
| token |
user token |
||||
| type |
method |
parameter |
callback data |
Remark |
||
| AppBridge |
jump(type, options) |
type |
Jump Type Encoding |
code |
1000: success; 1001: error; |
Jump to the application in the app |
| options |
Landing page required parameters |
|||||
Well, it turns out that the interaction between APP and H5 can be so simple.