如何从您的网站创建一个简单的Android应用程序

This article will guide you on how to create an android app that is based on your website.

本文将指导您如何创建基于您的网站的android应用。

Let’s say that you have created the perfect website and now you want to create an app. You don’t want to start from scratch and recreate the UI and functionality. Wouldn’t it be great if you could base the app on your website so updates on the website also affect the app? Lucky for us there is a simple solution in Android based on the WebView component.

假设您已经创建了一个完美的网站，现在想创建一个应用程序。 您不想从头开始并重新创建UI和功能。 如果可以在您的网站上建立该应用程序，这样在网站上进行更新也会影响该应用程序，那不是很好吗？ 幸运的是，Android中有一个基于WebView组件的简单解决方案。

The WebView is basically a lightweight browser that we have full control over. For example, you can take over URL navigation and also implement your own JavaScript methods that can be called by the website. The later is useful to create an interface between the app and the website.

WebView基本上是我们可以完全控制的轻量级浏览器。 例如，您可以接管URL导航，还可以实现自己JavaScript方法，这些方法可以由网站调用。 后者对于在应用程序和网站之间创建界面很有用。

入门 (Getting started)

First off you need to create a android project and add the WebView component to your layout. If you only want the app to use the WebView, you can add it to the main activity.

首先，您需要创建一个android项目并将WebView组件添加到布局中。 如果仅希望应用程序使用WebView，则可以将其添加到主活动中。

To be able to connect to your website the app need internet access so add the following permission to your Manifest file.

为了能够连接到您的网站，该应用需要互联网访问权限，因此请将以下权限添加到您的清单文件中。

<uses-permission android:name="android.permission.INTERNET"/>

Now we can start configure the WebView. I will expect you to have added the WebView to your main activity.

现在我们可以开始配置WebView。 我希望您已将WebView添加到您的主要活动中。

public class MainActivity extends AppCompatActivity {
    WebView myWebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Context context = getApplicationContext();
        myWebView = (WebView) findViewById(R.id.webview);
        myWebView.addJavascriptInterface(new WebAppInterface(this), "AndroidInterface");
        myWebView.setWebViewClient(new WebViewClient() {
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                //Users will be notified in case there's an error (i.e. no internet connection)
                Toast.makeText(context, "Oh no! " + description, Toast.LENGTH_SHORT).show();
            }
        });
        myWebView.loadUrl("https://example.com");
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }
}        myWebView.setWebViewClient(new WebViewClient() {
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                //Users will be notified in case there's an error (i.e. no internet connection)
                Toast.makeText(context, "Oh no! " + description, Toast.LENGTH_SHORT).show();
            }
        });        myWebView.loadUrl("https://medical.rowland.io");
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }
}myWebView.addJavascriptInterface(new WebAppInterface(this), "AndroidInterface");

This adds a custom JavaScript interface that the webpage can call like below.

这将添加一个自定义JavaScript接口，网页可以如下调用。

AndroidInterface.someMethod(args);

The WebAppInterface class specify all methods available in our interface

WebAppInterface类指定接口中可用的所有方法

public class WebAppInterface {
    Context mContext;
    WebAppInterface(Context c) {
        mContext = c;
    }
    @JavascriptInterface
    public void setUserId(String userId) {
        DataStore.getInstance().userId = userId;
    }
}

For example here I have specified a method setUserId that can be called by the site when we have the userId. This can then be stored in a singelton class for later use in the app. This binds together app specific functions with the website.

例如，在这里我指定了setUserId方法，当我们拥有userId时，站点可以调用该方法。 然后可以将其存储在singelton类中，以供以后在应用程序中使用。 这将应用程序特定功能与网站绑定在一起。

myWebView.setWebViewClient(new WebViewClient() {
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                //Users will be notified in case there's an error (i.e. no internet connection)
                Toast.makeText(context, "Oh no! " + description, Toast.LENGTH_SHORT).show();
            }
});

The above creates a WebViewClient that is needed to actually run our website.

上面创建了实际运行我们的网站所需的WebViewClient。

myWebView.loadUrl("https://example.com");

This loads the start page in the app. So change this with your url. And please use https there is workarounds for http but I don’t recommend that.

这会将起始页面加载到应用程序中。 因此，请使用您的网址进行更改。 并请使用https，但http可以解决此问题，但我不建议这样做。

Next if the site needs to run any JavaScript you need to add these rows to enable it.

接下来，如果站点需要运行任何JavaScript，则需要添加这些行以启用它。

WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

We are almost done now. What’s left is to implement the go back functionality in the app. Add the following code in your MainActivity class.

现在我们差不多完成了。 剩下的就是在应用程序中实现返回功能。 在MainActivity类中添加以下代码。

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check if the key event was the Back button and if there's history
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack();
        return true;
    }
    // If it wasn't the Back key or there's no web page history, bubble up to the default
    // system behavior (probably exit the activity)
    return super.onKeyDown(keyCode, event);
}

Basically all this does is to listen for the Back key and then send a goBack navigation to the website.

基本上，所有这些操作都是侦听Back键，然后将goBack导航发送到网站。

Now you should have a functional app that will show your website. So now you can start implement app specific functionality with help of the JavaScript interface.

现在，您应该拥有一个可以显示您的网站的实用应用程序。 因此，现在您可以在JavaScript界面​​的帮助下开始实现特定于应用的功能。

翻译自: https://medium.com/swlh/how-to-create-a-simple-android-app-from-your-website-808823de695c