天天看點

如何使用HBuilder将網站打包成app

1.下載下傳安裝HBuilder

首先下載下傳安裝HBuilder

2.建立移動app項目

在HBuilder中建立一個移動app項目,選擇空模闆

如何使用HBuilder将網站打包成app

建立完畢後目錄結構如下

如何使用HBuilder将網站打包成app

3.輕按兩下manifest.json

輕按兩下manifest.json檔案進行app的相關配置

關于啟動圖,隻能使用png格式的

4.修改index.html

配置完成後在index.html中加入跳轉js代碼

window.onload=function(){
     window.location.href="http://toptech.top";
}
           

6.原生安裝包

點選發行選擇雲打包-打原生安裝包

如何使用HBuilder将網站打包成app

7.打包

選擇android,點選打包,即可将網站打包成app。

如何使用HBuilder将網站打包成app

8.下載下傳安裝包

打包完成後可以選擇手動下載下傳

如何使用HBuilder将網站打包成app

9.安裝使用

然後将安裝包安裝到手機即可使用。

注意:打包成的app可能會出現手機點選傳回鍵直接退出應用,可以加入下面的js代碼

document.addEventListener(‘plusready’, function() {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener(‘backbutton’, function() {
        webview.canBack(function(e) {
            if(e.canBack) {
                webview.back();
            } else {
                //webview.close(); //hide,quit
                //plus.runtime.quit();
                //首頁傳回鍵處理
                //處理邏輯:1秒内,連續兩次按傳回鍵,則退出應用;
                var first = null;
                plus.key.addEventListener(‘backbutton’, function() {
                    //首次按鍵,提示‘再按一次退出應用’
                    if (!first) {
                        first = new Date().getTime();
                        console.log(‘再按一次退出應用’);
                        setTimeout(function() {
                            first = null;
                        }, 1000);
                    } else {
                        if (new Date().getTime() - first < 1500) {
                            plus.runtime.quit();
                        }
                    }
                }, false);
            }
        })
    });
});
           

原文位址

如何使用HBuilder将網站打包成app

歡迎關注公衆号:理木客

如何使用HBuilder将網站打包成app