将 HTML5 网页封装到 android 应用程序中的最简单方法?

Easiest way to encapsulate a HTML5 webpage into an android app?

我们开发了一个大型 web-based、响应式 HTML5 数据可视化,可以在 PC 和移动设备上很好地工作。有一件事(在移动设备上)有点烦人,那就是您总是看到浏览器的某些部分,因此永远不会获得干净的全屏用户体验。

当然,我们不想放弃 platform-independant web-based HTML5 应用程序的好处,但我们还是考虑提供额外的 Android "app" 给我们的客户,他们的唯一目的是全屏显示我们的 Web 应用程序,没有任何标题栏或菜单等。这与我们在浏览器中的 Web 应用程序一样功能和 easy-to-work-with,但是这将是它的一种 抛光 版本。我不是 Android 开发人员,但我看到很多 Android 应用基本上只是浏览器的容器 window(webview?)。

虽然很想看看 android 开发,但我想知道是否有一种工具或某种 生成器 可以产生这样的 pseudo-app 只是给一个 URL 和一个图标?这将是完美的,完全足以满足我们的目的(可能也适用于其他目的)。

更新:Danilo 推荐了 PhoneGap,它很棒,但对我来说可能有点过头了,因为我只需要 显示 无框架浏览器 window 并且不需要 运行 在 phone 本身上带有节点应用程序的 Web 服务器。

我建议你检查一些现有的基于 webview 的框架,例如:

Adobe Phonegap

它将帮助您生成兼容不同设备和平台(包括iOS)的应用程序。您可以轻松地在线找到文档,例如,使其全屏显示。

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

如果新建项目选择空Activity

首先您需要定义布局。您需要向 Activity_main.xml

添加 Webview 布局

Activity_main.xml 位于 res -> layout

这是您的 Webview 布局:

<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

AndroidMainfest.xml 位于清单

您需要添加此权限:

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

如果你忘记了这些权限,它会给你一个错误,因为他找不到网页,即使是本地文件,也需要这个权限。

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

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

因此您的 AndroidManifest 将如下所示:

<?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以加载我们想要的网页:

MainActivity.java 位于 java -> [YOUR_PACKAGE_NAME][=28 下=]

第一行我们将定义我们的 class:

public class MainActivity extends Activity

里面会写一些函数,第一个函数是创建webview。

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

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() {});
}

如果要加载本地文件,link 将是这样的:

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

如果你想加载像 google 这样的网站,它将是:

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

稍后我会说你需要在哪里找到你想要加载的本地 HTML 文件。

如果您的网站上有类似 link mailto: 的内容。它认为你会喜欢如果人们点击它会打开 Gmail 应用程序或其他电子邮件应用程序。您可以通过创建 OverrideUrlLoading 方法来做到这一点。

    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")。我个人有,因为我发现您 link 到 Youtube 视频它将在 Youtube 应用程序中打开,因为人们可以全屏观看它。

我们唯一需要的功能是当人们点击他们的 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:

    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'

如果你想加载本地文件而不是网站也是可以的。 但是我需要把它们放在哪里呢?

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

该地图位于何处。转到您的文件 - 在您的 PC 上浏览 导航至此:

YOUR_PACKAGE_NAME -> app -> src -> main

在该文件夹中您将创建一个地图 assets 并在地图中 www 您将在其中粘贴您的文件

如有任何问题请回复