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

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

Scroll Down

1.下载安装HBuilder

首先下载安装HBuilder

2.创建移动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.原生安装包

点击发行选择云打包-打原生安装包

在这里插入图片描述

7.打包

选择android,点击打包,即可将网站打包成app。

在这里插入图片描述

8.下载安装包

打包完成后可以选择手动下载

在这里插入图片描述

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);
            }
        })
    });
});