将HTML5网页封装到Android应用中的最简单方法是什么？ [英] Easiest way to encapsulate a HTML5 webpage into an android app?

问题描述

我们开发了一个基于Web的大型响应式HTML5数据可视化，可以很好地在PC和移动设备上运行。有一件事虽然有点烦人（在移动设备上），但事实上你总是会看到浏览器的某些部分，因此永远无法获得干净的全屏用户体验。

We have developed a large web-based, responsive HTML5 data visualization that works nicely on PCs as well as on mobile devices. There's one thing though that is a bit annoying (on mobile devices), which is the fact that you always see some parts of the browser and therefore never get a clean fullscreen user experience.

当然，我们不想丢弃基于平台的独立网站HTML5应用程序带来的好处，但我们仍然想为我们的客户提供额外的Android应用程序，其唯一目的是展示我们的全屏的Web应用程序，没有任何标题栏或菜单等。这与我们在浏览器中的Web应用程序一样功能和易于使用，但它将是一种抛光它的版本。我不是Android开发人员，但我看到很多Android应用程序基本上只是浏览器窗口的容器（webview？）。

We don't want to throw away the benefits of a platform-independant web-based HTML5 application, of course, but nevertheless we thought of offering an additional Android "app" to our customers, whose only purpose is to show our web application in fullscreen, without any title bars or menus etc. This would be just as functional and easy-to-work-with as our web app in a browser, but it would be a kind of polished version of it. I'm not an Android developer, but I see many many Android apps out there that are basically just a container for a browser window (webview?).

虽然很诱人看看android开发，我想知道是否有一个工具或某种生成器通过提供一个URL和一个图标来生成这样一个伪应用程序？这对我们的目的来说是完美的，完全足够的（也可能对其他人来说）。

Although it's tempting to take a look at android development, I wonder if there is a tool or some kind of generator that produces such a pseudo-app by just giving a URL and maybe an icon? That would be perfect and totally sufficient for our purpose (and probably for others, too).

更新：Danilo推荐PhoneGap，这很棒，但可能有点在我的情况下，我只需要显示一个无框浏览器窗口，而不需要在手机上运行带有节点应用程序的Web服务器。

Update: Danilo recommended PhoneGap, which is great, but it might be a little bit over the top in my case as I only need to show a frameless browser window and do not need to run a web server with a node app on the phone itself.

推荐答案

如何启动加载简单HTML页面的基本项目。

How to start a basic project that loads a simple HTML page.

如果你创建一个新的空活动的项目选择

首先，您需要定义布局。您需要向Activity_main.xml添加Webview布局

First you will need to define your layout. You need to add a Webview layout to your Activity_main.xml

Activity_main.xml位于res - > layout

Activity_main.xml is located under res -> layout

这是您的Webview布局：

This your Webview layout:

<WebView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/webView"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

父布局标签需要< RelativeLayout

您需要做的第二件事是在AndroidManifest.xml中定义您需要的权限

The second thing you need to do is to define what permissions you need you can do this in the AndroidManifest.xml

AndroidMainfest.xml位于清单

AndroidMainfest.xml is located under manifest

您需要添加此权限：

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

如果您忘记了这些权限，它会给您一个错误，因为他甚至无法找到该网页本地文件需要此权限。

If you forgot these permission it will give you an error because he can't find the webpage even its a local file this permission is needed.

webview的一个问题是，如果您旋转手机，您的活动将重新启动。这不是用户友好的，因此会将视图锁定为纵向。
所以我们需要做的是：

One problem with webview is that if you rotate your phone your activity will be restarted. That is not user-friendly so will lock the view to portrait. So what we need to do is this:

<activity android:name=".MainActivity"
        android:configChanges="orientation"
        android:screenOrientation="portrait">

所以你的AndroidManifest看起来像这样：

So your AndroidManifest will look something like this:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="YOUR_PACKAGE_NAME">
<uses-permission android:name="android.permission.INTERNET"/>
    <application
    android:allowBackup="false"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity android:name=".MainActivity"
        android:configChanges="orientation"
        android:screenOrientation="portrait">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />

            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <!-- ATTENTION: This data URL was auto-generated. We recommend that you use the HTTP scheme.
              TODO: Change the host or pathPrefix as necessary. -->
            <data
                android:host="[ENTER-YOUR-HTTP-HOST-HERE]"
                android:pathPrefix="/main"
                android:scheme="http" />
        </intent-filter>
    </activity>
    <meta-data
        android:name="com.google.android.gms.version"
        android:value="@integer/google_play_services_version" />
</application>

现在将添加java代码加入MainActivity以加载我们想要的网页：

Now will add the java code to the MainActivity to load the webpage we want:

MainActivity.java位于java - > [YOUR_PACKAGE_NAME]

MainActivity.java is located under java -> [YOUR_PACKAGE_NAME]

我们将定义我们班级的第一行：

The first line we will define our class:

public class MainActivity extends Activity

我们会写一些函数，第一个函数是创建webview。

There in will we write some functions, the first function is to create the webview.

我们声明了一个私有的var Webview。写少量代码。

We declare a private var Webview. To write less code.

private WebView view;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        view = (WebView) this.findViewById(R.id.webView);
        view.getSettings().setJavaScriptEnabled(true);
        view.getSettings().setAllowFileAccess(true);
        view.getSettings().setDomStorageEnabled(true);
        view.setWebViewClient(new MyBrowser() {});
        view.loadUrl("HERE_YOUR_LINK");
        view.setWebChromeClient(new WebChromeClient() {});
}

如果要加载本地文件，链接将如下所示：

If you want to load a local file the link will be something like this:

    view.loadUrl("file:///android_asset/www/index.html");

如果你想加载像google这样的网站，那就是：

If you want to load a website like google it will be:

    view.loadUrl("https://www.google.com/");

稍后我将说明您需要在哪里找到要加载的本地HTML文件。

Later on I will say where you need to locate your local HTML files that you want to load.

如果您的网站上有某些内容，例如链接 mailto：。它认为如果有人点击它会打开Gmail应用程序或其他电子邮件应用程序。您可以通过创建 OverrideUrlLoading 方法来实现。

If you have something on your site like a link mailto:. It think you would like if people click on that it will open the Gmail app or an other email app. You can do that by creating a OverrideUrlLoading methode.

    private class MyBrowser extends WebViewClient {
       @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url){
               if (url.startsWith("tel:") || url.startsWith("sms:") || url.startsWith("smsto:") || url.startsWith("mailto:") || url.startsWith("mms:") || url.startsWith("mmsto:") || url.startsWith("market:") || url.startsWith("https://youtu")){
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                startActivity(intent);
                return true;
            } else {
                view.loadUrl(url);
                return true;
            }
     }
}

就像你可以说我有还添加 url.startsWith（https：// youtu）。我个人是因为我发现它是用户友好的，你链接到Youtube视频，它将在Youtube应用程序中打开，因为人们可以全屏查看。

Like you can say I have also add url.startsWith("https://youtu"). I have personally because I find it user-friendly that you link to a Youtube video it will open in the Youtube app because people can then view it in full screen.

我们需要的唯一功能就是当人们点击他们的手机时会怎样做。

The only function we need is what do to if people click back on their phone.

public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && view.canGoBack()) {
            view.goBack(); //method goback()
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

您需要将这些行添加到build.gradle：

You need to add those lines to your build.gradle:

    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.google.gms:google-services:3.1.0'

所以它看起来像这样：

//here is so more code in the file
dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.google.gms:google-services:3.1.0'
    testCompile 'junit:junit:4.12'
}

apply plugin: 'com.google.gms.google-services'

如果你想加载本地文件一个网站也是可能的。
但是我需要在哪里放置它们？

If you want to load local files instead of a website that is also possible. But where do I need to place them?

你需要创建一个名为assets的地图。

You need to create a map called assets.

该地图的位置。在您的PC上转到您的文件浏览器
导航到：

Where will that map be located. Go to your file-explore on your PC navigate to this:

YOUR_PACKAGE_NAME - > app - > src - > main

YOUR_PACKAGE_NAME -> app -> src -> main

在该文件夹中，您将创建一个地图 assets 并在地图中 www 你会在那里粘贴文件

In that folder you will create a map assets and there in a map www there in you will paste your files

如果您有任何疑问，请回复

If you have any questions please respond

这篇关于将HTML5网页封装到Android应用中的最简单方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！