今天給各位分享html網(wǎng)頁(yè)制作app手機(jī)版的知識(shí)，其中也會(huì)對(duì)html制作軟件手機(jī)版進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

• 1、html如何制作成apk
• 2、html+js做的網(wǎng)站，想做成APP怎么封裝呢
• 3、Cordova: 僅使用HTML/JS即可制作一個(gè)Android或者iOS的App
• 4、如何將html5程序打包成Android應(yīng)用
• 5、怎么用HTML5開(kāi)發(fā)手機(jī)app

html如何制作成apk

你需要一個(gè)web開(kāi)發(fā)工具。比如HBuilder。

用html做成一個(gè)網(wǎng)頁(yè)，然后在手機(jī)上用瀏覽器打開(kāi)，就相當(dāng)于一個(gè)apk。而HBuilder提供了這個(gè)打包功能，讓你把瀏覽器和html頁(yè)面打包，就類似于一個(gè)手機(jī)上運(yùn)行的app

html+js做的網(wǎng)站，想做成APP怎么封裝呢

如果要做網(wǎng)站封裝APP的話，其實(shí)非常簡(jiǎn)單的，網(wǎng)上很多開(kāi)發(fā)者服務(wù)平臺(tái)都有這個(gè)功能，操作非常簡(jiǎn)單，基本上一分鐘不到就可以封裝好。

在亥著開(kāi)發(fā)者中心找到【產(chǎn)品概覽】-【封裝APP】

輸入APP名稱，網(wǎng)站網(wǎng)址，選擇圖標(biāo)，也可以自己上傳自己的圖片。

然后根據(jù)自己的需要選擇選擇功能插件，像掃一掃、微信分享、下拉刷新這些功能都是免費(fèi)添加的。

Cordova: 僅使用HTML/JS即可制作一個(gè)Android或者iOS的App

關(guān)于這個(gè)問(wèn)題，還是看看官網(wǎng)是怎么說(shuō)的吧:

翻譯一下：

聽(tīng)上去蠻不錯(cuò)的，那么我們就開(kāi)始用它來(lái)做一個(gè)app吧！

創(chuàng)建應(yīng)用

如果按照Cordova( )官網(wǎng)所述，直接用npm全局安裝 cordova ，并創(chuàng)建應(yīng)用，你可能遇到以下錯(cuò)誤：

此時(shí)不要緊張，卸載 cordova ，使用 yarn 重新安裝一下，猜測(cè)可能和npm版本不兼容。

安裝好 yarn 和 cordova 之后，使用cli命令 cordova create MyApp 創(chuàng)建project，此時(shí)你可能會(huì)遇到以下錯(cuò)誤：

這是什么原因呢？

原來(lái)我們沒(méi)有將 yarn 的bin目錄加入到環(huán)境變量 path ，作為一個(gè)Windows僵尸粉，判斷出這點(diǎn)還是不難的。執(zhí)行以下命令，找到 yarn 的bin目錄所在：

將 d:\Users\gy.wang\AppData\Local\Yarn\bin 此目錄添加到windows環(huán)境變量 path

配置好環(huán)境，重新打開(kāi)CLI窗口，我們終于可以順利地創(chuàng)建 cordova 應(yīng)用，cordova使用默認(rèn)模板創(chuàng)建好一個(gè)Project。

添加Android平臺(tái)

在項(xiàng)目根目錄下，運(yùn)行命令 cordova build android 來(lái)編譯你的項(xiàng)目，你可能遇到以下錯(cuò)誤：

原因是啥呢？當(dāng)前cordova要求的Android版本比較高，需要安裝 Android SDK Platform 25 才能順利編譯，怎么辦？ 裝！

打開(kāi) Android Studio , 安裝SDK

安裝成功之后，執(zhí)行命令 cordova build android ，這次終于成功了！

APK包成功打好，這次我們運(yùn)行一下，執(zhí)行命令：

這次我們會(huì)遇到 環(huán)境坑四

不急，仔細(xì)看報(bào)錯(cuò)信息的意思是沒(méi)有可用的設(shè)備或模擬器。這個(gè)簡(jiǎn)單，打開(kāi)Android Studio添加一個(gè):

再次運(yùn)行 cordova run android ， 哈！ 這次成功了！

什么！閃退！WTF!

運(yùn)行命令 cordova run android ，將APK包安裝到模擬器上結(jié)果又報(bào)錯(cuò)了！

離成功就差一步了，別泄氣！我們慢慢查找原因~

至此，APP終于搞定了！

如何將html5程序打包成Android應(yīng)用

問(wèn)題分析：

html5網(wǎng)站主要由html+css+js的形式組成，需要使用瀏覽器進(jìn)行展現(xiàn)。

Android需要使用Java語(yǔ)言來(lái)開(kāi)發(fā)，對(duì)于前端工程師來(lái)說(shuō)，無(wú)疑是增加了很大的難度。

隨后出現(xiàn)了很多打包工具，來(lái)協(xié)助我們將網(wǎng)頁(yè)元素打包成手機(jī)app，將我們編寫的html轉(zhuǎn)化為Java語(yǔ)言。

解決方案：

推薦一款我們常用的打包工具：HBuilder。

該工具不僅提供了Android應(yīng)用打包，還可以直接連接手機(jī)進(jìn)行調(diào)試，配合HTML5+可以實(shí)現(xiàn)很多Android原生的功能。比如：掃碼二維碼，拍照，搖一搖等等。

具體操作步驟：

1、真機(jī)調(diào)試

進(jìn)入軟件后，第一步點(diǎn)擊“運(yùn)行”，第二步點(diǎn)擊“手機(jī)運(yùn)行”，第三步選擇已連接的手機(jī)，示例中我使用的是安卓模擬機(jī)進(jìn)行連接的。市面上常用的幾款安卓模擬機(jī)器都可以直接連接上。

按如上幾個(gè)步驟操作后，會(huì)自動(dòng)執(zhí)行打包并將應(yīng)用安裝在鏈接的手機(jī)（模擬器）中，可以操作手機(jī)（模擬機(jī)）進(jìn)行測(cè)試。

2、打包生成Android的安裝格式apk文件

①?打開(kāi)軟件，選擇發(fā)行-發(fā)行為原生安裝包，隨即打開(kāi)下圖窗口。

②?勾選Android復(fù)選框，如果使用Dcloud公用證書(shū)的話，可以直接進(jìn)行打包，手機(jī)可以安裝使用。如果需要上傳發(fā)行到第三方應(yīng)用平臺(tái)的話，需要使用自有證書(shū)，自用證書(shū)可以使用JRE自帶的創(chuàng)建和管理數(shù)字證書(shū)的工具Keytool來(lái)生成自有證書(shū)，生成過(guò)程是免費(fèi)的。

勾選Android選項(xiàng)后，在下方表單中填寫Android包名，為保證唯一性，可以使用自有網(wǎng)站域名的反寫方式加上應(yīng)用名稱。如果使用自有證書(shū)的話，還需要填寫證書(shū)別名，密鑰密碼，證書(shū)文件。

填寫完畢后，點(diǎn)擊打包，即可生成apk文件。

其他注意事項(xiàng)：

1、在開(kāi)發(fā)過(guò)程中，不需要進(jìn)行打包，應(yīng)更多的使用真機(jī)調(diào)試，可以節(jié)約很多時(shí)間。

2、開(kāi)發(fā)完畢后，盡可能在各種版本的android機(jī)器上做一下測(cè)試，因?yàn)橐恍┚W(wǎng)頁(yè)的樣式在不同的android版本中呈現(xiàn)的效果略有不同。

3、重新編輯一下html5網(wǎng)站代碼，將一些網(wǎng)頁(yè)功能轉(zhuǎn)換為手機(jī)功能，比如網(wǎng)頁(yè)元素的a標(biāo)簽跳轉(zhuǎn)，就應(yīng)該使用Webview來(lái)完成。可以解決頁(yè)面切換白屏的問(wèn)題，還可以提高網(wǎng)站在手機(jī)中的運(yùn)行效率。

怎么用HTML5開(kāi)發(fā)手機(jī)app

你說(shuō)的這個(gè)主要制作思路是使用響應(yīng)式設(shè)計(jì)，結(jié)合html5和css的一些特性制作（主要是css3的媒體檢查，根據(jù)不同視口載入不同樣式），但制作出來(lái)的東西能否被稱為手機(jī)app，這個(gè)還要看功能，如果你制作出來(lái)的東西能完成某些功能或者某種任務(wù)，這能被叫做webapp，如果不能就不要叫什么app，最多算是一種手機(jī)展示方式。

至于安卓和ios版本的問(wèn)題，考慮主要是圖片分辨率的問(wèn)題，區(qū)別不大。

html網(wǎng)頁(yè)制作app手機(jī)版的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于html制作軟件手機(jī)版、html網(wǎng)頁(yè)制作app手機(jī)版的信息別忘了在本站進(jìn)行查找喔。