2個將HTML5打包成app的方法

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

一、Android SDK中的WebView

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

2.調(diào)用WebView的loadUrl()方法，設(shè)置WevView要顯示的網(wǎng)頁：

? 互聯(lián)網(wǎng)用：webView.loadUrl("http://www.qietu.com");

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

3.調(diào)用Activity的setContentView( )方法來顯示網(wǎng)頁視圖

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

5.需要在AndroidManifest.xml文件中添加權(quán)限，否則會出現(xiàn)Web page not available錯誤。

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

缺點：如果是載入的是普通網(wǎng)頁，沒有什么問題，但如果是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); ?

??????????? //設(shè)置WebView屬性，能夠執(zhí)行Javascript腳本 ?

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

??????????? //加載需要顯示的網(wǎng)頁 ?

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

??????????? //設(shè)置Web視圖 ?

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

??????? } ?

??????? @Override

??????? //設(shè)置回退 ?

??????? //覆蓋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文件中添加權(quán)限

??? <?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的，創(chuàng)建移動跨平臺移動應(yīng)用程序的快速開發(fā)平臺。它使開發(fā)者能夠利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯(lián)系人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以以此擴展無限的功能。PhoneGap是免費的，但是它需要特定平臺提供的附加軟件，例如 iPhone的iPhone SDK，Android的Android SDK等，

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

優(yōu)點：在Eclipse中加入SDK，編程自由，完美適應(yīng)不同設(shè)備屏幕大小，適合高手使用。

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

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

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

面我推薦幾款工具

HTML App Build

HTML App Build 工具是一款可以將 HTML 網(wǎng)頁轉(zhuǎn)換為 EXE 可執(zhí)行文件的軟件。它可以讓您使用 HTML、JavaScript 和 CSS 等網(wǎng)頁技術(shù)開發(fā)跨平臺的移動應(yīng)用

使用 HTML App Build 工具的步驟如下：

1. 在您的電腦上安裝 HTML App Build 工具

2. 打開 HTML App Build 工具，選擇“文件”-> “新建”->“項目”，輸入項目名稱和保存路徑，選擇“5+ App”模板。

3. 編寫您的 HTML、JavaScript 和 CSS 代碼，或者使用 HBuilderX 內(nèi)置的 HTML5+ API 和 MUI 框架來快速開發(fā)移動應(yīng)用。

4. 在 HTML App Build 工具中選擇“運行”-> “運行到手機或模擬器”，查看您的應(yīng)用在真機或模擬器上的效果。

5. 在 HTML App Build 工具中選擇“云打包”-> “打包設(shè)置”，設(shè)置應(yīng)用的圖標、名稱、版本號等信息，然后選擇“開始云打包”。

6. 等待云打包完成后，下載應(yīng)用的 EXE 文件，或者掃描二維碼在手機上安裝應(yīng)用。

HEX

HEX 工具是一款可以將 HTML 網(wǎng)頁轉(zhuǎn)換為 EXE 或 APP 的軟件。它可以讓您使用 HTML等網(wǎng)頁技術(shù)開發(fā)桌面或移動應(yīng)用。

使用 HEX 工具將 HTML 變?yōu)?EXE 或 APP 的步驟如下：

1. 在您的電腦上安裝 HEX 工具。

2.打開HEX 工具，選擇“新建項目”，輸入項目名稱和保存路徑，選擇“HTML”模式。

3.編寫您的 HTML ，JavaScript 和 CSS 代碼，或者使用現(xiàn)有的 HTML 網(wǎng)頁文件。

4.在HEX 工具中選擇“發(fā)布項目”，設(shè)置您的應(yīng)用的圖標、名稱、版本號等信息，然后選擇“生成 EXE”或“生成 APP”。

5.等待生成完成后，您就可以得到您的應(yīng)用的 EXE 或 APP 文件，可以在電腦或手機上運行。

這是詳細的使用過程：HTML杞? EXE錛寃eb欏圭洰鎵撳寘 exe鐨勮В鍐蟲柟妗堬紙1錛夛細HEX - 鐭ヤ箮

HTML Compiler

HTML Compiler是一款可以將HTML文件轉(zhuǎn)換為可執(zhí)行文件的工具。您可以使用它來制作獨立的網(wǎng)頁應(yīng)用程序或演示文稿。要使用HTML Compiler工具，您需要按照以下步驟操作：

1. 下載并安裝HTML Compiler2021直裝版，或者從官網(wǎng)下載最新版本。

2. 打開HTML Compiler，選擇“新建項目”或“打開項目”，并選擇您要編譯的HTML文件或文件夾。

3. 在項目設(shè)置中，您可以修改應(yīng)用程序的名稱、圖標、版本、版權(quán)等信息，以及選擇編譯選項和輸出路徑。

4. 點擊“編譯”按鈕，等待編譯完成，您就可以在輸出路徑中找到生成的可執(zhí)行文件了。

這是關(guān)于html compiler直裝版的詳細教程HTML Compiler2021直裝版附安裝教程及特點 - 嗶哩嗶哩

如果您只是想編輯和運行HTML文件，而不需要編譯成可執(zhí)行文件，您可以使用其他的HTML編輯器，例如VS Code、HBuilderX、Online HTML Editor等。這些編輯器都提供了語法高亮、代碼提示、實時預(yù)覽等功能，可以幫助您快速編寫和測試HTML代碼。

今天要給大家分享10款精美的HTML5圖片輪播/切換動畫，這些動畫每一個都有自己的特點，不管你是PC端的網(wǎng)頁，還是移動端的H5應(yīng)用，都可以嘗試使用這些動畫來提高應(yīng)用的用戶體驗。

?
PS：請你耐心看完，文末我提供了所有動畫的源碼打包下載鏈接，如果你喜歡這些動畫，可以按需下載，希望對你有所幫助。

1. 可無限水平滑動的JS畫廊動畫

這是一個簡約而實用的JS畫廊相冊組件，它的特點是可以添加無限多張相片，并且支持水平無限循環(huán)滑動。另外它還支持對畫廊中的相片進行展開和折疊，并同時動態(tài)展示相片的標題和描述。這款相冊組件主要采用了jQuery插件以及CSS3的過渡動畫特性，使用起來十分方便。

2. 基于TweenMax.js的圖片碎裂切換動畫

這是一個基于TweenMax動畫庫的圖片碎裂切換動畫，它的特點是點擊圖片時，圖片就會像玻璃那樣碎裂成許多塊，然后漸漸地消失，直到下一張圖片顯示為止。這款圖片碎裂動畫也可以應(yīng)用在焦點圖的切換動畫中，效果非常不錯。

3. 基于Swiper.js的視差效果圖片滑塊動畫

Swiper.js是一個流行的移動端輪播圖插件，它提供了豐富的功能和配置項。這款圖片滑塊動畫就是基于Swiper.js實現(xiàn)的，它的特點是圖片切換的時候，圖片上方將會出現(xiàn)白色背景的視差效果圖層，并且它可以適配不同的瀏覽器尺寸。

4. 基于Three.js的圖片撕碎切換動畫

這又是一個非常酷的HTML5 Canvas圖片切換動畫，它是基于知名3D動畫庫threejs實現(xiàn)的。在圖片切換過程中，你也可以通過鼠標拖動來查看切換時的具體細節(jié)效果。如果將它制作成一個效果非常獨特而華麗的相冊或者焦點圖插件，相信會很不錯的。

5. CSS濾鏡特效下的手風(fēng)琴圖片切換動畫

這是一個純CSS實現(xiàn)的手風(fēng)琴特效的圖片切換動畫，它的特點是采用了CSS濾鏡特效，首先將原圖通過濾鏡變換成黑白樣式，鼠標滑過激活圖片后，再將黑白圖轉(zhuǎn)換成原圖，從而實現(xiàn)圖片高亮的效果。

6. jQuery手風(fēng)琴圖片播放器可自動播放

這同樣是一款手風(fēng)琴特效的圖片切換動畫，它基于jQuery開發(fā)，是一款非常不錯的jQuery圖片輪播插件。它的特點是支持自動播放，使用簡單，對于一些商品展示的站點或者app，比較適合使用。

7. HTML5 SVG實現(xiàn)的波浪切換圖片動畫

這是一款采用SVG遮罩來實現(xiàn)波浪樣式的圖片切換動畫。所有的圖片采用背景圖片的方式，圖片上方定義SVG圓形路徑，通過對圓形svg路徑的樣式渲染，實現(xiàn)波浪切換的動畫效果。

8. 基于jQuery的3D圖片切換插件Slicebox

Slicebox是一款基于jQuery的圖片切換插件，盡管jQuery在新的web系統(tǒng)中使用越來越少，但我們依然可以使用它的強大插件來豐富我們現(xiàn)有的網(wǎng)站。這款圖片切換插件的特點是播放上一張或下一張圖片時，圖片會出現(xiàn)水平分裂或垂直分裂的3D視覺效果。

9. jQuery響應(yīng)式圖片切換插件，可自動播放

這款jQuery圖片切換插件擁有簡單的使用方法和靈活的擴展方式，支持單頁面多實例，并且可適配不同的屏幕尺寸。另外通過配置，我們可以讓圖片切換組件支持自動播放、顯示切換按鈕、鼠標滑過放大圖片等特性。

10. 純CSS實現(xiàn)的水平3D圖片滾動特效

這是一款純CSS實現(xiàn)的圖片滾動特效，它的特點是我們可以通過滾動瀏覽器的橫向滾動條，可以讓圖片進行水平切換滾動。另外圖片排列呈現(xiàn)3D投影的視覺效果，同時也可以在移動端通過手指滑動來實現(xiàn)圖片的橫向滾動瀏覽。

在線咨詢

上一篇：CSS 圖片
下一篇：好看又好用的開源博客系統(tǒng)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商