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/lib
export PATH=$PATH:$JAVA_HOME/bin

 保存退出vi，刷新配置

source ~/.bashrc

Android SDK安裝

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

wget https://dl.google.com/android/android-sdk_r24.4.1-linux.tgz
tar -x -f android-sdk_r24.4.1-linux.tgz
cd android-sdk-linux/tools

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

./android list sdk

然后安裝需要的sdk版本

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

 

項目建立及代碼編寫

在任意地方新建一個目錄，保存這個項目，然后新建一個src目錄，用於存放源文件。因為Java有包的概念，所以進入src目錄后，根據包名的層次，依次建立相應目錄，然后新建Java源程序文件，比如：

package test.android;

import android.app.Activity;
import android.os.Bundle;
// import android.app.AlertDialog;
import android.view.Window;
// import android.view.WindowManager;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;
//import android.webkit.WebChromeClient;
// import android.webkit.JsResult;
// import android.content.DialogInterface;
// import android.content.DialogInterface.OnClickListener;

public class Main extends Activity {
  public static final String LOAD_URL = "http://www.baidu.com/";

  private WebView webView = null;

  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    //this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    //this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

    webView = new WebView(this);
    this.setContentView(webView);
    webView.setWebViewClient(new WebViewClient() {
      public void onPageFinished(WebView view, String url) {
        //webView.evaluateJavascript("test();", null);
      }
    });
    /*
    webView.setWebChromeClient(new WebChromeClient() {
      public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

        new AlertDialog.Builder(_this)
        .setMessage(message)
        .setPositiveButton("OK", new DialogInterface.OnClickListener() {
          public void onClick(DialogInterface dialog, int which) {}
        }).show();

        return true;
      }
    });
    */
    webView.getSettings().setJavaScriptEnabled(true);
    webView.addJavascriptInterface(this, "native");
    webView.loadUrl(LOAD_URL);
  }

  // overwrite back button
  public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (KeyEvent.KEYCODE_BACK == keyCode && webView.canGoBack()) {
      webView.goBack();
      return true;
    }

    return super.onKeyDown(keyCode, event);
  }

}

 

將文件保存為Main.java

 

回到項目根目錄，新建另一個文件，保存為AndroidManifest.xml，內容如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest  xmlns:android="http://schemas.android.com/apk/res/android" package="test.android">
  <application android:icon="@drawable/icon"
               android:label="@string/app_name">
    <activity android:name=".Main">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
  </application>

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

</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

 將編譯好的文件打包成dex格式

/opt/android-sdk-linux/build-tools/24.0.0/dx --dex --output=bin/classes.dex bin/classes

將資源文件打包

/opt/android-sdk-linux/build-tools/24.0.0/aapt package -f -M AndroidManifest.xml -S res -I /opt/android-sdk-linux/platforms/android-24/android.jar -F bin/main.ap_

將所有文件打包成apk

java -classpath /opt/android-sdk-linux/tools/lib/sdklib.jar com.android.sdklib.build.ApkBuilderMain main_unsigned.apk -v -u -z bin/main.ap_ -f bin/classes.dex -rf src

生成簽名文件

1 keytool -genkey -alias my.keystore -keyalg RSA -validity 20000 -keypass 123456 -storepass 123456 -keystore my.keystore

生成簽名文件時，提示輸入姓名單位之類都可以直接回車忽略，最后輸入y確認即可

對apk文件簽名

jarsigner -verbose -keystore my.keystore -keypass 123456 -storepass 123456 -signedjar main.apk main_unsigned.apk my.keystore

接下來就可以安裝測試了