將HTML5網頁封裝到Android應用程序的最簡單方法？

Question

我們開發了一款基於Web的大型響應式HTML5數據可視化工具，可在個人電腦以及移動設備上使用。有一件事，雖然這有點煩人（在移動設備上），這是事實上，你總是看到瀏覽器的一些部分，因此從來沒有得到一個乾淨的全屏用戶體驗。

當然，我們不想丟棄平臺無關的基於Web的HTML5應用程序的好處，但我們仍然想爲客戶提供額外的Android「應用程序」，其唯一目的是顯示我們的網頁應用程序全屏顯示，沒有任何標題欄或菜單等。這與我們的瀏覽器中的網絡應用程序一樣功能強大且易於使用，但它將是一種拋光版版本。我不是Android開發人員，但我看到很多很多Android應用程序，基本上只是瀏覽器窗口（webview？）的容器。

雖然看到android開發很誘人，但我不知道是否有工具或某種生成器通過給出一個URL和一個圖標來生成這樣一個僞應用程序？這對我們的目標來說是完美的，完全足夠的（也可能對其他人而言）。

更新：達尼洛推薦PhoneGap的，這是偉大的，但它可能是在我的情況上一點點，因爲我只需要顯示無框瀏覽器窗口，也不需要運行一個Web服務器手機本身的節點應用程序。

Answer 1

如何啓動加載簡單HTML頁面的基本項目。

如果您空活動

首先創建一個新的項目選擇，你需要定義你的佈局。你需要一個網頁視圖佈局添加到您的activity_main.xml中

activity_main.xml中位於下水庫 - >佈局

此網頁視圖佈局：

<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

您需要做的第二件事是定義您需要的權限，您可以在AndroidManifes中執行此操作t.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 - > [YOUR_PACKAGE_NAME]

第一行我們將定義我們的類：

public class MainActivity extends Activity 

在我們寫一些功能將

在那裏，第一個功能是創建web視圖。

我們聲明瞭一個私有的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); 
    } 

您需要將這些行添加到您的版本。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 - >程序 - > SRC - >主

在該文件夾，您將創建一個映射assets和那裏的地圖www那裏要粘貼文件

如果您有任何疑問，請回復

Answer 2

我建議你檢查一些現有的WebView基礎的框架，例如：

Adobe Phonegap

它會幫助你生成一個應用程序，與不同的設備和平臺（包括iOS）兼容。您可以在線輕鬆查找文檔，例如，使其全屏顯示。