将HTML5网页封装到Android应用中的最简单方法是什么?

时间:2017-09-13 12:44:40

标签: android html5 android-webview generator

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

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

虽然看看Android开发很有诱惑力,但我想知道是否有一个工具或某种生成器通过提供一个URL和一个图标来生成这样一个伪应用程序?这对我们的目的来说是完美的,完全足够的(也可能对其他人而言)。

更新:Danilo推荐PhoneGap,这很棒,但在我的情况下它可能有点超过顶部,因为我只需要显示无框浏览器窗口而不需要运行带有节点应用程序的网络服务器。

2 个答案:

答案 0 :(得分:1)

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

Adobe Phonegap

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

答案 1 :(得分:1)

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

如果为空活动

创建新项目选项

首先,您需要定义布局。您需要将Webview布局添加到Activity_main.xml

Activity_main.xml位于res - >下布局

这是您的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的一个问题是,如果您旋转手机,您的活动将重新启动。这不是用户友好的,因此会将视图锁定为纵向。 所以我们需要做的是:

<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 - &gt;下[YOUR_PACKAGE_NAME]

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

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

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

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

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

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

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

如果您的网站上有某些内容,例如链接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")。我个人是因为我发现它是用户友好的,你链接到Youtube视频,它将在Youtube应用程序中打开,因为人们可以全屏查看它。

我们需要的唯一功能是如果人们点击他们的手机会怎么做。

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 - &gt; app - &gt; src - &gt;主要

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

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