2個(gè)將HTML5打包成app的方法

來越多的開發(fā)者熱衷于使用html5+JavaScript開發(fā)移動(dòng)Web App。不過，HTML5 Web APP的出現(xiàn)能否在未來取代移動(dòng)應(yīng)用，就目前來說，還是個(gè)未知數(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)回退剪鍵，整個(gè)瀏覽器會(huì)調(diào)用finish()而結(jié)束自身，而不是回退到上一頁面

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

? <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是一個(gè)用基于HTML，CSS和JavaScript的，創(chuàng)建移動(dòng)跨平臺移動(dòng)應(yīng)用程序的快速開發(fā)平臺。它使開發(fā)者能夠利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機(jī)的核心功能——包括地理定位，加速器，聯(lián)系人，聲音和振動(dòng)等，此外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)，并首個(gè)提供響應(yīng)式、webapp前端開發(fā)的公司。專注web前端開發(fā)技術(shù)，關(guān)注用戶體驗(yàn)，加我們公眾微信賬號：qietuwang（長按復(fù)制）

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

我們首先打開web開發(fā)工具h(yuǎn)builder，新建一個(gè)項(xiàng)目如圖：

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

unpackage文件夾是放置app圖標(biāo)和啟動(dòng)界面的圖片。

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

頁面入口默認(rèn)是index.html，根據(jù)自己項(xiàng)目需要，更改APP的啟動(dòng)頁面，3是manifest.json文件是移動(dòng)App的配置文件，用于指定應(yīng)用的顯示名稱、圖標(biāo)、應(yīng)用入口文件地址及需要使用的設(shè)備權(quán)限等信息，用戶可通過HBuilder的可視化界面視圖或者源碼視圖來配置移動(dòng)App的信息，當(dāng)然如果你要設(shè)置 APP 的啟動(dòng)圖和圖標(biāo)，你只需要在 manifest.json 里面進(jìn)行設(shè)置即可，這就是為什么不要?jiǎng)h掉的原因！

下圖為index.html的內(nèi)容，很簡單，在html的body中寫入內(nèi)容。

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

配置完成后，點(diǎn)擊頁面下方的圖標(biāo)配置：配置APP在手機(jī)上的顯示圖標(biāo)；默認(rèn)是HBuilder的圖標(biāo)：

點(diǎn)擊"打開下載目錄"，找到app所在目錄

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

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

在基于vue全家桶技術(shù)體系，基本上可以開發(fā)各端的各種應(yīng)用，pc端的應(yīng)用，開發(fā)完成以后，直接運(yùn)行打包命令 yarn build 即可打包，部署到服務(wù)器端上線即可。那么，今天我們來聊一聊，開發(fā)好的vue移動(dòng)端應(yīng)用，如何打包成app，安裝在自己的手機(jī)上呢？

首先，基于vue開發(fā)的應(yīng)用，現(xiàn)在主流的是使用vue/cli的4.x版本搭建的項(xiàng)目，從vue-cli的3.x版本以后，如何修改vue的項(xiàng)目配置呢？過程和步驟如下。

我們需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)vue.confing.js文件，項(xiàng)目目錄如下

在vue.config.js中，我們就可以寫很多webpack配置，常用的有: 配置端口號，配置跨域服務(wù)器代理等。我們需要的主要是配置一個(gè)打包的目錄publicPath,否則打包出來的apk文件，安裝在安卓手機(jī)上，可能出現(xiàn)白屏，具體配置如下:

module.exports = {

devServer: {

port: "6868", // 配置開發(fā)服務(wù)器的端口號（打包可以無需配置）

// 配置跨域代理(也可以使用CROS解決跨域)

proxy: {

"/ api": {

target: "http://192.168.1.1:4343", // 目標(biāo)服務(wù)器地址

ws: true, // 是否代理websocket

changeOrigin: true, // 是否跨域

pathRewrite: {

"^/api": '' // url重寫

}

publicPath: "./" // 需要配置否則打包后的apk文件安裝在手機(jī)可能白屏

}

配置好了以后，從項(xiàng)目目錄進(jìn)入終端，運(yùn)行打包命令即可

打包完成以后，項(xiàng)目根目錄下，會(huì)多出一個(gè)dist目錄，內(nèi)容如下：

經(jīng)歷以上步驟，我們的vue項(xiàng)目就已經(jīng)打包完成了，接下來，需要借助一個(gè)工具h(yuǎn)builderX，把我們的項(xiàng)目打包為android端的apk文件，具體步驟如下：

一、首先，去官網(wǎng)下載hbuildX，下載地址為: https://www.dcloud.io/hbuilderx.html. 選擇自己的環(huán)境，下載對應(yīng)的版本即可，下載完成直接解壓，打開HbuildX.

啟動(dòng)后界面如下：

啟動(dòng)界面的左下角有一個(gè)登錄按鈕，點(diǎn)擊登錄，如果沒有賬號的話，顯注冊一個(gè)賬號在登錄，登錄完成以后，左下角會(huì)有自己的賬號名稱。

然后，選擇新建、項(xiàng)目，創(chuàng)建一個(gè)5+App項(xiàng)目，項(xiàng)目名稱和路徑自己選擇即可。

創(chuàng)建出來的項(xiàng)目目錄和目錄說明如下，把之前打包好的dist目錄內(nèi)容復(fù)制粘貼過來，直接選擇覆蓋即可。

以上步驟完成以后，接下來所有工作準(zhǔn)備就緒，只剩下打包了，具體打包步驟如下：

打開manifest.json，配置核心重要的幾個(gè)選項(xiàng)，具體配置如下：

生成的圖標(biāo)在unpackage目錄下面的res目錄中

選擇發(fā)行=》原生App云打包=>然后選擇打android的包，有ios的證書也可以打包為ios，android可以用免費(fèi)的公用證書，開發(fā)者直接使用即可，具體選擇如下，然后接下來等待即可。

稍微等待之后，打包成功之后，會(huì)返回apk下載文件的下載鏈接，點(diǎn)擊鏈接，把a(bǔ)pk文件下載下來，然后發(fā)送到自己的android手機(jī)，安裝在自己的手機(jī)上即可。

經(jīng)歷過以上的步驟，我們就可以在自己的手機(jī)上體驗(yàn)自己開發(fā)的app了，大家可以按照步驟來試一試，把自己開發(fā)的app安裝在自己的手機(jī)上，使用起來吧。

在線咨詢

上一篇：網(wǎng)頁前端設(shè)計(jì)-03Html基礎(chǔ)-Html內(nèi)容組成框架
下一篇：網(wǎng)頁響應(yīng)鼠標(biāo)滾動(dòng)特效代碼html前端源碼

您的項(xiàng)目需求

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

整合營銷服務(wù)商

2個(gè)將HTML5打包成app的方法

我們需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)vue.confing.js文件，項(xiàng)目目錄如下

您的項(xiàng)目需求

我們需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)vue.confing.js文件，項(xiàng)目目錄如下