網站打包免費生成APP教程,HBuilder軟體將網址打包生成app

2022-04-14 21:20  閱讀 55 次瀏覽 次

雖然說網路上也有很多「網站打包」的平臺,也有所謂的「在線雲打包」。 那麼,如何將將一個網址打包成app?

準備:

1、網站打包工具或軟體:HBuilder

2、必須有一個網站,也就是網址

3、此方法是:免費! 免費! 免費! 重要的事情說3遍。

一、下載、安裝 HBuilder

HBuilder 是DCloud(數位天堂)推出一款支援HTML5的Web開發IDE。 “快,是HBuilder的最大優勢,通過完整的語法提示和代碼輸入法、代碼塊及很多配套,HBuilder能大幅提升HTML、js、css的開發效率。

現在最新的版本是:HBuilderX;

1、HBuilder 下載位址https://www.dcloud.io/hbuilderx.html

點進以上網址進入下載,選擇「正式版」,下載時選擇「標準版」即可!

hbuilderx.jpg

2、HBuilder 安裝

由於我下載的是 zip解壓包,不用安裝,直接解壓就可以使用了,我解壓到的路徑是:H:\HBuilderX;

3、HBuilder 啟動

以我這裡為例子,只需要按兩下:H:\HBuilderX\HBuilderX.exe 就可以正常運行此軟體了。

二、HBuilder 新建專案

1、點開HBuilder以後按以下路徑新建專案:檔 - 新建 - 專案。

hbuilderx.jpg

2、如果只是打包一個網址的話,可以選擇Wap2App,分別輸入專案名稱,以及網站位址。

例如:https://www.glodchain.com/,注意此處網址即為app默認打開的網址

再點擊「創建」按鈕。

hbuilderx.jpg

三、強制橫屏設置

此步驟非必要操作,沒有這個功能需求的可以直接選擇跳過此步驟。

1、單純在manifest中設置橫屏或者豎屏並不會起效果,需要加入強制橫屏代碼,此代碼寫在app.js中:

hbuilderx.jpg

代碼如下:

// 锁定屏幕方向
function lockOrientation(){
plus.screen.lockOrientation("landscape-primary");
},
如果代碼有不懂,請參考官方手冊: 
2、將以上代碼寫在具體橫屏或者豎屏代碼見下文manifest設置,此處以主螢幕橫屏舉例。

hbuilderx.jpg

3、然後再 manifest.json 設置中同樣更改為“landscape-primary”橫屏設置。

這裡需要注意一下,預設已經是 portrait-primary(豎屏),如果選擇多個方向,將根據手機重力感覺自動旋轉。

hbuilderx.jpg

四、網址打包生成app

總算到了最後一個步驟了,馬上就大功告成了。

1、首先,可以在:manifest.json - 圖示配置中設置app圖示,並可以選擇自動替換所有用到此圖示的地方。

hbuilderx.jpg

2、準備進行打包,依次點擊:發行 - 原生app(雲打包);

打包這裡需要先登陸HBuilder帳號,沒有的朋友可以先去註冊、驗證一下(郵箱驗證、手機驗證)就可以用了,也很簡單。

hbuilderx.jpg

3、Android 打包:Android(apk包)

注意去掉廣告,按要求更改包名,然後使用老版證書,使用老版證書需要實名認證,點擊打包會自己彈窗,點擊實名即可,大概一個小時左右即可認證成功。 如果等不及可以使用公共測試證書

hbuilderx.jpg

4、iOS打包:ISO(ipa包)

可以選擇越獄,並注意去掉廣告;

hbuilderx.jpg

5、當圖示沒有叉號便表示可以打包,有叉就不能打包。

hbuilderx.jpg

6、點擊「打包」按鈕后,如果沒有安裝「安心打包」外掛程式,會彈出以下提示框,點擊「安裝」繼續;

hbuilderx.jpg

7、下載、安裝「真機運行外掛程式」,具體去:運行 - 運行到手機或模擬器 - 下載安裝真機運行外掛程式;

hbuilderx.jpg

如果你先不下載,你打包的時候就會提示「請先下載真機運行外掛程式然後在重新打包」:

hbuilderx.jpg

8、去 manifest.json - 模組配置 - Contact(通訊錄) 取消掉,前面不要打勾

hbuilderx.jpg

如果「Contact(通訊錄)」這裡打勾過,打包的時候就會提示如下:

雲端伺服器返回錯誤:本次打包選擇了通訊錄許可權,請完成實名認證后再繼續打包! 如果不需要使用通訊錄許可權,請在 manifest.json 頁面取消通訊錄許可權後,重新提交打包。

通訊錄權限設定:

1.APP模組配置:Contact(通訊錄);

2.APP許可權配置:android.permission.READ_CONTACTS

hbuilderx.jpg

9、再點擊「打包」,打包成功后的狀態如下圖,這裡就會生成一個:

iOS越獄包 下載地址,雖然說只能下載5次。

Android安裝包位置:C:/Users/NING MEI/Documents/HBuilderProjects/創客學院/unpackage/release/apk/

總結:

現在我們由網站打包成APP就算完成了,只要你有一個網址就可以生成免費的APP,哪怕是一個簡簡單單的網頁也可以,是不是感覺很爽? 快去試一試吧!

本文地址:https://www.glodchain.com/hbuilder-app.html
溫馨提醒:文章僅代表原作者的觀點,不能作為投資建議。

評論已關閉!