将 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 的框架,例如:
它将帮助您生成兼容不同设备和平台(包括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
您将在其中粘贴您的文件
如有任何问题请回复
我们开发了一个大型 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 的框架,例如:
它将帮助您生成兼容不同设备和平台(包括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
您将在其中粘贴您的文件
如有任何问题请回复