background
With the development of Web technology and the development of mobile Internet, Hybrid technology has become a mainstream technical solution for front-end development. So what is the Hybrid App?
Hybrid App (hybrid mode mobile application) refers to an app between web-app and native-app, which has both the advantages of "the advantages of good user interaction experience of Native App" and the advantages of cross-platform development of Web App.
In general, it has both the experience and performance of the APP, as well as the flexible development model of the Web and the cross-platform development capabilities.
Existing technical solutions
1. H5 + JSBridge, through JSBridge, the communication between H5 and Native is completed, giving H5 certain end capabilities. It is a WebView UI-based solution.
2. React-Native, further parse js into virtual DOM through JSbridge and pass it to Native, and render it using native.
3. The mini program solution adopts a dual-threaded rendering mechanism to form independent modules for the rendering layer WebView and the logic layer JavaScriptCore. Communication (setData) is performed through Native, and network requests of the logic layer will also be forwarded by Native. In terms of UI, the combination of WebView and native is adopted.
Technical Principles
This article will explain in detail the principles, implementation, two-way communication, access method and H5 embedding method of jsbridge.
The principle of jsbridge
The client can intercept requests in the WebView and has corresponding APIs:
Android:
// Android: shouldoverrideurlloading
public boolean shouldOverrideUrlLoading(WebView view, String url){
//After reading the url, it will be analyzed and processed by itself
//If false is returned, the WebView handles the link url. If true, it means that the WebView executes the url according to the program return true;
}
IOS:
// IOS: shouldStartLoadWithRequest
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSURL *url = [request URL];
NSString *requestString = [[request URL] absoluteString];
//Geturl schemeAfterwards, handle it yourself
Therefore, the corresponding capture function can be triggered by loading src on the page by iframe, and the parameters in the url can be parsed in the capture function; in addition, Android can also intercept the call to Prompt by rewriting the OnJSPrompt method, which can also achieve the purpose of communication.
Example:
To redirect the ios terminal:
function iosInvoke(scheme) {
var elem = ('iframe');
var body = || ('body')[0];
= 'none';
= scheme;
(elem);
setTimeout(function () {
(elem);
elem = null;
}, 0);
}
To redirect the Android terminal:
function androidInvoke(scheme) {
var androidJsBridge = window.Bdbox_android_jsbridge;
if (androidJsBridge && ) {
(scheme);
} else {
var re = ('BdboxApp:' + ({
obj: 'Bdbox_android_jsbridge',
func: 'dispatch',
args: [scheme]
}));
return re;
}
}
Protocol Development URL Scheme
What is URL Scheme
Since Apple's apps are all in sandboxes, they cannot access data from each other. But Apple still gave a method that can jump between apps: URL Scheme. Simply put, URL Scheme is a protocol that allows apps to jump to each other.
The URL Scheme of each app is different. If the same URL Scheme exists, the system will respond to the URL Scheme of the app that was installed first, because the URL Scheme of the later installed app is overwritten and cannot be called.
Set URL Scheme
xxxapp://communication?args=xx
How to conduct two-way communication
Bidirectional communication is mainly the two-way communication process of H5 and Native, as well as parameter transfer and callback execution.
H5 Notification Native:
The main ways to notify Native of H5 are:
- Call propt/console/alert, pass parameters when calling, and intercept and rewrite on the end
- URL Scheme jump intercept, put the parameters on the request URL
- API mount, obtain the js execution environment through Navtive, mount the corresponding API on js for h5 calls
Native Notification H5:
Callback mechanism, when passing information to Native, the callback function is also passed. After the call is completed, Native uses the js execution environment to execute the callback function.
Access method
jsbridge access, jsbridge on the side and jsbridge on the h5
Embed method
How to embed h5:
- Direct code, directly put the H5 code css, html, and js into the end directory, and access it in the file protocol. The advantage is that the access is fast, but the disadvantage is that iteration is inconvenient.
- Online addresses, accessed in http protocol, use webview to open URL form, compared to code embedding, the speed is relatively slow and depends on network transmission speed; the advantage is that iteration is fast
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.