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中實(shí)例化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點(diǎn)鏈接看了很多頁以后為了讓W(xué)ebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點(diǎn)擊系統(tǒng)回退剪鍵，整個瀏覽器會調(diào)用finish()而結(jié)束自身，而不是回退到上一頁面

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

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

缺點(diǎn)：如果是載入的是普通網(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); ?

??????????? //實(shí)例化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智能手機(jī)的核心功能——包括地理定位，加速器，聯(lián)系人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以以此擴(kuò)展無限的功能。PhoneGap是免費(fèi)的，但是它需要特定平臺提供的附加軟件，例如 iPhone的iPhone SDK，Android的Android SDK等，

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

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

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

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

切圖網(wǎng)（qietu.com）最早將psd轉(zhuǎn)html服務(wù)模式帶到國內(nèi)，并首個提供響應(yīng)式、webapp前端開發(fā)的公司。專注web前端開發(fā)技術(shù)，關(guān)注用戶體驗(yà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 工具，選擇“文件”-> “新建”->“項(xiàng)目”，輸入項(xiàng)目名稱和保存路徑，選擇“5+ App”模板。

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

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

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

6. 等待云打包完成后，下載應(yīng)用的 EXE 文件，或者掃描二維碼在手機(jī)上安裝應(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 工具，選擇“新建項(xiàng)目”，輸入項(xiàng)目名稱和保存路徑，選擇“HTML”模式。

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

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

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

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

HTML Compiler

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

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

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

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

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

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

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

大家用Axure制作APP原型時，即使高保真效果也只是在視覺層面上實(shí)現(xiàn)了原型效果，但頁面中的數(shù)據(jù)內(nèi)容還都只是預(yù)先設(shè)定好的，例如：使用中繼器、表格等，模擬真實(shí)作品。那么有沒有一種方法，讓我們制作的原型也能獲取到真實(shí)數(shù)據(jù)呢？

本例通過JavaScript實(shí)現(xiàn)實(shí)時獲取天氣功能，意在激發(fā)大家興趣，制作更多基于Axure獲取實(shí)時信息的案例。廢話不多說，上圖為敬：

這個原型到底有什么獨(dú)特之處嗎？在剛打開的時候，整個頁面呈現(xiàn)的數(shù)據(jù)都是之前設(shè)定好的，當(dāng)點(diǎn)擊左上角的『刷新』的時候，頁面會通過一個天氣查詢api獲取到當(dāng)前真實(shí)數(shù)據(jù)，然后加載出來。怎么樣，是不是被它吸引到了？

原理

這個實(shí)例中主要用到了Axure的以下幾個功能：

（1）中繼器

由于『昨天』、『今天』、『明天』的天氣概要布局相同，可以使用中繼器更加規(guī)范顯示。

（2）JavaScript

在獲取天氣api時，通過Ajax的GET方式從天氣api服務(wù)器中獲取實(shí)時數(shù)據(jù)。

（3）全局變量

接收并儲存獲取到的實(shí)時數(shù)據(jù)。

（4）字符串函數(shù)

通過indexOf、replace、slice等字符串函數(shù)對接收到的數(shù)據(jù)進(jìn)行加工，之后存儲到中繼器中。

以下為整個實(shí)例流程圖：

功能實(shí)現(xiàn)

1. 獲取api數(shù)據(jù)

在本例中，我們通過『http://t.weather.sojson.com/api/weather/city/101010100』api獲取到北京天氣的實(shí)時數(shù)據(jù)，大家可以看到，數(shù)據(jù)是以json格式返回的，此接口可以獲得當(dāng)天的天氣詳情和從昨天到未來15天的天氣數(shù)據(jù)。

那么Axure是如何實(shí)現(xiàn)調(diào)用api的呢？

我們先設(shè)定一個全局變量『tianqi』，當(dāng)點(diǎn)擊刷新按鈕時，先設(shè)置全局變量值為空，再通過『打開鏈接』功能插入Javascript腳本，參數(shù)選擇「鏈接外部網(wǎng)址」，「打開當(dāng)前窗口」調(diào)用api并賦值給全局變量。

javascript：
$.ajax({
method: ‘GET’,
url: ‘http://t.weather.sojson.com/api/weather/city/101010100’,
data: {}
}).done(function(msg){
$axure.setGlobalVariable(‘tianqi’, JSON.stringify(msg));
});

這段JavaScript代碼的意思就是調(diào)用JavaScript，通過「ajax」對象的「GET」方式，從「http://t.weather.sojson.com/api/weather/city/101010100」地址獲取數(shù)據(jù)，因?yàn)檫@個api不需要傳遞參數(shù)，所以「data」字段并沒有賦值。之后將獲取到的數(shù)據(jù)通過「JSON.stringify」轉(zhuǎn)為字符串后賦值給全局變量「tianqi」。

怎么樣？是不是很神奇。

如果你不明白，去百度下ajax的「GET」方法就能略知一二了。通過這一步，我們的全局變量「tianqi」就已經(jīng)獲取到了實(shí)時的天氣數(shù)據(jù)。那么之后怎么加工呢？

2. 格式化數(shù)據(jù)

目前的全局變量值如下圖，是沒辦法直接使用的。那我們?nèi)绾胃袷交@些數(shù)據(jù)呢，這時就需要字符串函數(shù)了。

如圖所示，整個數(shù)據(jù)中包含了2部分，第一部分是當(dāng)天的天氣情況，第二部分是從昨天開始到之后的十五天天氣情況。由于時間關(guān)系，本次實(shí)例中只使用到了「第一部分」和「昨天到明天」的天氣情況。

我們首先創(chuàng)建4個文本框，這4個文本框分別保存「當(dāng)天天氣情況」、「昨天天氣情況」、「今天天氣情況」、「明天天氣情況」。然后通過『設(shè)置文本』功能對文本框賦值，其中「當(dāng)天天氣情況」的賦值函數(shù)為：

[[tianqi.substring(tianqi.indexOf(‘shidu’),tianqi.indexOf(‘yesterday’))]]

這句話什么意思呢？就是說截取「tianqi」字符串中從「shidu」字段到「yesterday」字段的字符。

3. 更新天氣數(shù)據(jù)

目前我們獲得了4段數(shù)據(jù)，分別為「當(dāng)天天氣情況」、「昨天天氣情況」、「今天天氣情況」、「明天天氣情況」。這樣就簡單多了，當(dāng)我們需要當(dāng)天的溫度是，直接從「當(dāng)天天氣情況」數(shù)據(jù)中查找對應(yīng)的「wendu」就可以了。

目前「當(dāng)天天氣情況」數(shù)據(jù)如下：

shidu”:”16%”,”pm25″:11.0,”pm10″:23.0,”quality”:”優(yōu)”,”wendu“:”16″,”ganmao”:”各類人群可自由活動”,”yesterday

我們很容易看到，「wendu」的數(shù)值是「16」。如何截取呢？我們通過以下函數(shù)將「16」賦值給頁面中的『溫度』字段。其中「LVAR1」為「當(dāng)天天氣情況」元件的元件文字。

[[LVAR1.slice(LVAR1.indexOf(‘wendu’)+8,LVAR1.indexOf(‘wendu’)+10)]]

4. 更新中繼器數(shù)據(jù)

如前所述，頁面中的「昨天」、「今天」、「明天」天氣情況我們通過中繼器儲存。更新中繼器數(shù)據(jù)我們通過『更新行』動作實(shí)現(xiàn)。

對應(yīng)的賦值函數(shù)同樣通過字符串函數(shù)實(shí)現(xiàn)，例如「天氣類型」函數(shù)如下，LVAR1為「昨天天氣情況」元件的元件文字：

[[LVAR1.slice(LVAR1.indexOf(‘type’)+7,LVAR1.indexOf(‘type’)+8)]]

至此，大功告成，我們的頁面已經(jīng)加載了實(shí)時的天氣信息。

后記

這個有用嗎？

作為一名產(chǎn)品經(jīng)理，如果連自己最常用的軟件都不喜歡琢磨，何談自己要開發(fā)的產(chǎn)品呢？

通過這種獲取api的方式，我們可以制作更多實(shí)時、真實(shí)的案例，在網(wǎng)上有無數(shù)的api，例如大小寫轉(zhuǎn)換、MD5加密、歸屬地查詢、車輛限行，如果我們做的案例中能得當(dāng)?shù)氖褂眠@些功能，不是更好嗎？更進(jìn)一步，如果懂得開發(fā)，我們完全可以為了原型演示開發(fā)一個特定的api，實(shí)現(xiàn)相應(yīng)功能。

一些問題

JavaScript接口http限制：目前測試后已知的限制是，如果接口不是https協(xié)議，原型在axshare上無法獲取數(shù)據(jù)，原因是axshare禁止調(diào)用http接口。
JavaScript接口跨域問題：在網(wǎng)上測試了一些接口，發(fā)現(xiàn)使用ajax方法調(diào)用時會產(chǎn)生跨域問題，導(dǎo)致無法接收到數(shù)據(jù)，具體解決方法沒有找到，如果有方法歡迎留言。
接口不穩(wěn)定解決辦法：目前通過循環(huán)調(diào)用直到接口返回正常數(shù)據(jù)時結(jié)束。
獲取到的數(shù)據(jù)是object：記得使用『JSON.stringify』轉(zhuǎn)換接收到的數(shù)據(jù)，因?yàn)閿?shù)據(jù)可能是json類型，要轉(zhuǎn)換為字符串才能使用。
案例優(yōu)化：本天氣案例基于小米手機(jī)系統(tǒng)天氣app。由于時間關(guān)系只制作了首頁，其他滑動及點(diǎn)擊效果之后有時間可能會更新。

歡迎留言討論。

本文由 @escher 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議

在線咨詢

上一篇：前端數(shù)據(jù)提交給后端之HTML表單簡單剖析
下一篇：CSS 文本超出隱藏

您的項(xiàng)目需求

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

整合營銷服務(wù)商