Android使用WebView打包網頁成app

標籤：

原生app的開發成本和網頁相比相對較高，所以越來越多的app使用網頁來作為介面，甚至完全將一個網站封裝成app，可以提高開發速度，還能基本實現跨平台。

下面以Android為例，在ubuntu-14.04.4-desktop-amd64環境實現一個簡單的WebView封裝網站成app的過程。

 

環境準備

開發環境需要Java SDK(官網下載)，Android SDK(官網下載)。

Java SDK安裝

wget http://download.oracle.com/otn-pub/java/jdk/8u91-b14/jdk-8u91-linux-x64.tar.gz
tar -x -f jdk-8u91-linux-x64.tar.gz

然後配置PATH路徑及JAVA_HOME

vi ~/.bashrc

在最後添加

export JAVA_HOME=JDK解壓目錄export CLASSPATH=.:$CLASSPATH:$JAVA_HOME/libexport PATH=$PATH:$JAVA_HOME/bin

 儲存退出vi，重新整理配置

source ~/.bashrc

Android SDK安裝

ps：安裝過程中可能需要梯子，請自備。

wget https://dl.google.com/android/android-sdk_r24.4.1-linux.tgztar -x -f android-sdk_r24.4.1-linux.tgzcd android-sdk-linux/tools

先看一下有哪些sdk版本可以安裝

./android list sdk

然後安裝需要的sdk版本

./android update sdk --no-ui --filter 用逗號分隔需要安裝的序號

 

項目建立及代碼編寫

在任意地方建立一個目錄，儲存這個項目，然後建立一個src目錄，用於存放源檔案。因為Java有包的概念，所以進入src目錄後，根據包名的層次，依次建立相應目錄，然後建立Java來源程式檔案，比如：

 1 package test.android; 2  3 import android.app.Activity; 4 import android.os.Bundle; 5 // import android.app.AlertDialog; 6 import android.view.Window; 7 // import android.view.WindowManager; 8 import android.view.KeyEvent; 9 import android.webkit.WebView;10 import android.webkit.WebViewClient;11 //import android.webkit.WebChromeClient;12 // import android.webkit.JsResult;13 // import android.content.DialogInterface;14 // import android.content.DialogInterface.OnClickListener;15 16 public class Main extends Activity {17   public static final String LOAD_URL = "http://www.baidu.com/";18 19   private WebView webView = null;20 21   public void onCreate(Bundle savedInstanceState) {22     super.onCreate(savedInstanceState);23 24     //this.requestWindowFeature(Window.FEATURE_NO_TITLE);25     //this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);26 27     webView = new WebView(this);28     this.setContentView(webView);29     webView.setWebViewClient(new WebViewClient() {30       public void onPageFinished(WebView view, String url) {31         //webView.evaluateJavascript("test();", null);32       }33     });34     /*35     webView.setWebChromeClient(new WebChromeClient() {36       public boolean onJsAlert(WebView view, String url, String message, JsResult result) {37 38         new AlertDialog.Builder(_this)39         .setMessage(message)40         .setPositiveButton("OK", new DialogInterface.OnClickListener() {41           public void onClick(DialogInterface dialog, int which) {}42         }).show();43 44         return true;45       }46     });47     */48     webView.getSettings().setJavaScriptEnabled(true);49     webView.addJavascriptInterface(this, "native");50     webView.loadUrl(LOAD_URL);51   }52 53   // overwrite back button54   public boolean onKeyDown(int keyCode, KeyEvent event) {55     if (KeyEvent.KEYCODE_BACK == keyCode && webView.canGoBack()) {56       webView.goBack();57       return true;58     }59 60     return super.onKeyDown(keyCode, event);61   }62 63 }

 

將檔案儲存為Main.java

 

回到項目根目錄，建立另一個檔案，儲存為AndroidManifest.xml，內容如下：

 1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest  xmlns:android="http://schemas.android.com/apk/res/android" package="test.android"> 3   <application android:icon="@drawable/icon" 4                android:label="@string/app_name"> 5     <activity android:name=".Main"> 6       <intent-filter> 7         <action android:name="android.intent.action.MAIN" /> 8         <category android:name="android.intent.category.LAUNCHER" /> 9       </intent-filter>10     </activity>11   </application>12 </manifest>

在項目根目錄建立res目錄，在res內建立drawable和values目錄。

在values內建立xml檔案strings.xml，內容如下：

<?xml version="1.0" encoding="utf-8"?><resources>  <string name="app_name">資源測試</string>  <string name="web_url">http://www.baidu.com</string></resources>

然後將需要的程式表徵圖拷入drawable目錄，檔案名稱為icon.png

編譯

先切換到項目目錄。

首先要編譯資源，在項目根目錄建立gen目錄，儲存產生的R.java資源編號，在控制台輸入以下命令：

/opt/android-sdk-linux/build-tools/24.0.0/aapt package -f -m -J gen -S res -I /opt/android-sdk-linux/platforms/android-24/android.jar -M AndroidManifest.xml

編譯java源檔案時，加入R.java源檔案：

javac -encoding utf-8 -source 1.6 -target 1.6 -bootclasspath /opt/android-sdk-linux/platforms/android-24/android.jar -d bin/classes src/test/android/Main.java gen/test/android/R.java

 

Android使用WebView打包網頁成app