Mobile application development patterns

There are currently three mobile application development models:

  • Native App: Native application (native App)
  • Web App: Web applications (mobile Web)
  • Hybrid App: Hybrid apps (hybrid apps)

Nowadays, more and more apps adopt Hybrid app development mode, which has both excellent user experience of native app and cross-platform advantages of Web app. And its core is the use of WebView control load URL, next I summarized the introduction and use of WebView.

The concept of the webview

I have seen some written about Hybrid apps from the perspective of app developers, but I have not yet understood Hybrid apps from the front end.

Webview Is the view component used to display web pages, which is the basis for running your own browser or displaying online content in your thread. Use webKit rendering engine to display, and support forward and backward based on browsing history, zoom in and out, and much more.

To put it simply, WebView is a component packaged in SDK with a high-performance WebKit kernel browser built into the mobile phone. However, there is no address bar and navigation bar, just a simple display of a web interface.

The above paragraph is said by an APP developer, and standing in the perspective of a front-end developer, after using the feeling is:

A WebView is simply an IFrame on a page. The interaction between native APP and WebView can simply be regarded as the interaction between the page and the iframe page within the page. Just as a page shares a window with its in-page iframe, native and WebView share a set of native methods.

Native APP and WebView interaction

In the project, there may be situations where the native and webview belong to two different groups for development. For example, one app separates the business, and the native part of the business is developed by the native APP developer, while the business in the WebView is developed by the front-end developer. In this case, the native developer and the front-end developer need to unify the interaction mode. The front end needs to tell the app which methods to call, and the app needs to tell the front end what methods and data the app provides to the front end.

Native apps can be divided into Android and ios apps. The native writing method is different. The development language and framework of these two apps are different, so their interaction with WebView is different.

Event interaction between Android and WebView

The event interaction between Android and WebView is actually the JS event interaction between Android and WebView. Their event interaction is divided into Android calling JS event and JS calling Android event.

Blog post -Android: All the WebView and JS interactions you need are here
android

The project I contacted used the two methods in the picture 1. As a front-end developer, js only needs to call the method in the mapping object provided by Android and declare a method to be called by app, which is very simple.

Event interaction between ios and webView

There are two kinds of ios WebView: UIWebView and WKWebView. Different types of WebView interact with ios in different ways:

1. Intercepting urls (for UIWebView and WKWebView, only for simple calls if you want to pass parameters, although you can concatenate urls as well, such as jxAction ://scan? Method =aaa, but we need to split the string and parse the information ourselves.

JavaScriptCore (only for UIWebView, iOS7+)

3.WKScriptMessageHandler (WKWebView, iOS8+ only)

4. WebViewJavascriptBridge (applicable to UIWebView and WKWebView, belongs to the third party framework)

There are good demos for each of these four methods, and you can choose according to your needs.

JavaScriptCore is used in the project I contacted, probably because using this method to write and call methods in JS is relatively simple and convenient.

Native data interaction with webView

This is the interaction of events. What about the interaction of data?

In the process of use, there are two ways of data interaction:

  1. webviewThe incomingurlData carried in
  2. inwebviewCall the method specified in the natively supplied mapping object.webviewYou can also use this method to pass data to native apps as parameters.

Note: The first method of ios does not support passing references to native

The attribute of the webview

Just like HTML tags have their own attributes, webViews have their own attributes.

Android and ios webViews are different. Ios officially provides UIwebview (deprecated) and WKwebview properties. The Android documentation also provides webView-related interfaces.

RN’s WebView component provides a wealth of properties and methods. Since webView is compared to iframe, let’s take an example: SRC like iframe has corresponding source in webView. Of course, WebView properties in RN are much richer.

Weex also has webView, but it is not used as a component, but as a module that controls the < Web /> component. The official demo feels pretty good.

And finally, the last super simple example of an RN official WebView

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}} / >); }}Copy the code

Learn about a wave of WebView, feel as a front-end can also write their own app, with H5 write :yum: