整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
來越多的開發者熱衷于使用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 App Build 工具是一款可以將 HTML 網頁轉換為 EXE 可執行文件的軟件。它可以讓您使用 HTML、JavaScript 和 CSS 等網頁技術開發跨平臺的移動應用
使用 HTML App Build 工具的步驟如下：
1. 在您的電腦上安裝 HTML App Build 工具
2. 打開 HTML App Build 工具，選擇“文件”-> “新建”->“項目”，輸入項目名稱和保存路徑，選擇“5+ App”模板。
3. 編寫您的 HTML、JavaScript 和 CSS 代碼，或者使用 HBuilderX 內置的 HTML5+ API 和 MUI 框架來快速開發移動應用。
4. 在 HTML App Build 工具中選擇“運行”-> “運行到手機或模擬器”，查看您的應用在真機或模擬器上的效果。
5. 在 HTML App Build 工具中選擇“云打包”-> “打包設置”，設置應用的圖標、名稱、版本號等信息，然后選擇“開始云打包”。
6. 等待云打包完成后，下載應用的 EXE 文件，或者掃描二維碼在手機上安裝應用。
HEX 工具是一款可以將 HTML 網頁轉換為 EXE 或 APP 的軟件。它可以讓您使用 HTML等網頁技術開發桌面或移動應用。
使用 HEX 工具將 HTML 變為 EXE 或 APP 的步驟如下：
1. 在您的電腦上安裝 HEX 工具。
2.打開HEX 工具，選擇“新建項目”，輸入項目名稱和保存路徑，選擇“HTML”模式。
3.編寫您的 HTML ，JavaScript 和 CSS 代碼，或者使用現有的 HTML 網頁文件。
4.在HEX 工具中選擇“發布項目”，設置您的應用的圖標、名稱、版本號等信息，然后選擇“生成 EXE”或“生成 APP”。
5.等待生成完成后，您就可以得到您的應用的 EXE 或 APP 文件，可以在電腦或手機上運行。
這是詳細的使用過程：HTML杞? EXE錛寃eb欏圭洰鎵撳寘 exe鐨勮В鍐蟲柟妗堬紙1錛夛細HEX - 鐭ヤ箮
HTML Compiler是一款可以將HTML文件轉換為可執行文件的工具。您可以使用它來制作獨立的網頁應用程序或演示文稿。要使用HTML Compiler工具，您需要按照以下步驟操作：
1. 下載并安裝HTML Compiler2021直裝版，或者從官網下載最新版本。
2. 打開HTML Compiler，選擇“新建項目”或“打開項目”，并選擇您要編譯的HTML文件或文件夾。
3. 在項目設置中，您可以修改應用程序的名稱、圖標、版本、版權等信息，以及選擇編譯選項和輸出路徑。
4. 點擊“編譯”按鈕，等待編譯完成，您就可以在輸出路徑中找到生成的可執行文件了。
這是關于html compiler直裝版的詳細教程HTML Compiler2021直裝版 附安裝教程及特點 - 嗶哩嗶哩
如果您只是想編輯和運行HTML文件，而不需要編譯成可執行文件，您可以使用其他的HTML編輯器，例如VS Code、HBuilderX、Online HTML Editor等。這些編輯器都提供了語法高亮、代碼提示、實時預覽等功能，可以幫助您快速編寫和測試HTML代碼。
大家用Axure制作APP原型時，即使高保真效果也只是在視覺層面上實現了原型效果，但頁面中的數據內容還都只是預先設定好的，例如：使用中繼器、表格等，模擬真實作品。那么有沒有一種方法，讓我們制作的原型也能獲取到真實數據呢？
本例通過JavaScript實現實時獲取天氣功能，意在激發大家興趣，制作更多基于Axure獲取實時信息的案例。廢話不多說，上圖為敬：
這個原型到底有什么獨特之處嗎？在剛打開的時候，整個頁面呈現的數據都是之前設定好的，當點擊左上角的『刷新』的時候，頁面會通過一個天氣查詢api獲取到當前真實數據，然后加載出來。怎么樣，是不是被它吸引到了？
這個實例中主要用到了Axure的以下幾個功能：
（1）中繼器
由于『昨天』、『今天』、『明天』的天氣概要布局相同，可以使用中繼器更加規范顯示。
（2）JavaScript
在獲取天氣api時，通過Ajax的GET方式從天氣api服務器中獲取實時數據。
（3）全局變量
接收并儲存獲取到的實時數據。
（4）字符串函數
通過indexOf、replace、slice等字符串函數對接收到的數據進行加工，之后存儲到中繼器中。
以下為整個實例流程圖：
在本例中，我們通過『http://t.weather.sojson.com/api/weather/city/101010100』api獲取到北京天氣的實時數據，大家可以看到，數據是以json格式返回的，此接口可以獲得當天的天氣詳情和從昨天到未來15天的天氣數據。
那么Axure是如何實現調用api的呢？
我們先設定一個全局變量『tianqi』，當點擊刷新按鈕時，先設置全局變量值為空，再通過『打開鏈接』功能插入Javascript腳本，參數選擇「鏈接外部網址」，「打開當前窗口」調用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代碼的意思就是調用JavaScript，通過「ajax」對象的「GET」方式，從「http://t.weather.sojson.com/api/weather/city/101010100」地址獲取數據，因為這個api不需要傳遞參數，所以「data」字段并沒有賦值。之后將獲取到的數據通過「JSON.stringify」轉為字符串后賦值給全局變量「tianqi」。
怎么樣？是不是很神奇。
如果你不明白，去百度下ajax的「GET」方法就能略知一二了。通過這一步，我們的全局變量「tianqi」就已經獲取到了實時的天氣數據。那么之后怎么加工呢？
目前的全局變量值如下圖，是沒辦法直接使用的。那我們如何格式化這些數據呢，這時就需要字符串函數了。
如圖所示，整個數據中包含了2部分，第一部分是當天的天氣情況，第二部分是從昨天開始到之后的十五天天氣情況。由于時間關系，本次實例中只使用到了「第一部分」和「昨天到明天」的天氣情況。
我們首先創建4個文本框，這4個文本框分別保存「當天天氣情況」、「昨天天氣情況」、「今天天氣情況」、「明天天氣情況」。然后通過『設置文本』功能對文本框賦值，其中「當天天氣情況」的賦值函數為：
[[tianqi.substring(tianqi.indexOf(‘shidu’),tianqi.indexOf(‘yesterday’))]]
這句話什么意思呢？就是說截取「tianqi」字符串中從「shidu」字段到「yesterday」字段的字符。
目前我們獲得了4段數據，分別為「當天天氣情況」、「昨天天氣情況」、「今天天氣情況」、「明天天氣情況」。這樣就簡單多了，當我們需要當天的溫度是，直接從「當天天氣情況」數據中查找對應的「wendu」就可以了。
目前「當天天氣情況」數據如下：
shidu”:”16%”,”pm25″:11.0,”pm10″:23.0,”quality”:”優”,”wendu“:”16″,”ganmao”:”各類人群可自由活動”,”yesterday
我們很容易看到，「wendu」的數值是「16」。如何截取呢？我們通過以下函數將「16」賦值給頁面中的『溫度』字段。其中「LVAR1」為「當天天氣情況」元件的元件文字。
[[LVAR1.slice(LVAR1.indexOf(‘wendu’)+8,LVAR1.indexOf(‘wendu’)+10)]]
如前所述，頁面中的「昨天」、「今天」、「明天」天氣情況我們通過中繼器儲存。更新中繼器數據我們通過『更新行』動作實現。
對應的賦值函數同樣通過字符串函數實現，例如「天氣類型」函數如下，LVAR1為「昨天天氣情況」元件的元件文字：
[[LVAR1.slice(LVAR1.indexOf(‘type’)+7,LVAR1.indexOf(‘type’)+8)]]
至此，大功告成，我們的頁面已經加載了實時的天氣信息。
作為一名產品經理，如果連自己最常用的軟件都不喜歡琢磨，何談自己要開發的產品呢？
通過這種獲取api的方式，我們可以制作更多實時、真實的案例，在網上有無數的api，例如大小寫轉換、MD5加密、歸屬地查詢、車輛限行，如果我們做的案例中能得當的使用這些功能，不是更好嗎？更進一步，如果懂得開發，我們完全可以為了原型演示開發一個特定的api，實現相應功能。
歡迎留言討論。
本文由 @escher 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基于CC0協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
