2個將HTML5打包成app的方法

來越多的開發者熱衷于使用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（長按復制）

天和大家交流一下HtmlTextView的使用，HtmlTextView是一個開源的原生安卓第三方控件，主要的用途是直接把web端的html內容解析后展示在安卓手機上。應用場景很多，比如很多新聞類APP在web端編輯入庫后是html的格式，這時候如果想顯示在手機上，HtmlTextView就是一個很好的選擇，當然有人會說谷歌自己的TextView通過一些方法也可以實現，但是我試過，效果簡直不能再差，而且使用起來很復雜。這個HtmlTextView有多好，話不多說，直接上圖：

在使用的時候，第一步是引入控件的依賴：

repositories {
jcenter()
}

dependencies {
compile 'org.sufficientlysecure:html-textview:4.0'
}

引入依賴后有幾種不同的使用方式，根據自己實際的場景進行選擇：

大部分的html標簽都已經支持：

<p>
<div> handled exactly like <p>
<br>
<b>
<i>
<strong> (bug on some Android versions: generates italic)
<em> (bug on some Android versions: generates bold)
<u>
<tt>
<dfn>
<sub>
<sup>
<blockquote>
<cite>
<big>
<small>
<font color="..." face="...">
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<a href="...">
<img src="...">

最后，一個最重要的問題，也是我最近使用遇到的最大的問題：

當html里面有src或者href等的時候，如果不做處理，APP會出現無法跳轉至瀏覽器并且崩潰閃退的情況。解決這個問題的辦法就是在方法里添加對應的點擊事件，如下：

結：

Android 調用 js:

在 Android 中創建通往 javascript 的接口;

在 html 中定義要執行的方法;

在 Android 中的具體事件中進行調用。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">contentWebView.loadUrl("javascript：javacalljs()");

</pre>

js中調用Android 方法 :

html中調用 Android 方法則反來，在 Andorid 中定義要調用的方法， html 中綁定事件進行調用。 </pre>

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;"><button onclick="window.wjj.startFunction()">點擊調用java 代碼</button></pre>

Android 展示 html 頁面

（1）project 視圖下，在 Android 工程中新建目錄 assets;

image

（2）在 assets 目錄下新建 html 頁面如 show.html；

（3）Android 界面中在 WebView 中展示 show.html；

（4）Android 原生按鈕點擊執行 html 中的 js 方法；

image

界面設計：

image

html 中的 js:

image

效果：

image

js 調用 android 方法

還是需要一個接口：

image

Andorid中定義相應的執行方法（注意帶上相應的注解）：

image

html 中進行調用：

image

效果（彈的吐司沒截下來）：

在線咨詢

上一篇：基于jQuery，這六大表單向導插件首推！
下一篇：深入理解 JavaScript：實現自定義 `pop` 方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

2個將HTML5打包成app的方法

您的項目需求