來越多的開發者熱衷于使用html5+JavaScript開發移動Web App。不過，HTML5 Web APP的出現能否在未來取代移動應用，就目前來說，還是個未知數。那么，有什么辦法，既可以使用HTMl5開發應 用，又可以將其簡單封裝成APK文件呢？

一、Android SDK中的WebView

1.在要Activity中實例化WebView組件：WebView webView = new WebView(this);

2.調用WebView的loadUrl()方法，設置WevView要顯示的網頁：

? 互聯網用：webView.loadUrl("http://www.qietu.com");

? 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中

3.調用Activity的setContentView( )方法來顯示網頁視圖

4.用WebView點鏈接看了很多頁以后為了讓WebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點擊系統回退剪鍵，整個瀏覽器會調用finish()而結束自身，而不是回退到上一頁面

5.需要在AndroidManifest.xml文件中添加權限，否則會出現Web page not available錯誤。

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

缺點：如果是載入的是普通網頁，沒有什么問題，但如果是html5,封裝后，在android2.3以上才能正常訪問，android2.2及以下，SDK中的WebView還沒完全支持HTML5

下面是具體例子：

MainActivity.java

??? package com.android.webview.activity; ?

??? import android.app.Activity; ?

??? import android.os.Bundle; ?

??? import android.view.KeyEvent; ?

??? import android.webkit.WebView; ?

??? public class MainActivity extends Activity { ?

??????? private WebView webview; ?

??????? @Override

??????? public void onCreate(Bundle savedInstanceState) { ?

??????????? super.onCreate(savedInstanceState); ?

??????????? //實例化WebView對象 ?

??????????? webview = new WebView(this); ?

??????????? //設置WebView屬性，能夠執行Javascript腳本 ?

??????????? webview.getSettings().setJavaScriptEnabled(true); ?

??????????? //加載需要顯示的網頁 ?

??????????? webview.loadUrl("http://www.qietu.com/"); ?

??????????? //設置Web視圖 ?

??????????? setContentView(webview); ?

??????? } ?

??????? @Override

??????? //設置回退 ?

??????? //覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法 ?

??????? public boolean onKeyDown(int keyCode, KeyEvent event) { ?

??????????? if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { ?

??????????????? webview.goBack(); //goBack()表示返回WebView的上一頁面 ?

??????????????? return true; ?

??????????? } ?

??????????? return false; ?

??? }

在AndroidManifest.xml文件中添加權限

??? <?xml version="1.0" encoding="utf-8"?>

??? <manifest xmlns:android="http://schemas.android.com/apk/res/android"

????????? package="com.android.webview.activity"

????????? android:versionCode="1"

????????? android:versionName="1.0">

??????? <uses-sdk android:minSdkVersion="10" />

??????? <application android:icon="@drawable/icon" android:label="@string/app_name">

??????????? <activity android:name=".MainActivity"

????????????????????? android:label="@string/app_name">

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

二、使用PhoneGap

??? PhoneGap是一個用基于HTML，CSS和JavaScript的，創建移動跨平臺移動應用程序的快速開發平臺。它使開發者能夠利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯系 人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以以此擴展無限的功能。PhoneGap是免費的，但是它需要特定平臺提供的附加軟件，例如 iPhone的iPhone SDK，Android的Android SDK等，

詳細方法請見：http://phonegap.com/start#android

優點：在Eclipse中加入SDK，編程自由，完美適應不同設備屏幕大小，適合高手使用。

缺點：沒有使用布局，直接加載網頁，不能添加廣告。

----------------

切圖網（qietu.com）最早將psd轉html服務模式帶到國內，并首個提供響應式、webapp前端開發的公司。專注web前端開發技術，關注用戶體驗，加我們公眾微信賬號：qietuwang（長按復制）

有人說我只會只會簡單的html 能不能做安卓（android）手機上的app呢？答案是可以的。什么是android呢，用過手機的估計都知道了。App就是手機上的應用軟件，一種移動客戶端軟件。掌握html，你就可以做一個HTML的網站了，這也不是APP啊。其實 我們利用html寫出手機屏幕大小的web頁面 讓后放入手機瀏覽器內執行，就是一款web app了。在幾年前的工作中有做過手機App項目，pc前端和android和ios程序員配合完成整個項目的開發，這也讓我產生了學習android和ios程序開發的興趣。于是寫了第一個android程序first_app，分享給其他也想學習android移動開發的朋友或是好奇安卓app是怎么制作的朋友。Web app 也是app 的一種。可以把這個Html頁面打包成app。本質上都是web，都是利用html、css、js構建的網站，不同的是，webapp利用框架技術等讓你有了在使用App的感覺（比如頁面不跳轉刷新等）。這方面做的最好的是 HBuilder。使用它，你可以使用網頁（html+css+js）快速地創建APP應用程序。并在android手機中展示和使用。（當然如果網頁做得好的話，采用響應式布局，即可在手機上完美展示）。hbuilder優點：速度快，所需要的環境少，加快了開發者速度，不會因為各種JDK，java，Android環境而無法打包生成apk或ipa頭疼，大大減少了開發繁瑣操作。

我們首先打開web開發工具hbuilder，新建一個項目如圖：

新建完成后， 在項目管理器會顯示新建的項目目錄，其中css，img，js和index.html這幾個文件可刪可改可替換。

unpackage文件夾是放置app圖標和啟動界面的圖片。

1和2是mui框架，需要的css和js文件，不懂可以不用動。

頁面入口默認是index.html，根據自己項目需要，更改APP的啟動頁面，3是manifest.json文件是移動App的配置文件，用于指定應用的顯示名稱、圖標、應用入口文件地址及需要使用的設備權限等信息，用戶可通過HBuilder的可視化界面視圖或者源碼視圖來配置移動App的信息，當然如果你要設置 APP 的啟動圖和圖標，你只需要在 manifest.json 里面進行設置即可，這就是為什么不要刪掉的原因！

下圖為index.html的內容，很簡單，在html的body中寫入內容。

云打包的好處就是我們不需要在本地搭建環境，直接提交上去，打包好會返回下載鏈接讓我下載安裝包，除了生產 Android 安裝包之外，還可以生成 ios 的，我們這邊只測試生成 Android 的安裝包。

配置完成后，點擊頁面下方的圖標配置：配置APP在手機上的顯示圖標；默認是HBuilder的圖標：

點擊"打開下載目錄"，找到app所在目錄

提交之后會需要 2-5 分鐘的打包，然后生成一個 apk 安裝包，就可以在手機安裝使用你開發得 app 了，什么簽名這些全都不用搞。

打包成功后就可以將apk文件裝到到android手機上查看效果了。如圖：