html網(wǎng)頁制作app手機版(html制作軟件手機版)
今天給各位分享html網(wǎng)頁制作app手機版的知識,其中也會對html制作軟件手機版進行解釋,如果能碰巧解決你現(xiàn)在面臨的問題,別忘了關(guān)注本站,現(xiàn)在開始吧!
本文目錄一覽:
- 1、html如何制作成apk
- 2、html+js做的網(wǎng)站,想做成APP怎么封裝呢
- 3、Cordova: 僅使用HTML/JS即可制作一個Android或者iOS的App
- 4、如何將html5程序打包成Android應(yīng)用
- 5、怎么用HTML5開發(fā)手機app
html如何制作成apk
你需要一個web開發(fā)工具。比如HBuilder。
用html做成一個網(wǎng)頁,然后在手機上用瀏覽器打開,就相當于一個apk。而HBuilder提供了這個打包功能,讓你把瀏覽器和html頁面打包,就類似于一個手機上運行的app
html+js做的網(wǎng)站,想做成APP怎么封裝呢
如果要做網(wǎng)站封裝APP的話,其實非常簡單的,網(wǎng)上很多開發(fā)者服務(wù)平臺都有這個功能,操作非常簡單,基本上一分鐘不到就可以封裝好。
在亥著開發(fā)者中心找到【產(chǎn)品概覽】-【封裝APP】
輸入APP名稱,網(wǎng)站網(wǎng)址,選擇圖標,也可以自己上傳自己的圖片。
然后根據(jù)自己的需要選擇選擇功能插件,像掃一掃、微信分享、下拉刷新這些功能都是免費添加的。
Cordova: 僅使用HTML/JS即可制作一個Android或者iOS的App
關(guān)于這個問題,還是看看官網(wǎng)是怎么說的吧:
翻譯一下:
聽上去蠻不錯的,那么我們就開始用它來做一個app吧!
創(chuàng)建應(yīng)用
如果按照Cordova( )官網(wǎng)所述,直接用npm全局安裝 cordova ,并創(chuàng)建應(yīng)用,你可能遇到以下錯誤:
此時不要緊張,卸載 cordova ,使用 yarn 重新安裝一下,猜測可能和npm版本不兼容。
安裝好 yarn 和 cordova 之后,使用cli命令 cordova create MyApp 創(chuàng)建project,此時你可能會遇到以下錯誤:
這是什么原因呢?
原來我們沒有將 yarn 的bin目錄加入到環(huán)境變量 path ,作為一個Windows僵尸粉,判斷出這點還是不難的。執(zhí)行以下命令,找到 yarn 的bin目錄所在:
將 d:\Users\gy.wang\AppData\Local\Yarn\bin 此目錄添加到windows環(huán)境變量 path
配置好環(huán)境,重新打開CLI窗口,我們終于可以順利地創(chuàng)建 cordova 應(yīng)用,cordova使用默認模板創(chuàng)建好一個Project。
添加Android平臺
在項目根目錄下,運行命令 cordova build android 來編譯你的項目,你可能遇到以下錯誤:
原因是啥呢?當前cordova要求的Android版本比較高,需要安裝 Android SDK Platform 25 才能順利編譯,怎么辦? 裝!
打開 Android Studio , 安裝SDK
安裝成功之后,執(zhí)行命令 cordova build android ,這次終于成功了!
APK包成功打好,這次我們運行一下,執(zhí)行命令:
這次我們會遇到 環(huán)境坑四
不急,仔細看報錯信息的意思是沒有可用的設(shè)備或模擬器。這個簡單,打開Android Studio添加一個:
再次運行 cordova run android , 哈! 這次成功了!
什么!閃退!WTF!
運行命令 cordova run android ,將APK包安裝到模擬器上結(jié)果又報錯了!
離成功就差一步了,別泄氣!我們慢慢查找原因~
至此,APP終于搞定了!
如何將html5程序打包成Android應(yīng)用
問題分析:
html5網(wǎng)站主要由html+css+js的形式組成,需要使用瀏覽器進行展現(xiàn)。
Android需要使用Java語言來開發(fā),對于前端工程師來說,無疑是增加了很大的難度。
隨后出現(xiàn)了很多打包工具,來協(xié)助我們將網(wǎng)頁元素打包成手機app,將我們編寫的html轉(zhuǎn)化為Java語言。
解決方案:
推薦一款我們常用的打包工具:HBuilder。
該工具不僅提供了Android應(yīng)用打包,還可以直接連接手機進行調(diào)試,配合HTML5+可以實現(xiàn)很多Android原生的功能。比如:掃碼二維碼,拍照,搖一搖等等。
具體操作步驟:
1、真機調(diào)試
進入軟件后,第一步點擊“運行”,第二步點擊“手機運行”,第三步選擇已連接的手機,示例中我使用的是安卓模擬機進行連接的。市面上常用的幾款安卓模擬機器都可以直接連接上。
按如上幾個步驟操作后,會自動執(zhí)行打包并將應(yīng)用安裝在鏈接的手機(模擬器)中,可以操作手機(模擬機)進行測試。
2、打包生成Android的安裝格式apk文件
①?打開軟件,選擇發(fā)行-發(fā)行為原生安裝包,隨即打開下圖窗口。
②?勾選Android復選框,如果使用Dcloud公用證書的話,可以直接進行打包,手機可以安裝使用。如果需要上傳發(fā)行到第三方應(yīng)用平臺的話,需要使用自有證書,自用證書可以使用JRE自帶的創(chuàng)建和管理數(shù)字證書的工具Keytool來生成自有證書,生成過程是免費的。
勾選Android選項后,在下方表單中填寫Android包名,為保證唯一性,可以使用自有網(wǎng)站域名的反寫方式加上應(yīng)用名稱。如果使用自有證書的話,還需要填寫證書別名,密鑰密碼,證書文件。
填寫完畢后,點擊打包,即可生成apk文件。
其他注意事項:
1、在開發(fā)過程中,不需要進行打包,應(yīng)更多的使用真機調(diào)試,可以節(jié)約很多時間。
2、開發(fā)完畢后,盡可能在各種版本的android機器上做一下測試,因為一些網(wǎng)頁的樣式在不同的android版本中呈現(xiàn)的效果略有不同。
3、重新編輯一下html5網(wǎng)站代碼,將一些網(wǎng)頁功能轉(zhuǎn)換為手機功能,比如網(wǎng)頁元素的a標簽跳轉(zhuǎn),就應(yīng)該使用Webview來完成??梢越鉀Q頁面切換白屏的問題,還可以提高網(wǎng)站在手機中的運行效率。
怎么用HTML5開發(fā)手機app
你說的這個主要制作思路是使用響應(yīng)式設(shè)計,結(jié)合html5和css的一些特性制作(主要是css3的媒體檢查,根據(jù)不同視口載入不同樣式),但制作出來的東西能否被稱為手機app,這個還要看功能,如果你制作出來的東西能完成某些功能或者某種任務(wù),這能被叫做webapp,如果不能就不要叫什么app,最多算是一種手機展示方式。
至于安卓和ios版本的問題,考慮主要是圖片分辨率的問題,區(qū)別不大。
html網(wǎng)頁制作app手機版的介紹就聊到這里吧,感謝你花時間閱讀本站內(nèi)容,更多關(guān)于html制作軟件手機版、html網(wǎng)頁制作app手機版的信息別忘了在本站進行查找喔。
掃描二維碼推送至手機訪問。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請注明出處。